柚子快報邀請碼778899分享：微信小程序 使用npm包

http://yzkb.51969.com/

1. 微信小程序 使用npm包

1.1. npm初始化

??如果你的小程序項目沒有安裝過npm包的話，你需要先初始化npm

npm init

1.2. 安裝npm包

??這里以vant-weapp(小程序UI組件庫)為例：

npm i vant-weapp -S --production

1.3. npm包構(gòu)建

1.3.1. 點擊微信開發(fā)者工具右上角詳情——>本地設(shè)置，選中使用npm模塊

??新版開發(fā)工具忽略此步驟，沒有“使用npm模塊”，默認(rèn)可用npm下載）

1.3.2. 點擊微信開發(fā)者工具菜單欄的工具，選擇構(gòu)建npm

### 1.3.3. ### 1.3.3. 當(dāng)顯示如下表示npm構(gòu)建成功，構(gòu)建完成就可以使用npm包了

1.3.4. npm包構(gòu)建完成之后項目的結(jié)構(gòu)如下：

1.4. 使用npm

1.4.1. js中引入npm包

const myPackage = require('packageName')

const packageOther = require('packageName/other')

1.4.2. 使用 npm 包中的自定義組件

??在json文件的usingComponents參數(shù)加上：

{

"usingComponents": {

"myPackage": "packageName",

"package-other": "packageName/other"

}

}

1.5. 使用npm實例：

1.5.1. js中引入npm包：

??此例使用js-base64包實現(xiàn)，在你需要使用此包的js文件中引入npm包

const jsBase64 = require('js-base64');

1.5.2. 使用：

console.log(jsBase64.Base64.encode("haha"));//編碼

console.log(jsBase64.Base64.decode("aGFoYQ=="));//解碼

1.6. 使用 npm 包中的自定義組件

??此例使用vant-weapp包實現(xiàn)，在app.json文件或者在指定頁面的json文件中：

"usingComponents": {

"van-button": "vant-weapp/button/index"

}

??在wxml文件中使用：

按鈕

柚子快報邀請碼778899分享：微信小程序 使用npm包

http://yzkb.51969.com/

推薦文章