2017.11月初期待已久的原生小程序自定義組件功能已經(jīng)發(fā)布，此次發(fā)布版本為 1.6.3，盡管此前有模板<template>和開(kāi)源 wx-parse 工具也可以一定程度上復(fù)用代碼，但相比此次原生小程序推出的組件化編程，都略有不足。話(huà)不多說(shuō)膜廊，通過(guò)動(dòng)手寫(xiě)一個(gè)組件來(lái)熟悉組件化編程帶來(lái)的便利。

寫(xiě)在前面的話(huà)：

微信官網(wǎng)雖然提供了許多組件淫茵，但實(shí)際應(yīng)用時(shí)仍感覺(jué)稍顯疲軟爪瓜，如消息提示框只提供了成功與加載兩種狀態(tài)，那么如果失敗了如何提示匙瘪？還有模態(tài)框只有簡(jiǎn)單的 title 和 content 屬性铆铆，內(nèi)部并不支持自定義 wxml，等等辆苔，作者將工作中用到的微信組件文檔中沒(méi)有的 UI 自定義封裝了一些算灸，有需要的可以看下：wx-ui （持續(xù)補(bǔ)充中）

一、開(kāi)發(fā)前準(zhǔn)備

1. 目前自定義組件相關(guān)特性處于公測(cè)階段驻啤。如果需要使用相關(guān)特性，請(qǐng)確認(rèn)在項(xiàng)目選項(xiàng)中已勾選“預(yù)覽/上傳時(shí)使用新特性”荐吵；
2. 小程序基礎(chǔ)庫(kù)從 1.6.3才開(kāi)始支持組件化編程骑冗，在此之前先升級(jí)開(kāi)發(fā)工具，選擇高于1.6.3版本的基礎(chǔ)庫(kù)來(lái)體驗(yàn)組件化編程先煎。
3. 微信小程序官方組件文檔贼涩。 建議先看一遍，在跑一遍下方的示例代碼薯蝎。

image.png

二遥倦、概述

1. 目標(biāo)組件

常見(jiàn)的價(jià)格加減組件，當(dāng)設(shè)置值小于最小值時(shí)，減號(hào) - 不可點(diǎn)擊袒哥，當(dāng)設(shè)置值大于最大值時(shí)缩筛，加好不可點(diǎn)擊，效果如下：

price組件.gif

2. 組件化開(kāi)發(fā)需要注意兩點(diǎn)

• 頁(yè)面如何往組件傳值堡称？
• 組件如何將自身值反饋給頁(yè)面瞎抛？

tips: 第一遍看可能有點(diǎn)繞，建議將代碼 copy 到開(kāi)發(fā)工具跑一遍却紧，在對(duì)照著下方的解釋去理解會(huì)事半功倍桐臊。

三、價(jià)格組件實(shí)例

寫(xiě)一個(gè)組件晓殊，在頁(yè)面中使用它断凶。

1. 書(shū)寫(xiě)價(jià)格組件 price

• 組件不需要在 app.json 中的 pages 屬性中進(jìn)行配置，因?yàn)樗皇且粋€(gè)頁(yè)面巫俺；
• 組件和普通頁(yè)面一樣认烁，有 .wxml、.wxss识藤、*js 和 *.json 四個(gè)文件砚著；
• 組件必須要在 *.json 文件中進(jìn)行申明這是一個(gè)組件，具體代碼見(jiàn) price.json 文件痴昧；
• 組件的 *wxml 和 *.wxss 和頁(yè)面的書(shū)寫(xiě)沒(méi)有任何區(qū)別稽穆，這里不多說(shuō)；
• 組件的 *.js 文件使用了新的構(gòu)造函數(shù) Component 代替了頁(yè)面構(gòu)造函數(shù) Page赶撰，用來(lái)管理屬性和事件舌镶。官方文檔：Component 構(gòu)造器， *.js 文件是組件中最重要的文件豪娜，在頁(yè)面中使用組件時(shí)再介紹它餐胀。

1）組件頁(yè)面 price.wxml

price 組件的頁(yè)面顯示。

<view class="quantityViewStyle">
  <view class="minusStyle" bindtap="minus" style="color:{{num==min?'#DADADA':white}}">-</view>
  <view class="inputViewStyle">
    <input class="inputStyle" value="{{num}}" type="number" bindblur="onInputBlur"/>
  </view>
  <view class="plusStyle" bindtap="plus" style="color:{{num==max?'#DADADA':white}}">+</view>
</view>

2）組件樣式 price.wxss

price 組件的樣式文件瘤载。

.quantityViewStyle {
  display:flex;
  border:0rpx solid #DADADA;
  border-radius:6rpx;
  width: 220rpx;
}
.minusStyle {
  height:58rpx;
  width:60rpx;
  border-right:0rpx solid #DADADA;
  display:flex;
  justify-content:center;
  align-items:center;
}
.plusStyle {
  height:58rpx;
  width:60rpx;
  display:flex;
  justify-content:center;
  align-items:center;
}
.inputViewStyle {
  height:58rpx;
  width:100rpx;
  border-right:0rpx solid #DADADA;
}
.inputStyle {
  width:80rpx;
  height:54rpx;
  text-align:center;
  font-size:26rpx;
  background:white;
}

3）組件邏輯 price.js

• Component 是個(gè)新的構(gòu)造器否灾，主要關(guān)注其中 properties 和 methods 兩個(gè)屬性；
• 在 properties 中鸣奔，如設(shè)置 num 字段墨技，用 type 和 value 修飾，type 表示 num 是個(gè)數(shù)值挎狸，而 value 表示 num 的默認(rèn)值扣汪，如果頁(yè)面調(diào)用組件時(shí)沒(méi)有傳值，那么 num 就是 5锨匆；
• methods 屬性里寫(xiě)組件的相關(guān)方法崭别，主要注意 this.triggerEvent('custom', { value: num }) 這行代碼，這是子組件往頁(yè)面?zhèn)髦档奈ㄒ环绞健?
  • 組件往頁(yè)面?zhèn)髦担ǔ５膶?xiě)法是在頁(yè)面調(diào)用組件時(shí)添加一個(gè)事件監(jiān)聽(tīng)茅主，這樣只要組件中值改變時(shí)舞痰，通過(guò)這個(gè)事件就可以監(jiān)聽(tīng)到改變的值；
  • 第一個(gè)參數(shù)為頁(yè)面定義的監(jiān)聽(tīng)事件的事件類(lèi)型暗膜，名稱(chēng)自定義匀奏。
    • 事件類(lèi)型：在 index.wxml 中調(diào)用組件 price 時(shí)添加了事件監(jiān)聽(tīng)函數(shù)bindcustom="onPageInputChange"，其中 bind 是微信小程序綁定事件的一個(gè)前綴学搜，后面的 custom 才是具體的事件類(lèi)型娃善；
    • 要注意第一個(gè)參數(shù)的值要與事件監(jiān)聽(tīng)函數(shù)事件類(lèi)型相同；
  • 第二個(gè)參數(shù)是個(gè)對(duì)象瑞佩，表示往使用該組件的頁(yè)面中傳的值聚磺，在 index.js 中onPageInputChange: function (e) { // .... } 中的參數(shù) e 就是這地方傳遞過(guò)去的。

Component({
  properties: {
    // 這里定義了innerText屬性炬丸，屬性值可以在組件使用時(shí)指定
    num: {
      type: Number,
      value: 5,
    },
    min: {
      type: Number,
      value: 0,
    },
    max: {
      type: Number,
      value: 10
    }
  },
  methods: {
    // 加法
    plus: function () {
      // 加值小于最大值瘫寝，才允許加法運(yùn)算
      var num = this.data.num + 1;
      if (num <= this.data.max) {
        this.setData({
          num: num
        })
        this.triggerEvent('custom', { value: num })
      }
    },
    // 減法
    minus: function () {
      // 減值大于最小值，才允許減法運(yùn)算
      var num = this.data.num - 1;
      if (num >= this.data.min) {
        this.setData({
          num: num
        })
        this.triggerEvent('custom', { value: num })
      }
    },
    // 文本框失去焦點(diǎn)事件稠炬，判斷輸入值是否為數(shù)字
    onInputBlur: function (e) {
      var value = e.detail.value;
      if (isNaN(value)) {
        // 不是數(shù)字焕阿，直接置為最小值
        this.setData({num: this.data.min})
      } else {
        // 是數(shù)字，輸入值大于最大值首启，置為最大值暮屡，同理最小值
        if (value > this.data.max) {
          this.setData({ num: this.data.max })
        } else if (value < this.data.min) {
          this.setData({ num: this.data.min })
        }
      }
    }
  }
})

4）組件配置 price.json

聲明 price 是個(gè)組件。

{
  "component": true
}

2. 在頁(yè)面中使用組件

• 在頁(yè)面中使用組件毅桃，需要先在 *.json 文件中進(jìn)行配置褒纲，格式如下；
  • component-tag-name 為組件在頁(yè)面（*.wxml）中使用的名稱(chēng)钥飞，這里可以自定義莺掠，可以叫 price，也可以叫 my-price读宙，但不可有數(shù)字彻秆，否則會(huì)報(bào)錯(cuò)；
  • path/to/the/custom/component 為組件的路徑结闸，這里寫(xiě)相對(duì)路徑掖棉，也就是 ../ 開(kāi)頭的路徑，不要有后綴膀估，具體見(jiàn)下方 index.json 文件。

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

• 頁(yè)面需要在 app.json 中配置耻讽，別忘記了察纯。

1）頁(yè)面 index.wxml

<view style="display: flex;flex-direction: row;justify-content: space-between;padding: 0 20rpx;">
  <view>￥26.3</view>
  <!-- 以下是對(duì)一個(gè)自定義組件的引用 price -->
  <price  num="{{price}}" bindcustom="onPageInputChange"/> 
  <view>{{price}}</view>
</view>

• 這里調(diào)用組件的代碼為 <price num="{{price}}" bindcustom="onPageInputChange"/>；
• num 字段為設(shè)置價(jià)格組件的默認(rèn)值，在 price.js 中可以在 properties 屬性中找到它饼记；
• bindcustom="onPageInputChange" 為自定義事件監(jiān)聽(tīng)函數(shù)香伴，用法為監(jiān)聽(tīng)價(jià)格組件文本框中數(shù)值變化。在下方的 index.js 中可以看到事件處理函數(shù) onPageInputChange 有個(gè)參數(shù) e具则，這個(gè)參數(shù)需要在組件中進(jìn)行傳遞即纲。通過(guò) e.detail.value 可以獲取文本框中的值。

2）頁(yè)面邏輯 index.js

Page({
  data: {
    price: 5
  },
 
  onPageInputChange: function (e) {
    this.setData({ price: e.detail.value})
  }
})

3）配置文件 index.json

聲明使用組件 price博肋。

{
  "usingComponents": {
    "price": "../price/price"
  }
}

4）app.json

配置 index 頁(yè)面低斋。

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}