小程序开发-WeUI组件库使用

WeUI组件库简介

这是一套基于样式库weui-wxss开发的小程序扩展组件库,同微信原生视觉体验一致的UI组件库,由微信官方设计团队和小程序团队为微信小程序量身设计,令用户的使用感知更加统一。

1. 引入组件

推荐方式1, 可以省略后面import方式

  • 方法1: 可以在app.json中通过引入扩展库的方式
{
  "useExtendedLib": {
    "weui": true
  }
}
  • 方法2: 通过npm下载构建,npm包名为 weui-miniprogram

2. 使用方法

如果是方式1 引入的,不用什么操作

如果是方式2 引入的, 首先要在 app.wxss 里面引入 weui.wxss,如果是通过 npm 引入,需要先构建 npm(“工具”菜单 --> “构建 npm”)

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

然后可以在任何页面的json文件中加入要使用的组件库

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

最后就可以在页面的wxml中直接使用该组件

<mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}">
    <view>test content</view>
</mp-dialog>

3. 其他组件的效果可以扫描观看

![]()

声明:该文章系转载,转载该文章的目的在于更广泛的传递信息,并不代表本网站赞同其观点,文章内容仅供参考。

本站是一个个人学习和交流平台,网站上部分文章为网站管理员和网友从相关媒体转载而来,并不用于任何商业目的,内容为作者个人观点, 并不代表本网站赞同其观点和对其真实性负责。

我们已经尽可能的对作者和来源进行了通告,但是可能由于能力有限或疏忽,导致作者和来源有误,亦可能您并不期望您的作品在我们的网站上发布。我们为这些问题向您致歉,如果您在我站上发现此类问题,请及时联系我们,我们将根据您的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。