1、執行npm初始化指令
小程序根目錄，命令執行如下指令：
npm init
執行后會讓加載項目初始信息，具體截圖如下：
2、執行安裝npm包指令
在這我們舉個例子，以接入友盟統計SDK為例，執行命令如下：
npm install umtrack-wx --save
說明截圖：
執行截圖如下：
3、微信開發者工具構建npm
點擊微信開發者工具中的菜單欄：工具 --> 構建 npm
點擊構建之后，項目會自動幫我們進行構建，然后會多出一個miniprogram_npm文件夾：
4、勾選“使用 npm 模塊”選項
在微信開發者工具中的菜單欄：工具 --> 項目詳情， 勾選 "使用 npm 模塊" 選項：
5、引入依賴組件
如上步驟，構建完成我們就可以使用我們的npm包了，我們繼續按照友盟的提示，在app.js引入：
6、再舉個例子，引入官方WeUI組件庫
上邊友盟的例子確實過於簡單，相信大家在使用npm大部分場景是使用UI庫，那么我們通過npm方式引入WeUI組件庫。
相關鏈接：
- WeUI組件庫地址：https://github.com/wechat-miniprogram/weui-miniprogram
- WeUI組件庫文檔：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/
執行命令：
npm install weui-miniprogram --save
執行截圖：
微信開發者工具 > 菜單欄 > 工具 > 構建npm
執行構建npm后，項目中 minoprogram_npm 包下就可以看到 WeUI 了。
7、怎么使用WeUI組件庫？
app.wxss 中全局引入 weui.css
@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';
實例截圖：
接下來我們以一個Form表單樣式為例：
https://developers.weixin.qq.com/miniprogram/dev/extended/weui/form.html
如圖所示我們分別復制到 index.json、index.wxml、index.js 中：
在這我額外說一下 index.json，因為我們的 weui 路徑是在 miniprogram_npm 文件夾下的，所以復制過來后需要修改一下路徑，具體內容如下：
{
"component": true,
"usingComponents": {
"mp-toptips": "../../miniprogram_npm/weui-miniprogram/toptips/toptips",
"mp-cells": "../../miniprogram_npm/weui-miniprogram/cells/cells",
"mp-cell": "../../miniprogram_npm/weui-miniprogram/cell/cell",
"mp-checkbox": "../../miniprogram_npm/weui-miniprogram/checkbox/checkbox",
"mp-checkbox-group": "../../miniprogram_npm/weui-miniprogram/checkbox-group/checkbox-group",
"mp-form": "../../miniprogram_npm/weui-miniprogram/form/form"
}
}
index.wxml、index.js 在這就不重復了，大家可以去上方鏈接復制粘貼，內容全部替換即可。最終效果圖如下所示：
你知道的越多，不知道的就越多，歡迎關注我的微信公眾號，大家一起成長
