在微信小程序中使用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)的變量!!!
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js本地圖片預(yù)覽實(shí)現(xiàn)代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了微信小程序模板和模塊化用法,結(jié)合實(shí)例形式分析了微信小程序中的模板與模塊化概念與簡單使用技巧,需要的朋友可以參考下2017-11-11
JavaScript實(shí)現(xiàn)select添加option
這篇文章主要介紹了JavaScript為select添加option的方法和示例，十分的簡單實(shí)用，有需要的小伙伴可以參考下。2015-07-07
這篇文章主要為大家介紹了uniapp界面新增水印實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
JavaScript中Array的filter函數(shù)詳解
這篇文章主要介紹了JavaScript中Array的filter函數(shù)詳解,filter?為數(shù)組中的每個(gè)元素調(diào)用一次callback函數(shù),W更多具體內(nèi)容，需要的朋友可以參考一下2022-07-07
JS+CSS實(shí)現(xiàn)一個(gè)氣泡提示框
氣泡提示框牽扯到的技術(shù)有：JS響應(yīng)鼠標(biāo)的事件、純CSS制作三角形，附截圖及示例代碼，感興趣的朋友可以參考下2013-08-08
本文將詳細(xì)介紹js移除事件 js綁定事件的實(shí)現(xiàn)過程，需要了解的朋友可以參考下2012-11-11
第一次接觸神奇的Bootstrap基礎(chǔ)排版，Bootstrap讓W(xué)eb開發(fā)更迅速、更簡單，感興趣的小伙伴們可以參考一下2016-07-07
echarts設(shè)置圖例顏色和地圖底色的方法實(shí)例
最近項(xiàng)目要使用echarts進(jìn)行數(shù)據(jù)可視化，所以下面這篇文章主要給大家介紹了關(guān)于echarts設(shè)置圖例顏色和地圖底色的相關(guān)資料，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08
