关于uni-app的ui库、ui框架、ui组件
首先需要3个新认知:
- 传统vue的库,只是for web的,不能跨多端。
而微信小程序的库,虽然也可以用于app,但不能跨到h5和百度支付宝等其他小程序。
比如element-ui、mint-ui只能用于h5;比如vant ui、iview ui则分h5版和小程序版,h5版只能用于h5,而小程序版(vant weapp)只能用于微信和App。并且,它们的小程序版的功能不如h5版。 - 原生小程序的插件生态是不如uni-app的
- 首先除了微信小程序,其他几个平台的小程序几乎是没有三方组件和模板生态的。开发其他端小程序,得靠uni-app的生态
- 再说微信小程序生态,你之前在微信小程序平台上听说过的有名气的库(比如wxParse、wx-Echart),实际上在性能、功能、技术支持上,大多做的不如uni-app生态下的新库好。而vant、iview的weapp版,其功能、性能也均不如uni ui。
想要全端通用的ui框架,需要基于vue的无dom操作的库。
下图对跨端兼容性的说明比较清晰。
对于不能多端兼容的ui库,你可以在某些端使用。uni-app会保持开放性,不会限制。但是,官方仍然建议开发者使用多端ui,不管是为了多端,还是为了性能。
具体如下:
内置组件
首先要强调下内置组件的重要性。uni-app内置组件是最常用的,与微信内置组件相同。https://uniapp.dcloud.io/component/README。
请开发者不要把简单的button都使用三方组件库来做,那样会降低性能。
uni ui
内置组件之上,是官方扩展组件(uni ui),在组件的文档里有专门的扩展组件分类。https://uniapp.dcloud.io/component/README?id=uniui
扩展组件支持单个组件从插件市场下载,也支持npm整体引入uni ui,见http://ext.dcloud.net.cn/plugin?id=55
uni ui有如下优势:
- 优化逻辑层和视图层的通信折损:非H5端的各个平台,包括App和各种小程序,其逻辑层和视图层是分离的,两层之间通信交互会有折损,导致诸如跟手滑动不流畅。uni ui在底层会利用wxs等技术,把适当的js代码运行在视图层,减少通信折损,保证诸如swiperAction左滑菜单等跟手操作流畅顺滑
- 自动差量diff数据:在uni-app下,开发App和小程序,不需要手动setData,底层自动会差量更新数据。但如果使用了小程序组件,则需要按小程序的setData方式来更新数据,很难做到自动diff更新数据。
- 背景停止:很多ui组件是会一直动的,比如轮播图、跑马灯。即便这个窗体被新窗体挡住,它在背景层仍然在消耗着硬件资源。在Android的webview版本为chrome66以上,背景操作ui会引发很严重的性能问题,造成前台界面明显卡顿。而uni ui的组件,会自动判断自己的显示状态,在组件不再可见时,不会再消耗硬件资源。
- 纯vue语法:uni ui的引用、开发都是纯vue方式。而小程序组件的引用注册、开发都是小程序语法,两种语法混合在一个工程,写的也不舒服,维护也麻烦。
- 与uni统计自动整合:比如使用uni ui的导航栏组件,就不需要写统计的自定义事件来触发页面标题上报。uni统计会自动识别导航栏组件的标题。类似的,收藏组件、购物车组件,都可以免打点直接使用。
- uni ui会兼容Android 4.4等低端机webview。而小程序ui库,最低浏览器目标是小程序自带的webview,而不是系统webview,很容易在App侧低端机上造成浏览器兼容问题
- uni ui还支持nvue:App端,uni-app支持原生渲染,是一个改造过的weex原生渲染引擎,而uni ui是可以一套代码同时支持webview渲染和原生渲染的。为了兼容原生渲染,uni ui也做到了纯flex布局。
插件市场更多组件
插件市场,https://ext.dcloud.net.cn,有各种玲琅满目的组件、模板。
有零散的专攻某个功能的组件,也有成套的组件。
成套的ui库包括colorUI css库(颜值很高)、ThorUI组件库、graceUI商业支持库。
专业库方面,uni-app生态尤其有特点。
小程序开发以往常用到wxPaser、wx-echart等库,但其实这些库都不够好用或长久不更新。uni-app插件市场的富文本组件、图表组件在功能、性能和多端支持上,更有优势。
其他
- 其他基于vue的无dom库也支持,比如,zanui-mpvue、iview-mpvue。但注意这2个不是原作者维护
- 如果你仍坚持使用微信小程序的自定义组件ui,这里提供一个vant weapp版的集成示例http://ext.dcloud.net.cn/plugin?id=302。App端因为是一个增强版的小程序引擎,可以运行微信小程序的ui库,但其他端运行不了只为微信做的UI库。同时要注意,小程序自定义组件的性能不如vue组件。
- 如果你的nvue文件使用weex编译模式,也支持weex ui。三方商业ui库有graceUI weex版。
最后,请开发者务必牢记基础组件的作用,基础组件的性能是高于扩展组件的。
这和web开发不一样,web开发基本上不用基础组件,都是找一个ui库,全部组件都包含。因为html的基础组件在手机上是没法看的。
但uni-app体系不是这样,内置组件就是为手机优化的,uni-ui库全部都是扩展组件,不含基础组件。
我们的建议是:开发时首先用基础组件,基础组件不满足的地方,再引用扩展组件补充。为了性能考虑,不要把整个项目全部都构建在某个ui框架下。
关于uni-app的ui库、ui框架、ui组件相关推荐
- 【JavaScript UI库和框架】上海道宁与Webix为您提供用于跨平台Web应用程序开发的JS框架及UI小部件
Webix是Javascript库 一种软件产品 用于加速Web开发的 JavaScript UI库和框架 Webix用于跨平台Web应用程序开发的JS框架,为您提供102个UI小部件和功能丰富的CS ...
- 移动端前端框架UI库(Frozen UI、WeUI、SUI Mobile)
Frozen UI 自述:简单易用,轻量快捷,为移动端服务的前端框架. 主页:http://frozenui.github.io/ 开发团队:QQVIP FD Team Github:https:// ...
- 16个Javascript的Web UI库、框架及工具包
目前,几乎所有的富Web应用程序都依赖一套UI管理,程序库或框架(或工具包),他们不仅简化了应用程序开发,他们还提供兼容的.可靠的及很强交互性的用户界面.除此之外您会请求哪些呢? 当前,广泛应用的We ...
- json 微信小程序 筛选_GitHub - zhengyangkang/sl-filter: uni -app 一款使用简单的筛选组件,适配app、微信小程序、H5。...
sl-filter 筛选 筛选组件,组件名:sl-filter dcloud插件市场地址 sl-filter 简介 一款使用简单的筛选组件,适配app.微信小程序.H5. 感谢分享 效果图 并列菜单 ...
- 12 款最棒 Vue 开源 UI 库测评 - 特别针对国内使用场景推荐
本文首发:<12 款最棒 Vue 开源 UI 库测评 - 特别针对国内使用场景推荐> Vue 3 发布已经有一段时间了,就在刚刚过去的一年,各大组件库.框架纷纷对 Vue 3 做了优化和支 ...
- 2022浅谈前端八大UI库
之前在3月份的时候做过一个<浅谈前端八大UI库>的公开课,反馈还不错,当时就想着等有时间了,就把公开课讲的东西,组织成一个博客.这一等,就等了两个多月. 先说一下什么样的同学适合看这个博客 ...
- 15 个 JavaScript Web UI 库
新闻来源:speckboy.com 几乎所有的富 Web 应用都基于一个或多个 Web UI 库或框架,这些 UI 库与框架极大地简化了开发进程,并带来一致,可靠,以及高度交互性的用户界面.本文介绍了 ...
- 15 个 JavaScript Web UI 库 (转)
几乎所有的富 Web 应用都基于一个或多个 Web UI 库或框架,这些 UI 库与框架极大地简化了开发进程,并带来一致,可靠,以及高度交互性的用户界面.本文介绍了 15 个非常强大的 JavaScr ...
- 【版本更新】完整UI库Kendo UI发布R3 2017|附下载
2019独角兽企业重金招聘Python工程师标准>>> 通过70多个可自定义的UI组件,Kendo UI Professional可以创建数据丰富的桌面.平板和移动Web应用程序.通 ...
- muse-ui.css_Muse UI:适用于Vuejs 2.0的Material Design UI库
muse-ui.css Vuejs 2.0的Material Design UI库 (Material Design UI library for Vuejs 2.0) A Vue 2.0 and M ...
最新文章
- NeurIPS 2020 接收率创史低,千篇论文被摘要拒稿,官方:错误率只有 6%
- java-线程池序号一直增长
- webSocket使用心跳包实现断线重连
- 基于BindingSource的WinForm开发
- 启明云端分享|sigmastar debug工具使用说明(一)
- MySQLSyntaxErrorException: Specified key was too long; max key length is 767 bytes
- 拿来就能用!这本 Python 3.6 的实战书火爆了 IT 圈!
- 22. Python 模块2
- C# 笔记3 - 重载一系列像python那样的print()方法
- 浅谈UG学习的方法(适合初学者)
- 2.3安装工业相机SDK及测试
- 从HTTP的安全问题到HTTPS
- python 文件操作OS总结
- 大疆精灵4RTK连接千寻位置FindM Pro、FindCM
- 看理想:3万辆交付意味着什么?
- java修改mariadb数据_MariaDB更新数据
- Kubernetes--学习笔记-3-Kubernetes Web UI部署
- java实现汉诺塔游戏(递归)(附超详细易懂注释)
- Standard Deviation And Correlation
- PMP考试的分数线是怎么确定的(记分规则,成绩的演变)
热门文章
- 读的, 且经过美化, 能在所有 JavaScript 环境中运行, 并且应该和对应手写的 JavaScript 一样快或者更快.
- 完全数,丰沛数,不足数
- Python request如何做接口测试
- 使用Excel中的插入对象功能在Excel中插入Word文档
- 部署apollo-client到maven私服上时遇到的问题及排查过程
- 企二代继承者们如何再续辉煌
- matlab中实现文字和数字和混输出excel
- Dubbo (二) ---------- Dubbo 框架
- Ubuntu软件管理工具
- linux系统如何设置程序开机自启动