收藏
评论

WeUI官方组件库:助力小程序高效设计与开发官方

原文来自「微信开发者」公众号。
本文主要介绍了WeUI官方组件库有什么,怎么用。


提起 WeUI,相信大家都不陌生,WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。

不过,对于 WeUI 样式库,开发者就有疑问了。


1 有什么

我们来看看 WeUI 组件库到底有什么可用的 UI 组件呢?WeUI 样式库有的各个元素,WeUI 组件库是基于 WeUI 样式库做了组件化处理,开发者可以便捷的使用,无需考虑组件层面的逻辑问题。


2 怎么用

有了心动的组件之后,大家肯定想知道 WeUI 组件库是怎么使用的。

第一步:引用

要使用 WeUI,首先要把 WeUI 引入我们的小程序项目,引入 WeUI 的方式有以下两种,使用其中一种即可~

方法一:通过 useExtendedLib 扩展库 的方式引入,这种方式引入的组件将不会计入代码包大小。(推荐👍)

方法二:可以通过 npm 方式下载构建,npm 包名为 weui-miniprogram。

与方法一不同,npm 引入的方式需要多操作一步,在 app.wxss 中引用 weui.wxss。

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


第二步:使用

引入之后,我们就要开始来使用了,WeUI 组件库是基于小程序自定义组件构建的,所以使用是以自定义组件的形式来使用。

下面通过几个例子来感受下 WeUI 组件库的使用。

由于是自定义组件的形式,所以使用组件都需要在页面配置中引入,像这样:

// page.json
{
  "usingComponents": {
    "mp-half-screen-dialog": "weui-miniprogram/half-screen-dialog/half-screen-dialog",
    "mp-searchbar": "weui-miniprogram/searchbar/searchbar"
  }
}


引入组件之后,就可以直接在 wxml 中使用了,当然,为了让开发者接入更加简便,我们也加入了做了一些常见的实用性功能。

半屏弹窗

小程序提供了 wx.showModal、wx.showToast 供开发者进行页面交互,在开发过程中,可能需要自定义按钮相关的内容,所以 WeUI 提供了半屏弹窗让开发者可以有更多的自定义空间。

我们来看下代码,使用很简单,直接使用 mp-half-screen-dialog,配置相关属性即可。

// page.wxml




// page.js data配置
buttons: [
  {
    type: 'default',
    className: '',
    text: '辅助操作',
    value: 0
},
{
    type: 'primary',
    className: '',
    text: '主操作',
    value: 1
  }
]


来看下半屏弹窗的效果~

u1s1,这交互体验真的爱了😍

Form 表单校验

Form 表单这里,除了基础的的功能之外,WeUI 组件库还提供了表单校验的能力,通过 rules 规则的配置(支持长度、手机号码、电子邮件、url 链接地址等),轻松解决表单校验问题。

左滑删除

相比 Web 端,手机端的操作按钮更多的是通过⬅️左滑等来实现,考虑到左滑删除的普遍性,WeUI 组件库也是支持的。

在 mp-slideview 组件中设置 buttons属性即可。

搜索组件

同样是基本功能的搜索,WeUI 组件库也封装了搜索组件,开发者只需配置搜索结果即可拥有搜索功能~

除了这些组件之外,WeUI 组件库还提供了很多实用的组件,包括基础的 icon、loading,表单的 uploader、cell 等等。


第三步:适配DarkMode

伴随客户端、小程序对 DarkMode 的支持,WeUI 组件库也同步适配 DarkMode 的模式,让 WeUI 组件库的使用同学可以快速适配 DarkMode。

在根结点(或组件的外层结点)增加属性 data-weui-theme="dark" ,即可把 WeUI 组件切换到 DarkMode 的表现,如:

...



3 体验WeUI

最后,如果想体验 WeUI 组件库的效果,欢迎扫码下方二维码进行小程序示例体验👏及接入使用,使用过程中如有建议或者疑问,欢迎到微信开放社区与我们交流。

最后一次编辑于  2022-03-24
赞 4
收藏

58 个评论

  • ᥬ[调皮]᭄
    ᥬ[调皮]᭄
    2023-04-15

    searchbar search 函数返回的Promise实例数组的字段从哪儿看?是个list集合就行吗?

    2023-04-15
    赞同
    回复
  • 元气童童
    元气童童
    2023-03-09

    我不信微信官网的文档这么乱,我是一个UI设计师想要最新的小程序的官方UI(框架),我先去微信官网看一下是否有提供,ok指引到GitHub,看到UI包了之后下载说太陈旧了(2017年更新,sketch版本都迭代好几十版本了)打不开,然后就不知道该去哪里找了。。。太迷茫了。

    2023-03-09
    赞同
    回复
  • 小小的书桌
    小小的书桌
    2023-03-08
    mp-half-screen-dialog
    

    这个玩意的文档介绍在那里 我只看到了dialog的呀


    2023-03-08
    赞同
    回复
  • 王軍師旅團營連排班兵
    王軍師旅團營連排班兵
    2023-02-14

    为什么原来很好的官方文档删减成这个样子了?以前都可以直接在页面看效果的。

    2023-02-14
    赞同
    回复 1
    • 人生如茶
      人生如茶
      2023-07-25
      是啊,完全搞不懂官方在干吗
      2023-07-25
      回复
  • _dolphin
    _dolphin
    2022-12-28

    垃圾玩意,谁特么用这套破组件,在线示例DEMO都没有,看文档看个锤子啊,早晚带倒闭

    2022-12-28
    赞同
    回复
  • 夏野的萤火虫
    夏野的萤火虫
    2022-11-28

    哪个叼毛写的???我🤮了

    2022-11-28
    赞同
    回复
  • 晗
    2022-11-07

    多学习人家vant的看都看不懂,咋用呢

    2022-11-07
    赞同
    回复
  • Joey
    Joey
    2022-10-17

    有些组件为嘛连个示例都没有,参数和事件也没有,这是官方干的事?

    2022-10-17
    赞同
    回复
  • AndroidMark专专
    AndroidMark专专
    2022-10-13

    https://wechat-miniprogram.github.io/weui/docs/ 组件库的官方文档在这啊

    2022-10-13
    赞同
    回复 1
    • 万花盛处松千尺
      万花盛处松千尺
      2022-11-25
      不完整,很多组件都没有。
      2022-11-25
      2
      回复
  • 罔
    2022-09-23

    写的是什么玩意


    2022-09-23
    赞同
    回复

正在加载...

登录 后发表内容
课程标签