小程序引入weui使用步骤

第一步：

在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>

方法/步骤

下载 weui.wxss

请点击输入图片描述

解压缩文件，可以看到如下文件

请点击输入图片描述

打开开发者工具，新建一个项目

请点击输入图片描述

下面的小程序初始化的文件内容及结构

请点击输入图片描述

找到上述文件dist/style目录下weui.wxss

请点击输入图片描述

将weui.wxss放到小程序项目的更目录下

请点击输入图片描述

引用weui.wxss，在app.wxss引入

请点击输入图片描述

实验weui.wsxx

请点击输入图片描述

查看效果，此时说明我们的样式已经引用成功。

请点击输入图片描述

1、创建小程序项目

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>

---