首先需要3个新认知:

  1. 传统vue的库,只是for web的,不能跨多端。
    而微信小程序的库,虽然也可以用于app,但不能跨到h5和百度支付宝等其他小程序。
    比如element-ui、mint-ui只能用于h5;比如vant ui、iview ui则分h5版和小程序版,h5版只能用于h5,而小程序版(vant weapp)只能用于微信和App。并且,它们的小程序版的功能不如h5版。
  2. 原生小程序的插件生态是不如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有如下优势:

  1. 优化逻辑层和视图层的通信折损:非H5端的各个平台,包括App和各种小程序,其逻辑层和视图层是分离的,两层之间通信交互会有折损,导致诸如跟手滑动不流畅。uni ui在底层会利用wxs等技术,把适当的js代码运行在视图层,减少通信折损,保证诸如swiperAction左滑菜单等跟手操作流畅顺滑
  2. 自动差量diff数据:在uni-app下,开发App和小程序,不需要手动setData,底层自动会差量更新数据。但如果使用了小程序组件,则需要按小程序的setData方式来更新数据,很难做到自动diff更新数据。
  3. 背景停止:很多ui组件是会一直动的,比如轮播图、跑马灯。即便这个窗体被新窗体挡住,它在背景层仍然在消耗着硬件资源。在Android的webview版本为chrome66以上,背景操作ui会引发很严重的性能问题,造成前台界面明显卡顿。而uni ui的组件,会自动判断自己的显示状态,在组件不再可见时,不会再消耗硬件资源。
  4. 纯vue语法:uni ui的引用、开发都是纯vue方式。而小程序组件的引用注册、开发都是小程序语法,两种语法混合在一个工程,写的也不舒服,维护也麻烦。
  5. 与uni统计自动整合:比如使用uni ui的导航栏组件,就不需要写统计的自定义事件来触发页面标题上报。uni统计会自动识别导航栏组件的标题。类似的,收藏组件、购物车组件,都可以免打点直接使用。
  6. uni ui会兼容Android 4.4等低端机webview。而小程序ui库,最低浏览器目标是小程序自带的webview,而不是系统webview,很容易在App侧低端机上造成浏览器兼容问题
  7. 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组件相关推荐

  1. 【JavaScript UI库和框架】上海道宁与Webix为您提供用于跨平台Web应用程序开发的JS框架及UI小部件

    Webix是Javascript库 一种软件产品 用于加速Web开发的 JavaScript UI库和框架 Webix用于跨平台Web应用程序开发的JS框架,为您提供102个UI小部件和功能丰富的CS ...

  2. 移动端前端框架UI库(Frozen UI、WeUI、SUI Mobile)

    Frozen UI 自述:简单易用,轻量快捷,为移动端服务的前端框架. 主页:http://frozenui.github.io/ 开发团队:QQVIP FD Team Github:https:// ...

  3. 16个Javascript的Web UI库、框架及工具包

    目前,几乎所有的富Web应用程序都依赖一套UI管理,程序库或框架(或工具包),他们不仅简化了应用程序开发,他们还提供兼容的.可靠的及很强交互性的用户界面.除此之外您会请求哪些呢? 当前,广泛应用的We ...

  4. json 微信小程序 筛选_GitHub - zhengyangkang/sl-filter: uni -app 一款使用简单的筛选组件,适配app、微信小程序、H5。...

    sl-filter 筛选 筛选组件,组件名:sl-filter dcloud插件市场地址 sl-filter 简介 一款使用简单的筛选组件,适配app.微信小程序.H5. 感谢分享 效果图 并列菜单 ...

  5. 12 款最棒 Vue 开源 UI 库测评 - 特别针对国内使用场景推荐

    本文首发:<12 款最棒 Vue 开源 UI 库测评 - 特别针对国内使用场景推荐> Vue 3 发布已经有一段时间了,就在刚刚过去的一年,各大组件库.框架纷纷对 Vue 3 做了优化和支 ...

  6. 2022浅谈前端八大UI库

    之前在3月份的时候做过一个<浅谈前端八大UI库>的公开课,反馈还不错,当时就想着等有时间了,就把公开课讲的东西,组织成一个博客.这一等,就等了两个多月. 先说一下什么样的同学适合看这个博客 ...

  7. 15 个 JavaScript Web UI 库

    新闻来源:speckboy.com 几乎所有的富 Web 应用都基于一个或多个 Web UI 库或框架,这些 UI 库与框架极大地简化了开发进程,并带来一致,可靠,以及高度交互性的用户界面.本文介绍了 ...

  8. 15 个 JavaScript Web UI 库 (转)

    几乎所有的富 Web 应用都基于一个或多个 Web UI 库或框架,这些 UI 库与框架极大地简化了开发进程,并带来一致,可靠,以及高度交互性的用户界面.本文介绍了 15 个非常强大的 JavaScr ...

  9. 【版本更新】完整UI库Kendo UI发布R3 2017|附下载

    2019独角兽企业重金招聘Python工程师标准>>> 通过70多个可自定义的UI组件,Kendo UI Professional可以创建数据丰富的桌面.平板和移动Web应用程序.通 ...

  10. 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 ...

最新文章

  1. NeurIPS 2020 接收率创史低,千篇论文被摘要拒稿,官方:错误率只有 6%
  2. java-线程池序号一直增长
  3. webSocket使用心跳包实现断线重连
  4. 基于BindingSource的WinForm开发
  5. 启明云端分享|sigmastar debug工具使用说明(一)
  6. MySQLSyntaxErrorException: Specified key was too long; max key length is 767 bytes
  7. 拿来就能用!这本 Python 3.6 的实战书火爆了 IT 圈!
  8. 22. Python 模块2
  9. C# 笔记3 - 重载一系列像python那样的print()方法
  10. 浅谈UG学习的方法(适合初学者)
  11. 2.3安装工业相机SDK及测试
  12. 从HTTP的安全问题到HTTPS
  13. python 文件操作OS总结
  14. 大疆精灵4RTK连接千寻位置FindM Pro、FindCM
  15. 看理想:3万辆交付意味着什么?
  16. java修改mariadb数据_MariaDB更新数据
  17. Kubernetes--学习笔记-3-Kubernetes Web UI部署
  18. java实现汉诺塔游戏(递归)(附超详细易懂注释)
  19. Standard Deviation And Correlation
  20. PMP考试的分数线是怎么确定的(记分规则,成绩的演变)

热门文章

  1. 读的, 且经过美化, 能在所有 JavaScript 环境中运行, 并且应该和对应手写的 JavaScript 一样快或者更快.
  2. 完全数,丰沛数,不足数
  3. Python request如何做接口测试
  4. 使用Excel中的插入对象功能在Excel中插入Word文档
  5. 部署apollo-client到maven私服上时遇到的问题及排查过程
  6. 企二代继承者们如何再续辉煌
  7. matlab中实现文字和数字和混输出excel
  8. Dubbo (二) ---------- Dubbo 框架
  9. Ubuntu软件管理工具
  10. linux系统如何设置程序开机自启动