构建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 包，同时也不占用小程序的包体积。目前暂不支持在分包中引用。
目前支持以下项目：
app.json文件中引入：
{
"useExtendedLib": {
"kbone": true,
"weui": true
}
}
