Mpvue中使用Vant Weapp組件庫

1、介紹

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

此教程是在dov-yih一同協助下完成。通過測試，Vant Weapp下全部組件都可以在mpvue中使用

• mpvue-vant Github地址
• demo 地址
• 更新日誌

2、使用方法

目前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>

3、注意事項

具體組件 api 文檔參考Vant Weapp

1. 使用方式

mpvue 和原生小程序的方式有所不一樣。能夠參考mpvue文檔

1.1 數據綁定

原生小程序使用方式爲

value="{{value}}"

mpvue 使用方式

v-bind:value="value"
//或者
: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.js

this.$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的方式讓我知道，你們一塊兒踩坑吧！

分享兩個小程序

1、貓叫助手

基於 vant 和 wux 組件庫,以及小程序雲開發開發的一個小程序。以及總結了mpvue中使用雲開發的注意事項，mpvue-cloud

收錄各類貓叫聲，幫助與貓咪交流，分享一些養貓的小知識等。

2、在書雲

這是我近期使用Taro開發框架開發的一款小程序，主要功能是提供可靠的書架管理功能，只須要掃一掃書籍背後的條形碼便可添加書籍入庫，你能夠方便的在線上管理你的書架，查看書籍的基本信息，亦能夠添加書評。

該項目得到了微信小程序 U 計劃的資助。目前項目正在開發中，歡迎你們體驗反饋。