微信小程序使用weui怎么只有样式功能却用不了?

方法/步骤

下载 weui.wxss

请点击输入图片描述

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

请点击输入图片描述

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

请点击输入图片描述

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

请点击输入图片描述

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

请点击输入图片描述

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

请点击输入图片描述

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

请点击输入图片描述

实验weui.wsxx

请点击输入图片描述

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

请点击输入图片描述

在引入之前，需要安装nodejs作为运行环境，具体 *** 作网上可以搜得到！

以引入vant为例：

输入npm init，下面的选择都用回车即可

npm i weui-miniprogram -S --production

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

"usingComponents": {

"mp-toptips": "../../miniprogram_npm/weui-miniprogram/toptips/toptips"

}

<mp-toptips msg="{{tips}}" type="success" show="{{tips}}"></mp-toptips>

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>

---