在微信小程序中使用vant的方法
在微信小程序中如何使用vant UI ,最近在開發(fā)小程序項(xiàng)目的時(shí)候遇到了這個(gè)問題, 去網(wǎng)上百度發(fā)現(xiàn)大家給的步驟普遍都是直接npm i vant-weapp -S --production,接著構(gòu)建npm, 然而,我在嘗試的時(shí)候發(fā)現(xiàn),構(gòu)建npm的時(shí)候一直失敗,告訴我找不到node_moudules ????
你們是不是也遇到了這種問題呢? 好的,接下來就讓我來告訴大家真正的解決方案吧!
首先, 你需要在小程序根目錄下打開命令窗口,依次輸入以下命令
npm init 初始化 npm install --production npm i vant-weapp -S --production
第二步之前,你需要保證你的微信開發(fā)者工具版本比較新,否則沒有是構(gòu)建npm工具的
第二步就是,打開微信開發(fā)者工具,電擊左上方 工具,找到 構(gòu)建npm
構(gòu)建完成,會(huì)生成miniprogram_npm 文件夾
最后, 就是需要在頁面中使用 vant 組件了,打開剛剛生成的miniprogram_npm 文件夾 下面的 vant-weapp ,里面的就是vant 的所有組件配置文件,例如,button,
當(dāng)在一個(gè)頁面中調(diào)用vant的組件時(shí)，需要在對(duì)應(yīng)的頁面json中添加如下配置：
代碼為:
"usingComponents": {
"van-button": "/miniprogram_npm/vant-weapp/button/index", //引入button組件
"van-rate":"/miniprogram_npm/vant-weapp/rate/index" //引入rate組件
}
在對(duì)應(yīng)的wxml中加入組件標(biāo)簽就可以了
<van-button type="default">默認(rèn)按鈕</van-button> <van-rate v-model="value" />
千萬不要忘記在JS中聲明對(duì)應(yīng)的變量!!!
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)波浪導(dǎo)航效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
本文主要介紹了創(chuàng)建一般js對(duì)象的幾種方式。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
uniapp自定義應(yīng)用退出執(zhí)行內(nèi)容實(shí)例代碼
近幾日使用uni-app開發(fā)移動(dòng)應(yīng)用APP遇到了個(gè)不常見的需求,下面這篇文章主要給大家介紹了關(guān)于uniapp自定義應(yīng)用退出執(zhí)行內(nèi)容的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
用js的document.write輸出的廣告無阻塞加載的方法
這篇文章主要介紹了用js的document.write輸出的廣告無阻塞加載的方法,需要的朋友可以參考下2014-06-06
JavaScript實(shí)現(xiàn)維吉尼亞(Vigenere)密碼算法實(shí)例
Vigenere密碼就是一種傳統(tǒng)加密技術(shù)，它是多表代換密碼，能夠有效改進(jìn)單表代換密碼的詞頻分布特征問題,本文用JavaScript實(shí)現(xiàn)維吉尼亞(Vigenere)密碼算法2013-11-11
這篇文章主要介紹了JavaScript中的函數(shù)式編程詳解,需要的朋友可以參考下2020-08-08
這篇文章主要介紹了JS閉包原理及其使用場(chǎng)景解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-12-12
JavaScript使用Blob文件流下載txt、pdf、圖片等文件，自定義下載文件名
JavaScript使用Blob文件流下載txt、pdf、圖片等格式文件,同時(shí)自定義下載文件名,2023-08-08
JavaScript中手動(dòng)實(shí)現(xiàn)Array.prototype.map方法
在前端開發(fā)中,我們經(jīng)常需要對(duì)數(shù)組進(jìn)行操作和處理,本文主要介紹了JavaScript中手動(dòng)實(shí)現(xiàn)Array.prototype.map方法,具有一定的參考價(jià)值,感興趣的可以了解一下2024-02-02
使用JS實(shí)現(xiàn)圖片輪播的實(shí)例(前后首尾相接)
下面小編就為大家?guī)硪黄褂肑S實(shí)現(xiàn)圖片輪播的實(shí)例(前后首尾相接)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09