在微信小程序開發中引入第三方ui組件


微信小程序終於可以支持npm導入第三方庫了(https://developers.weixin.qq....),但是這種導入模式和使用模式有別於我們使用的npm調用。今天我按照有贊新出的vant小程序ui庫來講解如何導入npm資源。

第一步:

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

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中require vant-weapp組件。


免責聲明!

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



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