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

 

引入第三方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目錄