mpvue-Vant Weapp踩坑記

微信開發者工具:開發、調試和模擬運行微信小程序的最核心的工具了，因此必須安裝

# 全局安裝 vue-cli $ npm install --global vue-cli # 建立一個基於 mpvue-quickstart 模板的新項目 $ vue init mpvue/mpvue-quickstart my-project
 # 安裝依賴 $ cd my-project $ npm install # 啓動構建 $ npm run dev

須要被轉換成小程序的代碼才能夠在小程序環境運行，因此這裏的自動編譯的目的就是要把Web代碼編譯成小程序代碼。編譯後的代碼會在dist目錄下

打開微信開發者工具 => 選擇新增項目 => 項目目錄：dist下的wx目錄


參考連接：https://www.jianshu.com/p/6f8d74be3ff8
dist

 

引入第三方ui庫——vant-weapp // 將vant-weapp下載下來
git clone https://github.com/youzan/vant-weapp.git

下載後將其項目下的dist文件所有都copy到咱們須要用到項目中, 爲了方便管理，能夠在根目錄下的static下新建一個vant用於存放UI組件文件；目錄結構即：/static/vant
最後只須要在咱們須要使用組件的頁面的配置json文件中引入咱們須要的組件

{ 
    // 頁面配置，即 page.json 的內容
    navigationBarTitleText: '首頁',
    'usingComponents': {'van-icon': '/static/vant/icon/index','van-dialog': '/static/vant/dialog/index'
    }
  }

 

在vant-weapp的官方文檔中的具體用法是使用wxml的語法，因此咱們不能直接照搬使用, 須要稍作修改：

// 數據的綁定方式 value="{{value}}" 改爲
v-bind:value="value"
//或者
:value="value"

// 事件的綁定方式 bind:click="onClick" 改爲
@click="onClick"

// 獲取 event 事件對象中值, mpvue中獲取event值與原生小程序有所不一樣
onChange(event){ // 獲取表單組件filed的值
  console.log(event.mp.detail) // 注意加入mp
}

// vant中像notify這種操做反饋類的組件都有兩個引入，一是組件的引入，這個在main.json中引入；二是在vue文件中import引入，這裏的引入不能使用絕對路徑，使用相對路徑。
import Notify from '@/../static/vant/notify/notify' //@是mpvue的一個別名，指向src目錄