首先需要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框架下。