一、介紹

mpvue-vant記錄了我們團隊開發中在mpvue中使用Vant Weapp組件庫所踩下的坑，在這里分享給大家，讓mpvue開發者可以使用vant組件庫進行開發，避免踩不必要的坑。

此教程是在dov-yih一同協助下完成。經過測試，Vant Weapp下所有組件都能夠在mpvue中使用

mpvue-vant Github地址

二、使用方法

目前vant已經支持了npm的方式，但是由于node_modules目錄下的代碼是不會被編進dist目錄下的，所以暫時只能用git方式使用。

克隆vant倉庫

將dist目錄下的所有文件復制到你項目的/static/vant/目錄下。

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

// 當然你也可以克隆本倉庫代碼，本倉庫會與`vant`倉庫保持同步。直接將`vant`目錄復制到`/static`目錄下git clone https://github.com/Rychou/mpvue-vant.git

引入

在需要引入的頁面目錄下的main.json文件中

{ "usingComponents": {  "van-button": "/static/vant/button/index", }}

使用

<van-button>測試</van-button>

三、注意事項

具體組件 api 文檔參考Vant Weapp

1. 使用方式

mpvue 和原生小程序的方式有所不同。可以參考mpvue文檔

1.1 數據綁定

原生小程序使用方式為

value="{{value}}"

mpvue 使用方式

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

1.2 事件監聽

原生小程序使用方式

bind:click="onClick"

mpvue 使用方式

@click="onClick"

1.3 vue 中組件引入

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

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

1.4 獲取 event

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

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

2. BUG 及報錯處理方法

2.1 監聽名

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

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

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

// static/vant/field/index.jsthis.$emit('click-icon');// 修改為:this.$emit('clickIcon');

2.2 報錯

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

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

若以上流程都走完了，還是無法解決報錯，可以通過提交issues的方式，我來幫你解決。

2.2.1 引入組件報錯

VM54:1 thirdScriptError sdk uncaught third Error module "static/vant/notify/index.js" is not defined

解決辦法是：打開小程序開發者工具中的ES6 轉 ES5功能. issues/#5

3. 其他組件庫

目前比較好的組件庫有三個，Wux Weapp,iview weapp,Vant Weapp。

這三者都是用原生小程序寫的組件庫，因此理論上來說，在 mpvue 中都是可以無縫使用的。不同組件庫的組件都不一樣，有的更豐富，有的邏輯更完善，有的文檔更清晰。因此用什么組件，還需要自己取舍。

比如：三者中，唯有Wux Weapp有日歷組件，而且它里面還有一些更高級的組件可以使用。

使用方法上，幾乎沒有差異。值得注意的是，大家復制源代碼到自己項目上時，應該復制/dist/目錄下的文件。因為這里是經過編譯后的。

如果大家使用過程中遇到什么 BUG，可以通過提issues的方式讓我知道，大家一起踩坑吧！

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。