詳解如何在微信小程序開發(fā)中正確的使用vant ui組件
更新時間：2018年09月13日 09:33:50 作者：leeon
這篇文章主要介紹了詳解如何在微信小程序開發(fā)中正確的使用vant ui組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
微信小程序終于可以支持npm導入第三方庫了（https://developers.weixin.qq....），但是這種導入模式和使用模式有別于我們使用的npm調用。今天我按照有贊新出的vant小程序ui庫來講解如何導入npm資源。
第一步：
在小程序工程的根目錄下執(zhí)行：
npm i vant-weapp -S --production
第二步：
保證當前你的微信開發(fā)者工具是最新版本，然后點擊執(zhí)行“構建npm“
構建成功后會提示：
同時項目根目錄中會多出一個目錄“miniprogram_npm”，這個就是小程序可以識別的npm第三方庫。
第三步：
這時候當我們需要在一個頁面中調用vant組件，那么就要在對應的頁面json中添加類似如下配置：
{
"usingComponents":{
"van-button":"/miniprogram_npm/vant-weapp/button/index"
}
}
接著你就可以在wxml中直接調用這個ui組件了。
注意，對于vant庫來說其實你并不需要在頁面對應的js中require vant-weapp組件。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
使用腳本控制網(wǎng)頁Table的顯示隱藏(全代碼)_AX
使用腳本控制網(wǎng)頁Table的顯示隱藏(全代碼)_AX...2006-12-12
JavaScript實現(xiàn)字符串與HTML格式相互轉換
這篇文章主要介紹了JavaScript實現(xiàn)字符串與HTML格式相互轉換,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-03-03
這篇文章主要為大家詳細介紹了js實現(xiàn)人民幣大寫金額形式轉換的相關資料,需要的朋友可以參考下2016-04-04
javascript中關于break,continue的特殊用法與介紹
javascript大家所熟知中的for是一個循環(huán)體，循環(huán)體其中的break和continue也是大家都比較熟悉的功能，相信大家對它們的用法不會陌生，本文不是介紹其功能，本文假設你已經(jīng)熟悉break和continue的語意和用法2012-05-05
這篇文章主要給大家介紹了關于three.js利用卷積法如何實現(xiàn)物體描邊效果的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用three.js具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-11-11
這篇文章主要介紹了js計算斐波拉切,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
ElementUI table無縫循環(huán)滾動的示例代碼
這篇文章主要介紹了ElementUI table無縫循環(huán)滾動的示例代碼,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
JavaScript中存在幾種對URL字符串進行編碼的方法：escape()，encodeURI()，以及encodeURIComponent()。這幾種編碼所起的作用各不相同。2011-01-01
基于 webpack2 實現(xiàn)的多入口項目腳手架詳解
這篇文章主要給大家介紹了基于 webpack2 實現(xiàn)的多入口項目腳手架的相關資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-06-06
這篇文章主要為大家詳細介紹了javascript中的call、apply、bind方法，感興趣的朋友可以參考一下2016-03-03