微信小程序通过 useExtendedLib 的方式引入 WeUI 组件库

本文介绍了如何在微信小程序中使用WeUI组件库,包括在app.json配置引用,页面json文件添加usingComponents,以及在WXML中直接使用组件如mp-dialog的例子。通过这些步骤,开发者可以实现与微信原生视觉体验一致的组件应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

WeUI 组件库是一套基于样式库 weui-wxss 开发的小程序扩展组件库,同微信原生视觉体验一致。支持扩展库引入,不占用小程序包体积。

官方文档:https://wechat-miniprogram.github.io/weui/docs/

  1. app.json 中指定要引用的 WeUI 扩展库。
    {
     "useExtendedLib":{
        "weui": true
      }
    }
    
  2. 在页面的 json 文件加入 usingComponents 配置字段。
    {
      "usingComponents": {
        "mp-dialog": "weui-miniprogram/dialog/dialog"
      }
    }
    
  3. 就可以在对应页面的 wxml 中直接使用该组件。
    <mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}">
        <view>test content</view>
    </mp-dialog>
    
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值