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 在這就不重復了，大家可以去上方鏈接復制粘貼，內容全部替換即可。最終效果圖如下所示：

你知道的越多，不知道的就越多，歡迎關注我的微信公眾號，大家一起成長

總結

以上是生活随笔為你收集整理的微信小程序里如何使用npm？小程序集成友盟举例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。