【微信小程序】常用組件及自定義組件

(一) 常用標簽

組件你可以理解為傳統頁面開發時候的各種標簽，例如 div span 等等，我這里只說一些常用的，這樣就能能搭建出一個基本的頁面了，但是如果想要更加美觀以及擁有更好的體驗，就需要 WSS 和 別的一些強大的組件了，如果有額外的需求，可以去官方文檔查閱一下 (同時不常用的屬性，也就不提了)

https://developers.weixin.qq.com/miniprogram/dev/component/

(1) view

view 可以理解為傳統頁面開發中的 div 塊級元素，使用 view 會換行

關於 view 標簽，還有一些額外的屬性，說的也很清楚，但是前期的話，其實不考慮這個也是可以的，就單純的當做一個布局的 div 來用

屬性	類型	默認值	必填	說明	最低版本
hover-class	string	none	否	指定按下去的樣式類。當 hover-class="none" 時，沒有點擊態效果	1.0.0
hover-stop-propagation	boolean	false	否	指定是否阻止本節點的祖先節點出現點擊態	1.5.0
hover-start-time	number	50	否	按住后多久出現點擊態，單位毫秒	1.0.0
hover-stay-time	number	400	否	手指松開后點擊態保留時間，單位毫秒	1.0.0

(2) text

text 可以理解為傳統頁面中的 span 行內元素，text 不會換行

text 涉及的一些標簽

屬性	類型	默認值	必填	說明	最低版本
selectable	boolean	false	否	文本是否可選	1.1.0
space	string		否	顯示連續空格	1.4.0
decode	boolean	false	否	是否解碼	1.4.0

space 的合法值

值	說明
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根據字體設置的空格大小

decode可以解析的有

  < > & '    

簡單測試一下其中兩個，可以看到，后者長按可以選擇文字，同時編碼被解析成空格，前者反之

<text selectable="{{false}}" decode="{{false}}">測&nbsp;試</text>
<text selectable="{{true}}" decode="{{true}}">測&nbsp;試</text>

(3) image

image 就是圖片相關的一個組件，這個組件默認寬度320px、⾼度240px，同時支持懶加載

我摘了三個比較常用的屬性出來

屬性	類型	默認值	必填	說明	最低版本
src	string		否	圖片資源地址	1.0.0
mode	string	scaleToFill	否	圖片裁剪、縮放的模式	1.0.0
lazy-load	boolean	false	否	圖片懶加載，在即將進入一定范圍（上下三屏）時才開始加載	1.5.0

他作為圖片的一個承載物，我們重點多說一下關於 mode 的問題，也就是圖片的顯示形式

所以先來看一下，mode 的取值范圍（節選了相對常用的，其余的取值都屬於裁剪類型）

值	說明	最低版本
scaleToFill	縮放模式，不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素
aspectFit	縮放模式，保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。
aspectFill	縮放模式，保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向將會發生截取。
widthFix	縮放模式，寬度不變，高度自動變化，保持原圖寬高比不變
heightFix	縮放模式，高度不變，寬度自動變化，保持原圖寬高比不變	2.10.3

比較常用是 widthFix，在這幾個其中，aspectFill 相對還是用的比較少的

(4) swiper

這個組件，是小程序頁面中的一個輪播圖的效果

swiper 是輪播圖的一個總的容器，swiper-item 代表其中的每一個內容，配合其屬性，能很方便的達到需要的樣式

同樣摘了幾個常見的屬性

屬性	類型	默認值	必填	說明	最低版本
indicator-dots	boolean	false	否	是否顯示面板指示點	1.0.0
indicator-color	color	rgba(0, 0, 0, .3)	否	指示點顏色	1.1.0
indicator-active-color	color	#000000	否	當前選中的指示點顏色	1.1.0
autoplay	boolean	false	否	是否自動切換	1.0.0
interval	number	5000	否	自動切換時間間隔	1.0.0
duration	number	500	否	滑動動畫時長	1.0.0
circular	boolean	false	否	是否采用銜接滑動	1.0.0
vertical	boolean	false	否	滑動方向是否為縱向	1.0.0

顯示比例問題

首先說明一下，swiper存在一些默認的樣式

• width: 100%
• height 150px

image 默認寬高

• width: 320px
• height: 240px

如果，swiper 的高度出現了問題，給出一個解決方式

先根據素材圖片的寬高比例，等比計算 swiper 的寬高，這樣高度就換算出來了

swiper 高度 = swiper 寬度 * 素材高度 / 素材寬度

即：height: 750rpx * 素材高度 / 素材寬度

來看個綜合一些的例子

WXML

圖片隨便自己做了兩張

<swiper autoplay="{{true}}" interval="5000" circular="{{true}}" indicator-dots="{{true}}"
    indicator-color="#D3D3D3" indicator-active-color="#FFFF00">
    <swiper-item><image mode="widthFix" src="../../image/swiperC.jpg"></image></swiper-item>
    <swiper-item><image mode="widthFix" src="../../image/swiperB.jpg"></image></swiper-item>
    <swiper-item><image mode="widthFix" src="../../image/swiperA.jpg"></image></swiper-item>
</swiper>

WXSS

swiper{
    width: 100%;
    height: calc(750rpx * 275 / 1000);
}

image{
    width: 100%;
}

看一下效果，現在就實現了輪播圖的效果，同時會5秒自動循環輪播，自己可以對照屬文檔進行定制修改

(5) navigator

導航組件，這塊可以理解為傳統頁面開發的超鏈接標簽

屬性	類型	默認值	必填	說明	最低版本
target	string	self	否	在哪個目標上發生跳轉，默認當前小程序	2.0.7
url	string		否	當前小程序內的跳轉鏈接	1.0.0
open-type	string	navigate	否	跳轉方式	1.0.0

open-type 的合法值

值	說明	最低版本
navigate	保留當前頁面，跳轉到應用內的某個頁面，但是不能跳到tabbar 頁面
redirect	關閉當前頁面，跳轉到應用內的某個頁面，但是不允許跳轉到tabbar 頁面
switchTab	跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面
reLaunch	關閉所有頁面，打開到應用內的某個頁面	1.1.0
navigateBack	關閉當前頁面，返回上⼀頁面或多級頁面。可通過 getCurrentPages() 獲取當	1.1.0
exit	退出小程序，target= miniProgram 時⽣效	2.1.0

下面給出一個測試的代碼，默認不添加 open-type 的寫法會有一個返回上一層的

<navigator url="/pages/test06/test06">默認跳轉到test06</navigator>

<navigator open-type="redirect" url="/pages/test06/test06">redirect跳轉到test06</navigator>

<navigator open-type="switchTab" url="/pages/index/index">switchTab跳轉到主頁</navigator>

<navigator open-type="reLaunch" url="/pages/index/index">reLaunch跳轉到主頁</navigator>

(6) rich-text

這是一個富文本標簽，作用就是把字符串中的對應標簽解析出來，其主要的一個屬性就是 nodes ，我們先簡單看一下 nodes的屬性有哪些

現支持兩種節點，通過type來區分，分別是元素節點和文本節點，默認是元素節點，在富文本區域里顯示的HTML節點 元素節點：type = node

屬性	說明	類型	必填	備注
name	標簽名	string	是	支持部分受信任的 HTML 節點
attrs	屬性	object	否	支持部分受信任的屬性，遵循 Pascal 命名法
children	子節點列表	array	否	結構和 nodes 一致

來看一個例子，這個nodes 的值，我們去 js 中定義一個

<rich-text nodes="{{receive}}"></rich-text>

有兩種方式賦值，一種就是我注釋掉的那一行，直接使用一個含有標簽的字符串，直接賦值就會解析，另一種就是通過后面這樣 JSON 的一種格式賦值，效果是一樣的

Page({
  data: {
    // receive:'<div class="div_class"><h3>理想二旬不止</h3></div>'
    receive:[{
      name:'div',
      attrs:{
        class:'div_class'
      },
      children:[{
        name:'h3',
        attrs:{},
        children:[{
          type:'text',
          text:'理想二旬不止'
        }]
      }]
    }] 
  },
})

(7) button

按鈕標簽，也算是非常常用的內容了，同時相比較傳統頁面開發中的按鈕，微信小程序中又有很多開放式的功能，首先看一些涉及的一些屬性（更多內容可以看官網文檔）：

https://developers.weixin.qq.com/miniprogram/dev/component/button.html

屬性	類型	默認值	必填	說明	最低版本
size	string	default	否	按鈕的大小	1.0.0
type	string	default	否	按鈕的樣式類型	1.0.0
plain	boolean	false	否	按鈕是否鏤空，背景色透明	1.0.0
disabled	boolean	false	否	是否禁用	1.0.0
loading	boolean	false	否	名稱前是否帶 loading 圖標	1.0.0
form-type	string		否	用於 form 組件，點擊分別會觸發 form 組件的 submit/reset 事件	1.0.0
open-type	string		否	微信開放能力	1.10

size 的合法值

值	說明
default	默認大小
mini	小尺寸

type 的合法值

值	說明
primary	綠色
default	白色
warn	紅色

form-type 的合法值

值	說明	最低版本
submit	提交表單
reset	重置表單

open-type 的合法值

值	說明	最低版本
contact	打開客服會話，如果用戶在會話中點擊消息卡片后返回小程序，可以從 bindcontact 回調中獲得具體信息	1.1.0
share	觸發用戶轉發，使用前建議先閱讀	1.2.0
getPhoneNumber	獲取用戶手機號，可以從bindgetphonenumber回調中獲取到用戶信息	1.2.0
getUserInfo	獲取用戶信息，可以從bindgetuserinfo回調中獲取到用戶信息	1.3.0
launchApp	打開APP，可以通過app-parameter屬性設定向APP傳的參數	1.9.5
openSetting	打開授權設置頁	2.0.7
feedback	打開“意見反饋”頁面，用戶可提交反饋內容並上傳日志，開發者可以登錄小程序管理后台后進入左側菜單“客服反饋”頁面獲取到反饋內容	2.1.0

這幾個代碼就是通過 size 、type 進行基本的大小或者說類型實現一個樣式

<button style="width:100%">默認按鈕</button>
<button style="width:100%" size="mini">mini 默認按鈕</button>
<button style="width:100%" type="primary">primary 按鈕</button>
<button style="width:100%" type="warn">warn 按鈕</button>
<button style="width:100%" type="warn" plain>plain 按鈕</button>

下面就是一些開放的功能

<button style="width:100%" open-type="contact">聯系客服</button>
<button style="width:100%" open-type="share">分享小程序</button>
<button style="width:100%" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
    獲取電話號碼
</button>
<button style="width:100%" open-type="getUserInfo" bindgetuserinfo="getUserInfo">
    獲取用戶信息
</button>
<button style="width:100%" open-type="launchApp">打開App</button>
<button style="width:100%" open-type="openSetting">打開授權設置頁</button>
<button style="width:100%" open-type="feedback">意見反饋</button>

需要說明的幾個點：

• 聯系客服這個功能只能在真機調試，需要先在后台綁定一個客服的微信號碼，接着在開發工具中選擇真機調試，然后掃描二維碼就可以了

• 獲取電話號碼，以及用戶信息，需要結合事件來做，例如：

Page({
  // 獲取用戶的手機號碼信息
  getPhoneNumber(e){
    console.log(e);
  },
  // 獲取用戶個人信息
  getUserInfo(e){
    console.log(e);
  }
})

例如獲取用戶信息

但是電話號碼，不是企業的小程序賬號 沒有權限來獲取用戶的手機號碼

• 打開App，是在 app 中 通過 app 的某個鏈接打開小程序，然后在小程序 再通過這個功 重新打開 app

• 當前版本的微信小程序，在.wxss文件里設置Button寬度無效，網絡上的一種解決方案就是把 app.json里的 style: v2語句刪掉，還有一種就是像我代碼中一樣，直接加 style，暫時推薦后者吧，此處未深究

(8) icon

微信小程序默認封裝了一些圖標，也很簡單，只有三個屬性

屬性	類型	默認值	必填	說明	最低版本
type	string		是	icon的類型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear	1.0.0
size	number/string	23	否	icon的大小	1.0.0
color	string		否	icon的顏色，同css的color	1.0.0

簡單用一下

<icon  type="success" size="50"> </icon>
<icon  type="success" size="50" color="#3390ff"> </icon>

如果不指定顏色，其默認都是有一定顏色樣式的，如果指定了 color 就會覆蓋掉原來的顏色

(9) radio

單選框組件，需要配合 radio-group 使用，下面看代碼就明白了

屬性	類型	默認值	必填	說明	最低版本
value	string		否	radio標識。當該radio選中時，radio-group 的 change 事件會攜帶 radio 的 value	1.0.0
checked	boolean	false	否	當前是否選中	1.0.0
disabled	boolean	false	否	是否禁用	1.0.0
color	string	#09BB07	否	radio的顏色，同css的color	1.0.0

簡單用一下，

<radio-group bindchange="handleChange">
  <radio color="blue" value="male">男</radio>
  <radio color="blue" value="female" >女</radio>
</radio-group>

<view>你選擇的性別是:{{gender}}</view>

js 內容，至於 e.detail.value 如何來的，可以通過 console.log(e) 打印看到

Page({
  data: {
    gender: ""
  },
  handleChange(e){
    // 獲取單選框中的值
    let gender=e.detail.value;
    // 把值 賦值給 data中的數據
    this.setData({
      gender
    })
  }
})

(10) checkbox

屬性	類型	默認值	必填	說明	最低版本
value	string		否	checkbox 標識，選中時觸發 checkbox-group 的 change 事件，並攜帶 checkbox 的 value	1.0.0
disabled	boolean	false	否	是否禁用	1.0.0
checked	boolean	false	否	當前是否選中，可用來設置默認選中	1.0.0
color	string	#09BB07	否	checkbox的顏色，同css的color	1.0.0

直接用一下

<view>
  <checkbox-group bindchange="handleItemChange">
    <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">
      {{item.name}}
    </checkbox>
  </checkbox-group>
  <view>
    選中的內容:{{checkedList}}
  </view>
</view>

Page({
  data: {
    list:[
      {
        id:0,
        name:"🌞️",
        value:"太陽"
      },
      {
        id:1,
        name:"🌙",
        value:"月亮"
      },
      {
        id:2,
        name:"⭐️",
        value:"星星"
      }
    ],
    checkedList:[]
  },
  // 復選框的選中事件
  handleItemChange(e){
    // 獲取被選中的復選框的值
    const checkedList=e.detail.value;
    // 進行賦值
    this.setData({
      checkedList
    })
  }
})

運行結果：

(二) 自定義組件（標簽）

(1) 快速體驗

如果我們想要自定義一些組件，也就是說將一些代碼抽離出來，可以達到復用等的效果

我們一步一步舉個例子：

首先創建文件夾目錄 components/header

接着右鍵創建組件 header，點擊新建 Component

結構就是這樣的

一般點擊創建組件的方式會自動將組件的 json 文件中聲明組件，如果沒有需要自己手動修改component 為 true

{
  "component": true,
}

接着在組件WXML中隨便寫點東西，然后打開想要引用組件的頁面，首先在 json 中說明引用組件

{
  "usingComponents": {
    "header":"/../../components/header/header"
  }
}

然后直接引用就可以了，效果就出來了

<header></header>

(2) 組件傳參

組件傳參有兩個方向，一個是父組件 --> 子組件 ，還有就是反過來。注：父組件是頁面，子組件是自定義組件

• ⽗組件通過屬性的⽅式給⼦組件傳遞參數

• 組件通過事件的⽅式向⽗組件傳遞參數

通過一個例子來演示

在上面結構上自己寫一個自定義的組件，一個導航條的效果

自定義組件的頁面代碼

<!-- components/header/header.wxml -->
<view class="header">
    <view class="header_tabs_title">
        <view wx:for="{{headerTabs}}" 
        wx:key="id" 
        class="header_tabs_title_item {{item.isActive?'active':''}}"
        bindtap="hanldeItemTap"
        data-index="{{index}}"
        >
            {{item.name}}
        </view>
    </view>
</view>

自定義組件的樣式文件如下

/* components/header/header.wxss */
.header_tabs_title{
    display: flex;
    padding: 10px;
}
.header_tabs_title_item{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.active{
    color:blue;
    border-bottom: 5rpx solid currentColor;
}

自定義組件的 js文件，在 properties 中的內容，就是接收到父（頁面）的數據，也就是一個關於導航的數組，其中包括首頁測試關於等等導航文字內容

• headerTabs的位置：要接受的名稱，自己定

• type：要接收的數據的類型

• value：默認值

而下面的方法就是關於父傳數據到子組件的內容，其代表觸發父組件中的自定義事件，同時傳遞數據給 父組件

// components/header/header.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    headerTabs:{
      type:Array,
      value:[]
    }
  },

  /**
   * 組件的初始數據
   */
  data: {

  },

  /**
   * 組件的方法列表
   */
  methods: {
    hanldeItemTap(e){
      const {index}=e.currentTarget.dataset;
      // 觸發父組件中的自定義事件 同時傳遞數據給  
      this.triggerEvent("itemChange",{index});
    }
  }
})

補充：e.currentTarget.dataset; 是怎么來的，還是老辦法，console 打印一下

父頁面

綁定一個事件，同時把等會再 js 中的定義數據，傳遞到自定義組件中去，名稱就是剛才接收的 headerTabs

<header headerTabs="{{headerTabs}}" binditemChange="handleItemChange" ></header>

父頁面的 js

說明：let { headerTabs } = this.data; 這是 ES6 的寫法，也可以寫成

let headerTabs = this.data.headerTabs;

遍歷數組的時候 修改了 v ，就把源數組也修改了

目的就是通過點擊修改定義導航中的 isActive 為 true 或 false

// pages/test08/test08.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    headerTabs:[
      {
        id:0,
        name:"首頁",
        isActive:true
      },
      {
        id:1,
        name:"測試",
        isActive:false
      },
      {
        id:2,
        name:"測試",
        isActive:false
      },
      {
        id:3,
        name:"關於",
        isActive:false
      },
    ]
  },
  // 自定義事件 用來接收子組件傳遞的數據的
  handleItemChange(e) {
    // 接收傳遞過來的參數
    const { index } = e.detail;
    let { headerTabs } = this.data;
    headerTabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
    this.setData({
      headerTabs
    })
  }
})

結尾

如果文章中有什么不足，歡迎大家留言交流，感謝朋友們的支持！

如果能幫到你的話，那就來關注我吧！如果您更喜歡微信文章的閱讀方式，可以關注我的公眾號

在這里的我們素不相識，卻都在為了自己的夢而努力 ❤

一個堅持推送原創開發技術文章的公眾號：理想二旬不止