小程序使用mpvue框架無縫接入Vant Weapp組件庫

有美團開源出的mpvue以其vue的語法和良好的開發效率再搭配上用戶體驗良好的UI組件無疑是定制化微信小程序的開發方式，然而由於mpvue是對微信原生開發的再次封裝，這也為我們引入UI組件添加了不少麻煩，話不多說，接下來為大家展示引入vant-weapp的方法。

1、首先，我們需要有個mpvue的基礎的項目文件骨架，即用mpvue初始化一個項目

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

# 創建一個基於 mpvue-quickstart 模板的新項目
$ vue init mpvue/mpvue-quickstart my-project

# 安裝依賴
$ cd my-project
$ npm install
# 啟動構建
$ npm run dev

2、其次,在微信開發者工具中新建項目,填入注冊的appid和文件目錄（敲黑板了這里要注意一點，文件目錄是mpvue項目中下的dist目錄），根目錄中的dist目錄實際上就是mpvue每次打包完成后（npm run build）的目錄，所以里面的MINA文件結構就是微信小城小程序原生開發的文件結構；

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

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

 

粘貼位置如圖所示

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

以下是我的首頁json配置

{ 
    // 頁面配置，即 page.json 的內容
    navigationBarTitleText: '首頁',
    '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組件導入后可在項目冊測試，在此之前為了讓UI組件生效，我們需要將項目打包一下，即為我們需要打開終端，在項目的根目錄下執行一遍（npm run build）,這樣vant的UI組件就會在頁面中正常發揮作用了

注意事項

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

1、數據的綁定方式

原生小程序，在標簽內綁定數據的方式

value="{{value}}"

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

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

2、事件的綁定方式

原生小程序使用方式

bind:click="onClick"

mpvue 使用方式

@click="onClick"

3、交互組件的引用

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

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

4、獲取 event 事件對象中值

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

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

5、監聽方式的變更
mpvue 里面無法使用@click-icon這樣的監聽名,因此如果 API 文檔里面有出現這樣的監聽名，那么需要手動修改源代碼。

可以改成駝峰式的監聽名。

eg: 我在field組件中就遇到這個問題，我的做法是：

// static/vant/field/index.js

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

// 修改為:

this.$emit('clickIcon');

報錯的處理方式

一般的報錯報錯都可以通過一下流程處理。

1、是否打開了微信開發者工具中的ES6轉ES5功能。
2、仔細檢查代碼和比對文檔，看看是否有使用不當的地方。
3、重新編譯npm run dev或刪掉dist目錄重新npm run dev
4、重啟或更新微信開發者工具。

在添加UI組件后,報頁面丟失，TypeError: Cannot read property 'index' of undefined

1、新建的頁面，沒有重新打包
2、添加的組件路徑有問題，路徑錯誤或者是重復添加

分享到此結束，之后如果我還遇到了什么坑會繼續分享的！