小程序使用npm引入Weui组件库

2、在小程序根输入npm init,进行初始化，然后一路可以默认（enter）之后可看到package.json

3、开始安装Weui组件库 npm install --save weui-miniprogram --production

4、工具>构建npm

5、点击小程序开发工具右上角详情-本地设置，勾选上使用npm模块

[图片上传中...(image-b7a8e2-1624982995933-0)]

6、在小程序app.wxss中引入样式文件

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

7、index页面使用

//index.json { "usingComponents": { "mp-dialog": "weui-miniprogram/dialog/dialog" } }

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

在app.json中，设置

"useExtendedLib":{

"weui": true

}

第二步：

在对应需要使用组件的页面json文件中，引入，例如引入d框组件

{

"usingComponents": {

"mp-dialog": "weui-miniprogram/dialog/dialog"

}

}

第三步：在对应wxmll文件中，引入结构

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

<view>test content</view>

</mp-dialog>