【微信小程式】常用元件及自定義元件

(一) 常用標籤

元件你可以理解為傳統頁面開發時候的各種標籤，例如 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
    })
  }
})

結尾

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

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

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

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