構(gòu)建npm

• 開(kāi)啟“使用npm模塊”(右上角詳情-本地設(shè)置-勾選使用npm模塊)

  
  
  使用npm模塊

• 初始化npm

npm init -y

該命令可以快捷創(chuàng)建package.json文件

初始化npm

• 安裝npm包
  開(kāi)發(fā)工具內(nèi)部自帶終端功能，以微信官方的weui為例輸入：

npm i weui-miniprogram

這個(gè)時(shí)候僅僅是把npm安裝到項(xiàng)目里，還沒(méi)有真正在小程序里生效.

weui

• 小程序構(gòu)建npm
  位置：工具欄->工具->構(gòu)建npm

  
  
  構(gòu)建npm
  
  
  構(gòu)建npm
  
  

  構(gòu)建之后項(xiàng)目根目錄生成miniprogram_npm文件夾，這個(gè)才是小程序?qū)嶋H使用的npm目錄

  
  
  目錄

注意事項(xiàng)：每次安裝一個(gè)新的npm包都得重新在小程序構(gòu)建npm

使用npm，以weui為例

• 在 app.wxss 里面引入 weui.wxss

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

• 在頁(yè)面或者全局的json文件添加組件

{
  "usingComponents": {
    "mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog"
  }
}

• wxml 中直接使用該組件

<mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '確認(rèn)'}]}}">
    <view>test content</view>
</mp-dialog>

image.png

useExtendedLib

官方擴(kuò)展庫(kù)，相當(dāng)于引入了對(duì)應(yīng)擴(kuò)展庫(kù)相關(guān)的最新版本的 npm 包，同時(shí)也不占用小程序的包體積。目前暫不支持在分包中引用。
目前支持以下項(xiàng)目：

• kbone: 多端開(kāi)發(fā)框架
• weui: WeUI 組件庫(kù)

app.json文件中引入：

{
  "useExtendedLib": {
    "kbone": true,
    "weui": true
  }
}