欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Mpvue中使用Vant Weapp組件庫的方法步驟

 更新時間:2019年05月16日 10:28:03   作者:xxxsimons  
這篇文章主要介紹了Mpvue中使用Vant Weapp組件庫的方法步驟,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

一、介紹

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

此教程是在dov-yih一同協(xié)助下完成。經(jīng)過測試,Vant Weapp下所有組件都能夠在mpvue中使用

mpvue-vant Github地址

二、使用方法

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

克隆vant倉庫

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

git clone https://github.com/youzan/vant-weapp.git
// 當(dāng)然你也可以克隆本倉庫代碼,本倉庫會與`vant`倉庫保持同步。直接將`vant`目錄復(fù)制到`/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 和原生小程序的方式有所不同??梢詤⒖糾pvue文檔

1.1 數(shù)據(jù)綁定

原生小程序使用方式為

value="{{value}}"

mpvue 使用方式

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

1.2 事件監(jiān)聽

原生小程序使用方式

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 監(jiān)聽名

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

可以改成駝峰式的監(jiān)聽名。

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

// static/vant/field/index.js

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

// 修改為:

this.$emit('clickIcon');

2.2 報錯

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

  • 是否打開了微信開發(fā)者工具中的ES6轉(zhuǎn)ES5功能。
  • 仔細(xì)檢查代碼和比對文檔,看看是否有使用不當(dāng)?shù)牡胤健?/li>
  • 重新編譯npm run dev或刪掉dist目錄重新npm run dev
  • 重啟或更新微信開發(fā)者工具。

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

2.2.1 引入組件報錯

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

解決辦法是:打開小程序開發(fā)者工具中的ES6 轉(zhuǎn) ES5功能. issues/#5

3. 其他組件庫

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

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

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

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

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

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue中rules的寫法使用小結(jié)

    Vue中rules的寫法使用小結(jié)

    這篇文章主要介紹了Vue中rules的寫法使用小結(jié),本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2024-01-01
  • vue代理和跨域問題的解決

    vue代理和跨域問題的解決

    這篇文章主要介紹了vue代理和跨域問題的解決,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-07
  • vuejs手把手教你寫一個完整的購物車實例代碼

    vuejs手把手教你寫一個完整的購物車實例代碼

    這篇文章主要介紹了vuejs-手把手教你寫一個完整的購物車實例代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-07-07
  • Vue3 Pinia如何修改全局狀態(tài)變量值

    Vue3 Pinia如何修改全局狀態(tài)變量值

    這篇文章主要介紹了Vue3 Pinia如何修改全局狀態(tài)變量值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-05-05
  • vue項目雙滑塊組件使用

    vue項目雙滑塊組件使用

    這篇文章主要介紹了vue項目雙滑塊組件使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-07-07
  • vue?父子組件共用mixins的注意點

    vue?父子組件共用mixins的注意點

    這篇文章主要介紹了vue?父子組件共用mixins的注意點,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue 通過綁定事件獲取當(dāng)前行的id操作

    vue 通過綁定事件獲取當(dāng)前行的id操作

    這篇文章主要介紹了vue 通過綁定事件獲取當(dāng)前行的id操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • vue實現(xiàn)微信瀏覽器左上角返回按鈕攔截功能

    vue實現(xiàn)微信瀏覽器左上角返回按鈕攔截功能

    這篇文章主要介紹了vue實現(xiàn)微信瀏覽器左上角返回按鈕攔截功能,本文通過實例代碼相結(jié)合的形式給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-01-01
  • Vue中的變量賦值問題

    Vue中的變量賦值問題

    這篇文章主要介紹了Vue中的變量賦值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue3下watch的使用方法示例

    vue3下watch的使用方法示例

    vue3中的watch是一個組合式的API使用時需要引入,下面這篇文章主要給大家介紹了關(guān)于vue3下watch使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-03-03

最新評論