微信小程序:使用VantUI組件庫

微信小程序可以支持npm導入第三方庫了(https://developers.weixin.qq…);VantUI是一個不錯的移動UI組件庫,下面我們在微信小程序中引入
第一步:

在小程序工程的根目錄下執行:

npm init -y  //初始化
npm i vant-weapp -S --production 

第二步:
保證當前你的微信開發者工具是最新版本,然後點擊執行“構建npm“
在這裏插入圖片描述
構建成功後會提示:
在這裏插入圖片描述
同時項目根目錄中會多出一個目錄“miniprogram_npm”,這個就是小程序可以識別的npm第三方庫。
在這裏插入圖片描述
第三步:

這時候當我們需要在一個頁面中調用vant組件,那麼就要在對應的頁面json中添加類似如下配置:
在這裏插入圖片描述

{
"usingComponents":{
 
  "van-button":"/miniprogram_npm/vant-weapp/button/index"
 }
}

接着你就可以在wxml中直接調用這個ui組件了。
在這裏插入圖片描述

注意,對於vant庫來說其實你並不需要在頁面對應的js中import vant-weapp組件。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章