基于H5 小程序 UI框架选型 2020年9月10号

最新推荐文章于 2025-05-05 22:42:52 发布

被闲置的鱼

最新推荐文章于 2025-05-05 22:42:52 发布

阅读量1.5k

点赞数

分类专栏：前端VUE

本文链接：https://blog.csdn.net/qq_14902731/article/details/108517219

版权

前端VUE 专栏收录该内容

6 篇文章

订阅专栏

基于H5 小程序 UI框架选型

选型标准：

1. 便于后面项目小程序 app等改造
2. 开发轻便
3. 学习成本低
4. 框架生态完整

一、方案确定

方案1 (使用原生HTML+CSS实现)

优点 :

   1. 原因项目改造成本低（后续别的项目需要直接将.vue文件复制粘贴过去就能使用）

   2. 如果样式不统一，只需要更改少量CSS样式即可达到目的

   3. 基于H5的小程序兼容性问题，使用UI框架打包后也是基于HTML+CSS+JS来达到目的

缺点 :

   1. 前期开发成本较高(人天等方面)

方案2（选用UI框架）

优点 :

   1. 前期开发时间较低

   2. 不需要怎么写更改样式，开箱即用

   3. 如果别的项目小程序UI框架未选型，则直接使用即可

缺点 :

   1. 如果别的项目小程序或APP的UI框架已选型，并且不是我们选用的UI框架，则需要再次安装一个UI框架（可能会出现一些不可预知的问题比如CSS过渡效果等）

二、UI框架选型（方案一是基于原生HTML+CSS实现所以不参与UI框架选型）：

滴滴ui： https://didi.github.io/cube-ui/
vant ui： https://youzan.github.io/vant 有赞前端团队（用于商城的更多）
vux https://doc.vux.li/zh-CN/ （WeUI和Vue(2.x)开发的移动端UI组件库，主要服务于微信页面。）
NutUI http://nutui.jd.com/#/intro （京东前端开发库）
https://github.com/fex-team/GMU上（百度GMU小组开发，基于开源BSD协议 --停止更新（没官网））
https://gitee.com/mirrors/AKjs.Mobile （基于jQuery的一个轻量级前端框架）
https://gitee.com/mirrors/Mint-UI（饿了么基于vue的小程序UI框架停止更新238个问题未修复）
https://github.com/jaunesarmiento/fries （停更适用于仅使用HTML,CSS和原生JS的Android应用程序）
https://gitee.com/mirrors/NowUI (NowUI 是一款基于 React 的移动端 UI 组件框架)
https://gitee.com/antv/f2 (主要用于移动端图表渲染)
https://gitee.com/mirrors/better-scroll （BetterScroll 是一款重点解决移动端各种滚动场景需求的插件）
https://gitee.com/mirrors/TouchUI （虽然是基于vue开发的，但是看官网文档说明，它是需要单独配置开发环境。）
https://gitee.com/mirrors/nutui （一套京东风格的轻量级移动端Vue组件库）
https://github.com/thebird/Swipe （项目已经没用了）
https://gitee.com/mirrors/Atom-Design （打不开文档）
https://github.com/JackJiang2011/MobileIMSDK/releases/tag/4.0.2 （移动端IM通信层框架 Apache2.0开源许可）
https://gitee.com/hxyl/vue-mb-touch （长距离内可触发事件插件）
https://gitee.com/didiopensource/mand-mobile/tree/v2.0.0 （移动端IM通信层框架 Apache2.0开源许可）
https://github.com/angular-ui/bootstrap （Bootstrap的本机AngularJS（Angular）指令）
https://uniapp.dcloud.io/ (使用 Vue.js 开发所有前端应用的框架可发布到iOS、Android、H5、以及各种小程序)
https://github.com/TalkingData/iview-weapp (iView Weapp iView 适用于小程序的UI)

这里只对基于VUE并且是大厂的几个进行排列

名称	cube-ui	vant ui	NutUI	GMU	Mint-UI	uniapp
社区活跃度	较完善	较完善	较完善	停止更新	停止更新	完善
开发公司	滴滴	有赞前端团队	京东	百度GMU	饿了么	DCloud
网站	https://didi.github.io/cube-ui/	https://youzan.github.io/vant	http://nutui.jd.com/#/intro	https://github.com/fex-team/GMU	https://gitee.com/mirrors/Mint-UI	https://uniapp.dcloud.io
示列	少	少	少	少	少	多
是否停更	否	否	否	是	是	否
start	8.3k	14.9K	2.3K	1.1K	16K	25.3K

三、核心框架选型对比：

Image text

1. uniapp (https://uniapp.dcloud.io/)

一套代码，运行到多个平台
uni-app实现了一套代码，同时运行到多个平台；如下图所示，一套代码，同时运行到iOS模拟器、Android模拟器、H5、微信开发者工具、支付宝小程序Studio、百度开发者工具、字节跳动开发者工具、QQ开发者工具（底部8个终端选项卡代表8个终端模拟器）
官网图片

2. cube-ui (https://didi.github.io/cube-ui/)

使用少，没找到多少事例
团队维护
支持后编译
常规支持：多语言、自定义主题、按需引入
文档详细，组件齐全
扩展性强，可以方便地基于现有组件实现二次开发
适合移动端需要扩展的项目，或者引用框架部分源代码组合成自己的 ui 组件库

3. vant ui ( https://youzan.github.io/vant)

更多适用于移动商城开发,
vant ui有h5版和微信小程序版。其h5版只能用于h5，其微信小程序版（vant weapp）可用于微信和App

优势：版本升级最勤快，开发团队实力最强，组件数量足以应对交互不多的APP。

劣势：组件数量不是最多的，画面比较糙。

4. iView Weapp ( https://github.com/TalkingData/iview-weapp )

组件数量跟Vant相当，但是没有任何选择器，比如没有时间选择器，也没有树形选择器等等。

比较特色的是“抽屉”，也就是从屏幕某侧伸出来一个浮层，可以作为菜单使用。

优势：iView 的 webapp版本  主要用于微信小程序

劣势：缺少选择器组件，如果你很需要这个组件，那么你可能要放弃iView。

第四阶段（框架推荐）：

  推荐使用uniapp 使用广，生态完善，兼容性强

选型总结：

1. vant 更加适用于移动商城开发
2. iview weapp 主要还是用以PC端为主
3. uniapp 使用例子多，生态完善，兼容性强