开发微信小程序的过程中,选择一款好用的组件库,可以达到事半功倍的效果。自从微信小程序面世以来,不断有一些开源组件库出来,下面5款就是排名比较靠前,用户使用量与关注度比较高的小程序UI组件库。

1.WeUI WXSS

WeUI WXSS是腾讯官方UI组件库WeUI的小程序版,提供了跟微信界面风格一致的用户体验。

GitHub地址:https://github.com/Tencent/weui-wxss

npm下载:npm i weui-wxss

2.iView WeApp

iView是TalkingData发布的一款高质量的基于Vue.js组件库,而iView weapp则是它们的小程序版本。

GitHub地址:https://github.com/TalkingData/iview-weapp

npm下载:npm i iview-weapp

3.ZanUI WeApp

ZanUI WeApp是有赞移动 Web UI 规范 ZanUI 的小程序现实版本,结合了微信的视觉规范,为用户提供更加统一的使用感受。

现已包含 badge、btn、card、cell、dialog、icon、label、noticebar、panel、popup、switch、tab、toast、toptips 等组件或元素。

GitHub地址:https://github.com/youzan/zanui-weapp

npm下载:npm i zanui-weapp

另外,zanui也使用 mpvue 重写 zanui-weapp,实现了其中所有组件。

GitHub地址:https://github.com/samwang1027/mpvue-zanui

npm下载:npm i mpvue-zanui

4.MinUI

MinUI 是蘑菇街前端开发团队开发的基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库,适用场景广,覆盖小程序原生框架,各种小程序组件主流框架等,并且提供了专门的命令行工具。

GitHub地址:——https://github.com/meili/m——inui--



5.Wux WeApp

Wux WeApp也是一个非常不错的微信小程序自定义 UI 组件库,组件比较丰富,值得使用。

GitHub地址:https://github.com/wux-weapp/wux-weapp

npm下载:npm i wux-weapp

小程序UI视觉设计规范

1. 字体规范

常用字号为20,18,17,16,14,13,11(pt),使用场景具体如下(这里可以换算成px或dp):

微信小程序UI设计


微信类字体的使用与所运行的系统字体保持一致,以导航为例,iOS与Android对应字体如下:

导航(iOS和Android)


微信小程序UI设计

字体颜色


微信小程序UI设计

主内容Black黑色,次要内容Grey灰色;时间戳与表单缺省值Light灰色;大段的说明内容而且属于主要内容用Semi黑;

微信小程序


蓝色为链接用色,绿色为完成字样颜色,红色为出错用色Press与Disable状态分别降低透明度为20%与10%;

微信小程序


2. 列表视觉规范


微信小程序

3. 表单输入视觉规范


UI设计

4. 按钮使用原则

列表外按钮上文字标准


按钮高度为44px下使用:颜色#000000 / #353535 字号18pt

可点状态下文字调整透明度为60%

不可点状态下文字调整透明度为30%

UI设计

列表外按钮上文字标准

按钮高度为25px下使用:颜色#000000 / #353535 字号14pt

页面线性按钮上文字标准

按钮高度为35px下使用:颜色#09BB07 / #353535 字号16pt

UI设计

5. 图标使用原则

微信小程序

定制小程序做小程序开发就选“拓意网络科技有限公司”。