微信小程序使用npm包步驟

這裏以npm引入小程序官方UI組件庫weui-miniprogram爲例

1.在小程序根目錄內，初始化npm（官方文檔上是沒寫出這一步，這裏作個補充）

npm init

2.在小程序中執行命令安裝 npm 包（這裏使用了weui-miniprogram）：

npm install --save-dev weui-miniprogram

3.在微信開發者工具中的菜單欄：工具 --> 構建 npm （這裏記得先安裝 npm 包，即步驟2）：

完成構建後能夠在目錄樹裏看到了miniprogram_npm以及裏面的weui-miniprogram組件文件夾

4.在微信開發者工具中的菜單欄：工具 --> 項目詳情， 勾選「使用 npm 模塊」選項：

5.使用組件庫

最近的ui組件庫新增了官方的自定義導航，這個方便了不少，不再用本身動手作，以index頁面爲例
index.wxml裏引入組件:

<!--WXML示例代碼-->
<mp-navigation-bar loading="{{loading}}" show="{{show}}" animated="{{animated}}" color="{{color}}" background="{{background}}" title="自定義導航" back="{{true}}"></mp-navigation-bar>

index.json配置

{
  "usingComponents": {
    "mp-navigation-bar": "/miniprogram_npm/weui-miniprogram/navigation-bar/navigation-bar"
  },
  "navigationStyle": "custom"
}

app.wxss引入全局樣式

@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

這個自定義導航包括了不少用法，隱藏標題只保留膠囊按鈕、自定義返回頁面數等等

還有其餘好用的組件

6.使用其餘npm 包方法

js 中引入 npm 包

const myPackage = require('packageName')
const packageOther = require('packageName/other')

json配置

{
  "usingComponents": {
    "myPackage": "packageName",
    "package-other": "packageName/other"
  }
}