How to choose a suitable UI component library in uni-app

uni-appThe framework has been released in the blink of an eye for over a year,使用uni-appof developers are also growing.因为uni-appis a cross-end framework,So we mostly use it for a set of code across multiple terminals at the same time,选择uni-app It's a better choice right now.

无疑,uni-app是一个冉冉升起的新星,A problem that also brings us is that it is matched with it UI Component libraries don't have that many options.while we develop applications,The component library is also an indispensable tool for auxiliary development.

So is there a useful one,And the performance is relatively good component library for us inuni-app中使用呢？

1

组件库选择

首先一个问题就是UIHow to choose a component library？

1

vue 组件库

因为uni-app是基于vue开发所有前端应用的框架,Then we must first think ofvueIs the component library available?.

首先排除PCcomponent library such asElementUI、iview这些,Available for our choice of mobile vue There are also many component libraries.

比如说 Mint UI 、Vant 、Mui、vonic等等.

我们知道uni-app虽然基于vue开发,But at the same time, it must follow the development specifications of small programs.

所以像小程序开发一样,uni-appsame nodocument、window对象.

And we see that it is mentioned in the official documentation:

uni-app只支持vue单文件组件（.vue组件）.其他的诸如：动态组件,自定义 render,和 <script type="text/x-template"> 字符串模版等,在非H5端不支持.

This leads to we can't inuni-appuse many operations that are usually used in front-end development.So pure front-end development vueComponent library in ouruni-appuse in,it seems a little difficult.May require many code changes,才能在uni-app中正常运行,Or simply can't run.

2

Mini Program Custom Component Library

既然说 vue Component library cannot be used,So can the applet component library support it? ？

答案是可以,The applet component is officially supported,See applet component support for details.

但是需要注意的是,Although applet components are supported,It doesn't mean that it will work on all platforms.我们选择 uni-app It is to the end,Instead use the applet component library,But it can only be used on the corresponding applet platform,This is obviously not what we expected.

If it is only compatible with the WeChat applet platform, here are two useful component libraries recommended：

• Vant Weapp
• iView Weapp

3

uni-app 组件库

那么想要在 uni-app Happy using the component library,还是使用 uni-app The component library developed by the framework is easier to use.

好在 uni-app There is a plugin market,Provides us with a lot of components,But after all, there are not many systematic component libraries..

That's the only official one we can choose from uni-ui 组件库.

2

uni-ui

刚开始的时候,使用 uni-ui 简直是一言难尽,always feel lack of sincerity.不过随着 uni-app 的版本迭代,It seems that the official uni-ui In the effort.

一改之前的 BUG 不断,Dilemma of insufficient performance.also started to catch up,目前 uni-ui Internal components are constantly being updated、优化,Basically can maintain the basic development of our project.

Now why do I recommend everyone to use uni-ui Instead of using the other three sides of component library？

1

跨端能力

above we have mentioned,使用 vue 组件库,基本上是行不通的,unless you have the ability to retrofit a lot of components,来兼容 uni-app ,So we do not recommend using at present,Watch the official update later,以及对 vue Front-end component support .

The components of the applet can be supported,But it only supports the corresponding platform.例如 Vant Weapp 、iView Weapp Other small program component libraries can only run on the WeChat applet platform,Cross-end capabilities are far from meeting our needs.

而 uni-ui 毕竟是 uni-app 亲儿子,There is no enough ability, though,But it also has its own advantages,This is reflected in the cross-end capability.

uni-ui The components are multi-terminal adaptive,The bottom layer will smooth out the differences of many small program platforms or bug.

比如 uni-swiper-action 组件,在 app、h5It will be better to use the interactive experience with WeChat applet wxs 技术,但在不支持 wxs of other applet terminals will use js Simulation achieves a similar effect,Make us across the at the same time,performance is guaranteed.And these above our developers only need to use the components out of the box.

不仅如此,uni-ui The components also support nvue 的原生渲染,Mom finally don't have to worry about me nvue No components can be used.

2

更新数据

虽然uni-app支持小程序自定义组件.But the component library of the applet custom component needs to use setData手动更新数据,在大数据量时、或高频更新数据时,很容易产生性能问题.

而uni-ui属于vue组件,uni-app引擎底层自动diff更新数据.Even when encountering big data and frequently updated data,performance will be better than manualsetData要好很多.

There are many in the plugin market vue 组件都具备这个特点.

3

Optimize the communication loss between the logic layer and the view layer

At present, whether small programs orapp的webview渲染,All are separated from the logic layer and the view layer.

This will involve a communication problem between the logic layer and the view layer.For example, drag a followable component in the view layer,due to loss of communication,用 js It is difficult to monitor the operation in real time.

这时就需要使用cssAnimations and those provided by the bottom layer of the platformwxs、bindingx等技术.However, these techniques are more complex,所以uni-uiin need of manual operationuipackaged in the component,比如uni-swiper-actionThe list items left menu,These techniques are used right under the hood,High-performance interactive experience.

3

总结一下

尽管现在 uni-ui may not be perfect in some ways,但是在 uni-app The framework is undoubtedly the preferred choice.

无论是 uni-ui cross-end capability or performance,在小程序和混合 app 领域,Not yet uni-ui 更好的选择.

如果大家有什么更好的建议,or awesome implementation,都可以到 uni-ui 的 github 上提 Issues 和 PR,together to maintain a useful UI 组件库.