微信小程序如何使用weui组件库?

一、方法一:通过npm安装

通过npm构建方式引入weui组件库

(找到.eslintrc.js 右键,在内件终端打开)打开命令提示符后,输入

(1)npm init -y来快速生成一个默认的package.json文件

(2)npm install --save weui-miniprogram --production。这将从npm仓库中下载并安装WeUI组件库及其依赖项。

(3)构建npm。在顶部菜单中选择“工具”,然后点击“构建npm”

 

(4)在项目的app.wxss文件中引入weui组件库 式。打开app.wxss文件,并在文件顶部添加以下代码:@import './miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

(5)此时会出现以下报错:解决办法:

将本地设置中,这个选项,取消选择后再选中,再次编译就可以通过

(6)现在你可以在小程序中使用WeUI组件了。在页面的json文件中,加入你需要使用的组件。然后在对应的wxml文件中,使用这些组件。 

以 dialog 弹窗组件为例:

1.首先在页面的 json 文件加入 usingComponents 配置字段

{
  "usingComponents": {
    "mp-dialog": "weui-miniprogram/dialog/dialog"
  }
}

2.然后可以在对应页面的 wxml 中直接使用该组件

<mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}">
    <view>test content</view>
</mp-dialog>

3.效果:

*二、方法二:直接修改配置文件 (推荐使用,更方便)

(1)在app.json里面输入

(2)验证weui有没有引入进来:依旧以 dialog 弹窗组件为例:

1.在pages/index.json里面加入 usingComponents 配置字段

 2.然后可以在对应页面的 index.wxml 中直接使用该组件

<mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}">
    <view>test content</view>
</mp-dialog>

3.效果: 

相关推荐

  1. 程序map如何使用

    2024-05-16 12:38:06       36 阅读
  2. 程序中block和View使用区别

    2024-05-16 12:38:06       38 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-05-16 12:38:06       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-05-16 12:38:06       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-05-16 12:38:06       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-05-16 12:38:06       18 阅读

热门阅读

  1. 【Python】学生管理系统

    2024-05-16 12:38:06       13 阅读
  2. 2024.5.15晚训题解

    2024-05-16 12:38:06       11 阅读
  3. 【转】VS(Visual Studio)更改文件编码

    2024-05-16 12:38:06       12 阅读
  4. Sping @Autowired @Value @Resourece依赖注入原理

    2024-05-16 12:38:06       13 阅读
  5. spark分布式预测和保存过程中遇到的问题记录

    2024-05-16 12:38:06       12 阅读
  6. OpenCV 实时目标检测

    2024-05-16 12:38:06       12 阅读
  7. AI技术在内容生产中的革新:效率与质量的双赢

    2024-05-16 12:38:06       12 阅读
  8. 学习MySQL(四):记录的增删改查

    2024-05-16 12:38:06       10 阅读