微信小程序使用npm包的方法步驟
一:npm初始化
如果你的小程序項目沒有安裝過npm包的話,你需要先初始化npm
npm init
二:安裝npm包
這里以vant-weapp(小程序UI組件庫)為例:
npm i vant-weapp -S --production
三:npm包構(gòu)建
1:點擊微信開發(fā)者工具右上角詳情——>本地設(shè)置,選中使用npm模塊
2:點擊微信開發(fā)者工具菜單欄的工具,選擇構(gòu)建npm
當(dāng)顯示如下表示npm構(gòu)建成功,構(gòu)建完成就可以使用npm包了
npm包構(gòu)建完成之后項目的結(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實例:
1:js中引入npm包:
此例使用js-base64包實現(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包實現(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代碼實現(xiàn)當(dāng)鼠標(biāo)懸停表格上顯示這一格的全部內(nèi)容
這篇文章主要介紹了基于JS代碼實現(xiàn)當(dāng)鼠標(biāo)懸停表格上顯示這一格的全部內(nèi)容 的相關(guān)資料,需要的朋友可以參考下2016-06-06JS Array.slice 截取數(shù)組的實現(xiàn)方法
這篇文章主要介紹了JS Array.slice 截取數(shù)組的實現(xiàn)方法,因為我們需要控制一下長度,需要的朋友可以參考下2016-01-01javascript中的document.open()方法使用介紹
document.open()方法打開一個新的文檔并用document.write()方法編寫文檔的內(nèi)容,下面有個不錯的示例,大家可以感受下2013-10-10由淺入深講解Javascript繼承機(jī)制與simple-inheritance源碼分析
Javascript語言對繼承實現(xiàn)的并不好,需要工程師自己去實現(xiàn)一套完整的繼承機(jī)制。下面我們由淺入深的系統(tǒng)掌握使用javascript繼承的技巧,對javascript繼承相關(guān)知識感興趣的朋友一起看看吧2015-12-12怎樣用Javascript實現(xiàn)函數(shù)柯里化與反柯里化
這篇文章主要介紹了怎樣用Javascript實現(xiàn)函數(shù)柯里化與反柯里化,想了解函數(shù)柯里化的同學(xué),可以參考下2021-04-04JS 中LocalStorage和SessionStorage的使用
最近因為項目上需要使用到客戶端存儲,所以稍微研究了一下,以下說說自己的理解和使用經(jīng)驗,特此分享到腳本之家平臺,感興趣的朋友參考下吧2017-08-08