小程序使用mpvue框架無縫接入Vant Weapp組件庫


有美團開源出的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、添加的組件路徑有問題,路徑錯誤或者是重復添加

分享到此結束,之后如果我還遇到了什么坑會繼續分享的!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM