来了！微信小程序五款最受欢迎的UI框架解读

微信小程序开发，页面编写占比较高，熟悉 html 和 css 的同学，建议直接使用 html+css ，不熟悉的同学则可以使用下面任意一个UI框架，就像在报修小程序中，我们是有使用了一点 iView WeApp 。

下面我总结一下市面上比较常用的几款 UI 框架，并给出我的使用心得，供大家参考。

1、WeUI

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
GitHub 地址：https://github.com/Tencent/weui
效果：https://weui.io
开发文档参考：https://github.com/Tencent/weui/wiki

使用心得：

WeUI 使用简单，风格微信原生风格，以绿色为主色，主要是两个大版本，1.x版本和2.x版本，相比1.x版本来说，2.x版本视觉上更好。

WeUI 使用第一个问题，文档不是很详细，访问 https://weui.io 能看到效果图，没有直观的显示效果对应的代码，从开发角度来说，文档不够直接，使用不是很方便。

WeUI 使用第二个问题是：风格与微信视觉体验一致，在开发中我们需要更丰富漂亮的UI效果，需要修改WeUI的样式或自定义css 。

2、iView Weapp （在项目中有使用）

iView Weapp是由 TalkingData 发布的组件库，一套高质量的
微信小程序 UI 组件库。
GitHub 地址：https://github.com/TalkingData/iview-weapp
开发文档：https://weapp.iviewui.com/docs/guide/start

使用心得：

1、优点：提供了丰富的UI组件，尤其是 tabBar、Tabs、抽屉、index索引，使用比较方便。

2、缺点：页面风格比较固定、修改起来比较困难。输入框在模拟器下经常无法输入，给应用调试带来了麻烦。

3、ColorUI

鲜亮的高饱和色彩，专注视觉的小程序组件库
GitHub 地址：https://github.com/weilanwl/ColorUI
开发文档参考（编辑中）：https://www.color-ui.com

使用心得：

1、优点：视觉效果漂亮，注意看一下，他可以将样式沉浸到手机最顶部，这一点很好，同时其他组件也挺好，可针对自己的需求，直接修改或覆盖他的css样式。

2、缺点：缺少文档、很多新人无从下手。扫码预览时，近期广告有些频繁，影响使用，开发者也想有点费用，大家理解，喜欢的可以对开发者点广告支持，开源不易。

4、Vant Weapp

Vant Weapp 是有赞移动端组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。
GitHub 地址：https://github.com/youzan/vant-weapp
开发文档参考：https://youzan.github.io/vant-weapp/#/intro

使用心得：

1、优点：视觉效果简单明朗、提供了日常开发使用的组件、文档很详细。

2、缺点：门槛相比其他几个UI框架高，需要会 vue 的开发者，同时不支持原生开发。像我这样对 vue 不是很熟悉的，不建议使用，比较熟悉 vue 的推荐使用。

5、TaroUI

Taro UI 是一款由凹凸实验室打造、基于 Taro 编写的多端 UI 组件库。除了高颜值，Taro UI 最大的亮点就是支持多端运行。Taro UI 借助 Taro 支持多端运行的特点，只需解决不同平台 CSS 的表现差异问题，就可以在微信小程序/ H5 / ReactNative 等多端适配运行。

官方地址：https://taro-ui.jd.com/#/

1、优点：Taro UI 可谓神通广大，功能丰富，开发一套代码可以可以在微信小程序 / H5 / 百度小程序等多端适配运行。

2、缺点：入门门槛高，不适合新人开发者。相对而言，使用的人数不够多，开发中出现问题排查困难。只用在微信小程序开发上，大材小用了，杀鸡焉用宰牛刀！

总结：

以上五个框架，对于新手来说、前四个可以使用，最后一个拓展了解。对于有 css 基础的同学，参照他们的样式，自己编写 css 比较灵活。

往期文章：

开源 flask + mysql 校园报修微信小程序系统

flask 程序后台源码安装部署（微信报修小程序源码讲解一）

flask 启动程序与路由的使用（微信报修小程序源码讲解二）

flask 拦截器与session的使用（微信报修小程序源码讲解三）

flask mysql 数据库增删改查（微信报修小程序源码讲解四）

flask blueprint 蓝图与 url_for 的使用（微信报修小程序源码讲解五）

微信小程序授权登录与用户信息保存详解（微信报修小程序源码讲解六）

小程序与后台 api接口数据交互详解（微信报修小程序源码讲解七）

手把手教你完成微信小程序用户信息绑定（微信报修小程序源码讲解八）

欢迎关注个人微信公众号，与我交流！