有美團(tuán)開源出的mpvue以其vue的語(yǔ)法和良好的開發(fā)效率再搭配上用戶體驗(yàn)良好的UI組件無(wú)疑是定制化微信小程序的開發(fā)方式，然而由于mpvue是對(duì)微信原生開發(fā)的再次封裝，這也為我們引入U(xiǎn)I組件添加了不少麻煩，話不多說(shuō)，接下來(lái)為大家展示引入vant-weapp的方法。

1、首先，我們需要有個(gè)mpvue的基礎(chǔ)的項(xiàng)目文件骨架，即用mpvue初始化一個(gè)項(xiàng)目

# 全局安裝 vue-cli
$ npm install --global vue-cli

# 創(chuàng)建一個(gè)基于 mpvue-quickstart 模板的新項(xiàng)目
$ vue init mpvue/mpvue-quickstart my-project

# 安裝依賴
$ cd my-project
$ npm install
# 啟動(dòng)構(gòu)建
$ npm run dev

2、其次,在微信開發(fā)者工具中新建項(xiàng)目,填入注冊(cè)的appid和文件目錄（敲黑板了這里要注意一點(diǎn)，文件目錄是mpvue項(xiàng)目中下的dist目錄），根目錄中的dist目錄實(shí)際上就是mpvue每次打包完成后（npm run build）的目錄，所以里面的MINA文件結(jié)構(gòu)就是微信小城小程序原生開發(fā)的文件結(jié)構(gòu)；

3、接下來(lái),我們需要用到vant-weapp開源項(xiàng)目中vant UI組件，所以要將vant-weapp下載下來(lái),下來(lái)后將其項(xiàng)目下的dist文件全部都copy到我們需要用到原項(xiàng)目中（就是我們開始初始化的項(xiàng)目），為了方便管理，可以在根目錄下的static下新建一個(gè)vant用于存放UI組件文件；

git clone https://github.com/youzan/vant-weapp.git

粘貼位置如圖所示

4、接下來(lái)就比較簡(jiǎn)單了，組件的具體用法可在官方文檔中查看，我們只需要在我們需要使用組件的頁(yè)面的配置json文件中引入我們需要的組件

以下是我的首頁(yè)json配置

{ 
    // 頁(yè)面配置，即 page.json 的內(nèi)容
    navigationBarTitleText: '首頁(yè)',
    'usingComponents': {
      'van-search': '/static/vant/search/index',
      'van-row': '/static/vant/row/index',
      'van-col': '/static/vant/col/index',
      'van-tab': '/static/vant/tab/index',
      'van-tabs': '/static/vant/tabs/index',
      'van-cell': '/static/vant/cell/index',
      'van-cell-group': '/static/vant/cell-group/index',
      'van-radio': '/static/vant/radio/index',
      'van-radio-group': '/static/vant/radio-group/index',
      'van-field': '/static/vant/field/index',
      'van-button': '/static/vant/button/index',
      'van-card': '/static/vant/card/index',
      'van-popup': '/static/vant/popup/index',
      'van-icon': '/static/vant/icon/index',
      'van-panel': '/static/vant/panel/index',
      'van-action-sheet': '/static/vant/cell-group/index',
      'van-switch-cell': '/static/vant/switch-cell/index',
      'van-area': '/static/vant/area/index',
      'van-dialog': '/static/vant/dialog/index'
    }
  }

4、將UI組件導(dǎo)入后可在項(xiàng)目?jī)?cè)測(cè)試，在此之前為了讓UI組件生效，我們需要將項(xiàng)目打包一下，即為我們需要打開終端，在項(xiàng)目的根目錄下執(zhí)行一遍（npm run build）,這樣vant的UI組件就會(huì)在頁(yè)面中正常發(fā)揮作用了

5、最后一定記得打開微信小程序開發(fā)工具中的es6轉(zhuǎn)es5(不然會(huì)報(bào)錯(cuò)的)

注意事項(xiàng)

在vant-weapp的官方文檔中的具體用法是使用wxml的語(yǔ)法，所以我們不能直接照搬使用

1、數(shù)據(jù)的綁定方式

原生小程序，在標(biāo)簽內(nèi)綁定數(shù)據(jù)的方式

value="{{value}}"

由于我們使用的事mpvue，所以我們需要改成

v-bind:value="value"
//或者
:value="value"

2、事件的綁定方式

原生小程序使用方式

bind:click="onClick"

mpvue 使用方式

@click="onClick"

3、交互組件的引用

vant中像notify這種操作反饋類的組件都有兩個(gè)引入，一是組件的引入，這個(gè)在main.json中引入；另一個(gè)是方法的引入，需要在vue文件中import引入，值得注意的是，這里的引入不能使用絕對(duì)路徑，可以用類似于這樣的相對(duì)路徑。

import Notify from '@/../static/vant/notify/notify' //@是mpvue的一個(gè)別名，指向src目錄

4、獲取 event 事件對(duì)象中值

值得注意的是，mpvue中獲取event值與原生小程序有所不同。舉例：

onChange(event){ // 獲取表單組件filed的值
  console.log(event.mp.detail) // 注意加入mp
}

5、監(jiān)聽方式的變更
mpvue 里面無(wú)法使用@click-icon這樣的監(jiān)聽名,因此如果 API 文檔里面有出現(xiàn)這樣的監(jiān)聽名，那么需要手動(dòng)修改源代碼。

可以改成駝峰式的監(jiān)聽名。

eg: 我在field組件中就遇到這個(gè)問(wèn)題，我的做法是：

// static/vant/field/index.js

this.$emit('click-icon');

// 修改為:

this.$emit('clickIcon');

報(bào)錯(cuò)的處理方式

一般的報(bào)錯(cuò)報(bào)錯(cuò)都可以通過(guò)一下流程處理。

1、是否打開了微信開發(fā)者工具中的ES6轉(zhuǎn)ES5功能。
2、仔細(xì)檢查代碼和比對(duì)文檔，看看是否有使用不當(dāng)?shù)牡胤健?br> 3、重新編譯npm run dev或刪掉dist目錄重新npm run dev
4、重啟或更新微信開發(fā)者工具。

在添加UI組件后,報(bào)頁(yè)面丟失，TypeError: Cannot read property 'index' of undefined

1、新建的頁(yè)面，沒(méi)有重新打包
2、添加的組件路徑有問(wèn)題，路徑錯(cuò)誤或者是重復(fù)添加

分享到此結(jié)束，之后如果我還遇到了什么坑會(huì)繼續(xù)分享的！