微信小程序使用npm包的方法步驟
一:npm初始化
如果你的小程序項目沒有安裝過npm包的話,你需要先初始化npm
npm init
二:安裝npm包
這里以vant-weapp(小程序UI組件庫)為例:
npm i vant-weapp -S --production
三:npm包構建
1:點擊微信開發(fā)者工具右上角詳情——>本地設置,選中使用npm模塊

2:點擊微信開發(fā)者工具菜單欄的工具,選擇構建npm

當顯示如下表示npm構建成功,構建完成就可以使用npm包了

npm包構建完成之后項目的結構如下:

四:使用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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
基于JS代碼實現(xiàn)當鼠標懸停表格上顯示這一格的全部內容
這篇文章主要介紹了基于JS代碼實現(xiàn)當鼠標懸停表格上顯示這一格的全部內容 的相關資料,需要的朋友可以參考下2016-06-06
JS Array.slice 截取數(shù)組的實現(xiàn)方法
這篇文章主要介紹了JS Array.slice 截取數(shù)組的實現(xiàn)方法,因為我們需要控制一下長度,需要的朋友可以參考下2016-01-01
javascript中的document.open()方法使用介紹
document.open()方法打開一個新的文檔并用document.write()方法編寫文檔的內容,下面有個不錯的示例,大家可以感受下2013-10-10
由淺入深講解Javascript繼承機制與simple-inheritance源碼分析
Javascript語言對繼承實現(xiàn)的并不好,需要工程師自己去實現(xiàn)一套完整的繼承機制。下面我們由淺入深的系統(tǒng)掌握使用javascript繼承的技巧,對javascript繼承相關知識感興趣的朋友一起看看吧2015-12-12
怎樣用Javascript實現(xiàn)函數(shù)柯里化與反柯里化
這篇文章主要介紹了怎樣用Javascript實現(xiàn)函數(shù)柯里化與反柯里化,想了解函數(shù)柯里化的同學,可以參考下2021-04-04
JS 中LocalStorage和SessionStorage的使用
最近因為項目上需要使用到客戶端存儲,所以稍微研究了一下,以下說說自己的理解和使用經驗,特此分享到腳本之家平臺,感興趣的朋友參考下吧2017-08-08

