Mpvue中使用Vant Weapp組件庫(kù)的方法步驟
一、介紹
mpvue-vant記錄了我們團(tuán)隊(duì)開(kāi)發(fā)中在mpvue中使用Vant Weapp組件庫(kù)所踩下的坑,在這里分享給大家,讓mpvue開(kāi)發(fā)者可以使用vant組件庫(kù)進(jìn)行開(kāi)發(fā),避免踩不必要的坑。
此教程是在dov-yih一同協(xié)助下完成。經(jīng)過(guò)測(cè)試,Vant Weapp下所有組件都能夠在mpvue中使用
二、使用方法
目前vant已經(jīng)支持了npm的方式,但是由于node_modules目錄下的代碼是不會(huì)被編進(jìn)dist目錄下的,所以暫時(shí)只能用git方式使用。
克隆vant倉(cāng)庫(kù)
將dist目錄下的所有文件復(fù)制到你項(xiàng)目的/static/vant/目錄下。
git clone https://github.com/youzan/vant-weapp.git
// 當(dāng)然你也可以克隆本倉(cāng)庫(kù)代碼,本倉(cāng)庫(kù)會(huì)與`vant`倉(cāng)庫(kù)保持同步。直接將`vant`目錄復(fù)制到`/static`目錄下 git clone https://github.com/Rychou/mpvue-vant.git
引入
在需要引入的頁(yè)面目錄下的main.json文件中
{ "usingComponents": { "van-button": "/static/vant/button/index", } }
使用
<van-button>測(cè)試</van-button>
三、注意事項(xiàng)
具體組件 api 文檔參考Vant Weapp
1. 使用方式
mpvue 和原生小程序的方式有所不同。可以參考mpvue文檔
1.1 數(shù)據(jù)綁定
原生小程序使用方式為
value="{{value}}"
mpvue 使用方式
v-bind:value="value" //或者 :value="value"
1.2 事件監(jiān)聽(tīng)
原生小程序使用方式
bind:click="onClick"
mpvue 使用方式
@click="onClick"
1.3 vue 中組件引入
vant中像notify這種操作反饋類(lèi)的組件都有兩個(gè)引入,一是組件的引入,這個(gè)在main.json中引入;另一個(gè)是方法的引入,需要在vue文件中import引入,值得注意的是,這里的引入不能使用絕對(duì)路徑,可以用類(lèi)似于這樣的相對(duì)路徑。
import Notify from '@/../static/notify/notify' //@是mpvue的一個(gè)別名,指向src目錄
1.4 獲取 event
值得注意的是,mpvue中獲取event值與原生小程序有所不同。舉例:
onChange(event){ // 獲取表單組件filed的值 console.log(event.mp.detail) // 注意加入mp }
2. BUG 及報(bào)錯(cuò)處理方法
2.1 監(jiān)聽(tīng)名
mpvue 里面無(wú)法使用@click-icon這樣的監(jiān)聽(tīng)名,因此如果 API 文檔里面有出現(xiàn)這樣的監(jiān)聽(tīng)名,那么需要手動(dòng)修改源代碼。
可以改成駝峰式的監(jiān)聽(tīng)名。
eg: 我在field組件中就遇到這個(gè)問(wèn)題,我的做法是:
// static/vant/field/index.js this.$emit('click-icon'); // 修改為: this.$emit('clickIcon');
2.2 報(bào)錯(cuò)
一般的報(bào)錯(cuò)報(bào)錯(cuò)都可以通過(guò)一下流程處理。
- 是否打開(kāi)了微信開(kāi)發(fā)者工具中的ES6轉(zhuǎn)ES5功能。
- 仔細(xì)檢查代碼和比對(duì)文檔,看看是否有使用不當(dāng)?shù)牡胤健?/li>
- 重新編譯npm run dev或刪掉dist目錄重新npm run dev
- 重啟或更新微信開(kāi)發(fā)者工具。
若以上流程都走完了,還是無(wú)法解決報(bào)錯(cuò),可以通過(guò)提交issues的方式,我來(lái)幫你解決。
2.2.1 引入組件報(bào)錯(cuò)
VM54:1 thirdScriptError sdk uncaught third Error module "static/vant/notify/index.js" is not defined
解決辦法是:打開(kāi)小程序開(kāi)發(fā)者工具中的ES6 轉(zhuǎn) ES5功能. issues/#5
3. 其他組件庫(kù)
目前比較好的組件庫(kù)有三個(gè),Wux Weapp,iview weapp,Vant Weapp。
這三者都是用原生小程序?qū)懙慕M件庫(kù),因此理論上來(lái)說(shuō),在 mpvue 中都是可以無(wú)縫使用的。不同組件庫(kù)的組件都不一樣,有的更豐富,有的邏輯更完善,有的文檔更清晰。因此用什么組件,還需要自己取舍。
比如:三者中,唯有Wux Weapp有日歷組件,而且它里面還有一些更高級(jí)的組件可以使用。
使用方法上,幾乎沒(méi)有差異。值得注意的是,大家復(fù)制源代碼到自己項(xiàng)目上時(shí),應(yīng)該復(fù)制/dist/目錄下的文件。因?yàn)檫@里是經(jīng)過(guò)編譯后的。
如果大家使用過(guò)程中遇到什么 BUG,可以通過(guò)提issues的方式讓我知道,大家一起踩坑吧!
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vuejs手把手教你寫(xiě)一個(gè)完整的購(gòu)物車(chē)實(shí)例代碼
這篇文章主要介紹了vuejs-手把手教你寫(xiě)一個(gè)完整的購(gòu)物車(chē)實(shí)例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07vue 通過(guò)綁定事件獲取當(dāng)前行的id操作
這篇文章主要介紹了vue 通過(guò)綁定事件獲取當(dāng)前行的id操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07vue實(shí)現(xiàn)微信瀏覽器左上角返回按鈕攔截功能
這篇文章主要介紹了vue實(shí)現(xiàn)微信瀏覽器左上角返回按鈕攔截功能,本文通過(guò)實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01