移动端常用的四个框架

ゝ一纸荒年。 2023-07-09 07:25 15阅读 0赞

1：weUI

官方网址：https://weui.io/

官方介绍：WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjU0NDQ2_size_16_color_FFFFFF_t_70]

图片发自简书App  
优点：  
做为开发者的我们可以不用写太多css，直接拿过来就可以用。组件都有点击态，大大增加了用户的体验好感，高清屏幕下 border : 0.5

2：Frozen UI  
专注于移动web的UI框架,基于腾讯手机QQ规范… FrozenUI提供的CSS组件是目前QQ会员前端开发组所用的通用样式库

官方网址：http://frozenui.github.io/  
http://frozenui.github.io/components.html\#poptips

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjU0NDQ2_size_16_color_FFFFFF_t_70 1]  
图片发自简书App  
优缺点：  
基础样式效果简单色调清爽

3：MUI  
最接近原生APP体验的高性能前端框架，可多端发布到Appstore、Android市场、浏览器、微信公众号、百度直达号及流应用

官方网址：http://dev.dcloud.net.cn/mui/

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjU0NDQ2_size_16_color_FFFFFF_t_70 2]  
图片发自简书App  
优缺点：这个框架给我的吸引之处就是它的 UI 是以 IOS 为 主体设计的，当然它也补充了android特有UI样式。并且MUI官方声称用来开发深入以后发现拿它做 APP 还能够提高用户使用流畅度但网址上对它的评价是一种深入骨髓的廉价感。

4：SUI Mobile

介绍 SUI Mobile 是一套基于 Framework7 开发的UI库。它非常轻量、精美，阿里前端团队出品的SUIMobile的前端UI库，方便迅速搭建手机H5应用,也非常适合开发跨平台Web App

官方网站 http://m.sui.taobao.org/getting-started/  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjU0NDQ2_size_16_color_FFFFFF_t_70 3]

图片发自简书App  
优缺点：  
兼容性好，能兼到 iOS 6.0+ 和 Android 4.0+  
风格：炫酷的iOS风格功能强大的组件轻量的UI库，开始使用，只需要几个简单的步骤

缺点：sui mobile会和jquery冲突:后期维护/编写都很麻烦，开发人员以及离职，大半年都没有维护了

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjU0NDQ2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200228112843878.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjU0NDQ2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjU0NDQ2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200228112921884.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjU0NDQ2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjU0NDQ2_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020022811293240.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjU0NDQ2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjU0NDQ2_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200228112943896.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NjU0NDQ2,size_16,color_FFFFFF,t_70