构建npm

• 开启“使用npm模块”(右上角详情-本地设置-勾选使用npm模块)

  
  使用npm模块

• 初始化npm

npm init -y

该命令可以快捷创建package.json文件

初始化npm

• 安装npm包
  开发工具内部自带终端功能，以微信官方的weui为例输入：

npm i weui-miniprogram

这个时候仅仅是把npm安装到项目里，还没有真正在小程序里生效.

weui

• 小程序构建npm
  位置：工具栏->工具->构建npm

  
  构建npm
  构建npm
  

  构建之后项目根目录生成miniprogram_npm文件夹，这个才是小程序实际使用的npm目录

  
  目录

注意事项：每次安装一个新的npm包都得重新在小程序构建npm

使用npm，以weui为例

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

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

• 在页面或者全局的json文件添加组件

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

• wxml 中直接使用该组件

<mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}">
    <view>test content</view>
</mp-dialog>

image.png

useExtendedLib

官方扩展库，相当于引入了对应扩展库相关的最新版本的 npm 包，同时也不占用小程序的包体积。目前暂不支持在分包中引用。
目前支持以下项目：

• kbone: 多端开发框架
• weui: WeUI 组件库

app.json文件中引入：

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