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

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>

引入weui:

在app.json里添散禅加

在需要使用weui的页面的json文件里引入要使羡掘衫用的组件

修改weui样式

在需要修改的页面的js里添加externalClasses:[样式名1,样式名兄腔2......]

在组件上添加在externalClasses里写的类名

方法/步明烂骤

下载 weui.wxss

请点击输入图片描述

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

请点击输入图片悔槐敬描述

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

请点击输入图片描述

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

请点击输入图片描述

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

请点击输入图片描述

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

请点击输入图片描述

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

请点击输入图片描述

实验weui.wsxx

请点击输入图片描述

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

请点击输入图片描述

---