您好,登錄后才能下訂單哦!
本篇文章為大家展示了如何在微信小程序中使用npm包,內(nèi)容簡明扼要并且容易理解,絕對(duì)能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
一: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)容就是如何在微信小程序中使用npm包,你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。