微信小程序使用npm包的方法步驟
一:npm初始化
如果你的小程序項(xiàng)目沒有安裝過npm包的話,你需要先初始化npm
npm init
二:安裝npm包
這里以vant-weapp(小程序UI組件庫)為例:
npm i vant-weapp -S --production
三:npm包構(gòu)建
1:點(diǎn)擊微信開發(fā)者工具右上角詳情——>本地設(shè)置,選中使用npm模塊
2:點(diǎn)擊微信開發(fā)者工具菜單欄的工具,選擇構(gòu)建npm
當(dāng)顯示如下表示npm構(gòu)建成功,構(gòu)建完成就可以使用npm包了
npm包構(gòu)建完成之后項(xiàng)目的結(jié)構(gòu)如下:
四:使用npm
1:js中引入npm包
const myPackage = require('packageName') const packageOther = require('packageName/other')
2:使用 npm 包中的自定義組件
在json文件的usingComponents參數(shù)加上:
{ "usingComponents": { "myPackage": "packageName", "package-other": "packageName/other" } }
使用npm實(shí)例:
1:js中引入npm包:
此例使用js-base64包實(shí)現(xiàn),在你需要使用此包的js文件中引入npm包
const jsBase64 = require('js-base64');
使用:
console.log(jsBase64.Base64.encode("haha"));//編碼 console.log(jsBase64.Base64.decode("aGFoYQ=="));//解碼
2:使用 npm 包中的自定義組件
此例使用vant-weapp包實(shí)現(xiàn),在app.json文件或者在指定頁面的json文件中:
"usingComponents": { "van-button": "vant-weapp/button/index" }
在wxml文件中使用:
<van-button type="primary">按鈕</van-button>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
基于JS代碼實(shí)現(xiàn)當(dāng)鼠標(biāo)懸停表格上顯示這一格的全部內(nèi)容
這篇文章主要介紹了基于JS代碼實(shí)現(xiàn)當(dāng)鼠標(biāo)懸停表格上顯示這一格的全部內(nèi)容 的相關(guān)資料,需要的朋友可以參考下2016-06-06JS Array.slice 截取數(shù)組的實(shí)現(xiàn)方法
這篇文章主要介紹了JS Array.slice 截取數(shù)組的實(shí)現(xiàn)方法,因?yàn)槲覀冃枰刂埔幌麻L度,需要的朋友可以參考下2016-01-01javascript中的document.open()方法使用介紹
document.open()方法打開一個(gè)新的文檔并用document.write()方法編寫文檔的內(nèi)容,下面有個(gè)不錯(cuò)的示例,大家可以感受下2013-10-10由淺入深講解Javascript繼承機(jī)制與simple-inheritance源碼分析
Javascript語言對繼承實(shí)現(xiàn)的并不好,需要工程師自己去實(shí)現(xiàn)一套完整的繼承機(jī)制。下面我們由淺入深的系統(tǒng)掌握使用javascript繼承的技巧,對javascript繼承相關(guān)知識感興趣的朋友一起看看吧2015-12-12怎樣用Javascript實(shí)現(xiàn)函數(shù)柯里化與反柯里化
這篇文章主要介紹了怎樣用Javascript實(shí)現(xiàn)函數(shù)柯里化與反柯里化,想了解函數(shù)柯里化的同學(xué),可以參考下2021-04-04JavaScript利用油猴腳本實(shí)現(xiàn)去水印功能
這篇文章主要為大家詳細(xì)介紹了JavaScript如何利用油猴腳本實(shí)現(xiàn)去水印功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03基于JavaScript實(shí)現(xiàn)微信搶紅包功能
本文通過實(shí)例代碼給大家介紹了基于JavaScript實(shí)現(xiàn)微信搶紅包功能,金額隨機(jī),額度在0.01和(剩余平均值*2)之間,具體的實(shí)例代碼大家參考下本文2017-07-07JS 中LocalStorage和SessionStorage的使用
最近因?yàn)轫?xiàng)目上需要使用到客戶端存儲,所以稍微研究了一下,以下說說自己的理解和使用經(jīng)驗(yàn),特此分享到腳本之家平臺,感興趣的朋友參考下吧2017-08-08