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

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

一、首先，咱們須要有個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

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

三、接下來,咱們須要用到vant-weapp開源項目中vant UI組件，因此要將vant-weapp下載下來,下來後將其項目下的dist文件所有都copy到咱們須要用到原項目中（就是咱們開始初始化的項目），爲了方便管理，能夠在根目錄下的static下新建一個vant用於存放UI組件文件；

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

 

粘貼位置如圖所示

四、接下來就比較簡單了，組件的具體用法可在官方文檔中查看，咱們只須要在咱們須要使用組件的頁面的配置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'
    }
  }

 

四、將UI組件導入後可在項目冊測試，在此以前爲了讓UI組件生效，咱們須要將項目打包一下，即爲咱們須要打開終端，在項目的根目錄下執行一遍（npm run build）,這樣vant的UI組件就會在頁面中正常發揮做用了

注意事項

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

一、數據的綁定方式

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

value="{{value}}"

因爲咱們使用的事mpvue，因此咱們須要改爲

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

二、事件的綁定方式

原生小程序使用方式

bind:click="onClick"

mpvue 使用方式

@click="onClick"

三、交互組件的引用

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

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

四、獲取 event 事件對象中值

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

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

五、監聽方式的變動
mpvue 裏面沒法使用@click-icon這樣的監聽名,所以若是 API 文檔裏面有出現這樣的監聽名，那麼須要手動修改源代碼。

能夠改爲駝峯式的監聽名。

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

// static/vant/field/index.js

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

// 修改成:

this.$emit('clickIcon');

報錯的處理方式

通常的報錯報錯均可以經過一下流程處理。

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

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

一、新建的頁面，沒有從新打包
二、添加的組件路徑有問題，路徑錯誤或者是重複添加

分享到此結束，以後若是我還遇到了什麼坑會繼續分享的！