有美團開源出的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、添加的組件路徑有問題,路徑錯誤或者是重復添加
分享到此結束,之后如果我還遇到了什么坑會繼續分享的!