如何在uni-app中选择一个合适的UI组件库

  • Post author:
  • Post category:其他



uni-app

框架转眼已经发布了一年多,使用

uni-app

的开发者也是与日俱增。因为

uni-app

是一个跨端框架,所以我们大多使用它就是为了同时一套代码跨多端,选择

uni-app

可以算是眼下一个比较好的选择。

无疑,

uni-app

是一个冉冉升起的新星,同样带给我们的一个问题就是与之配套的 UI 组件库却没有那么多的选择。而我们开发应用,组件库又是一个不可或缺的辅助开发的利器。

那么有没有一个好用,且性能又比较不错的组件库供我们在

uni-app

中使用呢?

1


组件库选择


首先一个问题就是UI组件库怎么选择?


1


vue 组件库

因为

uni-app

是基于

vue

开发所有前端应用的框架,那么我们肯定首先想到的就是

vue

组件库可不可以用。

首先排除PC端的组件库如

ElementUI



iview

这些,可供我们选择移动端的 vue 组件库也有很多。

比如说

Mint UI



Vant



Mui



vonic

等等。

我们知道

uni-app

虽然基于

vue

开发,但是同时还要遵循小程序的开发规范。

所以像

小程序开发

一样,

uni-app

中同样的没有

document



window

对象。


而且我们看到官方文档中有提及到:

uni-app只支持vue单文件组件(.vue组件)。其他的诸如:动态组件,自定义 render,和

<script type="text/x-template">

字符串模版等,在非H5端不支持。

这就导致我们不能在

uni-app

中使用许多通常前端开发中的操作。所以纯前端开发的

vue

组件库在我们的

uni-app

中用起来,就显得有些困难了。可能需要改动许多代码,才能在

uni-app

中正常运行,或者干脆跑不起来。


2


小程序自定义组件库

既然说 vue 组件库不能使用,那么小程序组件库可以支持么 ?

答案是可以,小程序组件是得到官方支持的,详看小程序组件支持。

但是需要注意的是,虽然支持了小程序组件,并不是说就能在全平台都能运行。我们选择

uni-app

本来就是为了跨端,而使用小程序组件库,却只能在对应的小程序平台使用,这显然也不再我们的预期内。


如果只兼容微信小程序平台这里推荐两个好用的组件库:

  • Vant Weapp
  • iView Weapp


3


uni-app 组件库

那么想要在

uni-app

中开心的使用组件库,还是使用

uni-app

框架开发的组件库用起来更顺手。

好在

uni-app

有插件市场,给我们提供了很多的组件,但总归没有太多成体系的组件库。


那可供我们选择的只有官方的

uni-ui

组件库。

2


uni-ui

刚开始的时候,使用

uni-ui

简直是一言难尽,总感觉诚意不足。不过随着

uni-app

的版本迭代,似乎官方也开始在

uni-ui

上花心思了。

一改之前的

BUG

不断,性能不足的窘迫。也开始奋起直追,目前

uni-ui

内组件还在不断的更新、优化,基本上可以维持我们项目的基本开发。

现在我为什么要推荐大家使用

uni-ui

而不是使用其他三方的组件库呢?


1


跨端能力

上述我们我们已经提到,使用

vue

组件库,基本上是行不通的,除非你有能力改造大量组件,来兼容

uni-app

,所以目前我们不推荐使用,看之后官方的更新,以及对

vue

前端组件的支持 。

小程序端的组件是可以支持的,但是也仅仅是支持对应平台。例如

Vant Weapp



iView Weapp

等小程序组件库也只是能在微信小程序平台运行,跨端能力远远满足不了我们的需求。



uni-ui

毕竟是

uni-app

亲儿子,能力虽有些不足,但是它也有自己的有优点,这点就表现在跨端能力上。


uni-ui

的组件都是多端自适应的,底层会抹平很多小程序平台的差异或

bug

比如

uni-swiper-action

组件,在

app



h5

和微信小程序上会使用交互体验更好的

wxs

技术,但在不支持

wxs

的其他小程序端会使用

js

模拟达到类似效果,使我们在跨端的同时,而性能还能得到保障。而以上这些我们开发者只要拿来组件开箱即用。

不仅如此,

uni-ui

的组件还支持了

nvue

的原生渲染,妈妈终于不用担心我在

nvue

中没有组件可以用了。


2


更新数据

虽然

uni-app

支持小程序自定义组件。但小程序自定义组件的组件库都需要使用

setData

手动更新数据,在

大数据

量时、或高频更新数据时,很容易产生性能问题。



uni-u

i属于

vue

组件,

uni-app

引擎底层自动

diff

更新数据。哪怕遇到大数据和高频更新数据时,表现都会比手动

setData

要好很多。


在插件市场里众多

vue

组件都具备这个特点。


3


优化逻辑层和视图层通讯折损

目前不论小程序还是

app



webview

渲染,全都是逻辑层和视图层分离的。

这样就会涉及到逻辑层和视图层的一个通讯问题。比如在视图层拖动一个可跟手的组件,由于通讯的损耗,用

js

监听很难做到实时跟手的操作。

这时就需要使用

css

动画以及平台底层提供的

wxs



bindingx

等技术。不过这些技术都比较复杂,所以

uni-ui

在在需要跟手式操作的

ui

组件里做了封装,比如

uni-swiper-action

列表项左滑菜单,就在底层使用了这些技术,实现了高性能的交互体验。

3


总结一下

尽管现在

uni-ui

可能在某些方面还不是很完美,但是在

uni-app

框架中无疑是优先的选择。

无论是

uni-ui

的跨端能力还是性能,在小程序和混合

app

领域,暂时还没有比

uni-ui

更好的选择。

如果大家有什么更好的建议,或者很棒的实现,都可以到

uni-ui



github

上提 Issues 和 PR,共同维护起来一个好用的 UI 组件库。



版权声明:本文为qq_47443027原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。