The Uni-App framework has been around for over a year, and the number of developers using uni-App is growing by the day. Because uni-App is a cross-end framework, most of us use it to cross multiple ends at the same time, so uni-App is a good choice for now.

Uni-app is definitely a rising star, but one of the problems is that there aren’t many options for the UI component libraries that come with it. And we develop applications, component library is an indispensable tool to assist development.

Is there a good and functional component library that we can use in UNI-app?

Component library selection

The first question is how do YOU choose a UI component library?

Vue component library

Since Uni-App is the framework for developing all front-end applications based on VUE, the first thing we must think about is whether the VUE component library is available.

First exclude the PC side of the component library such as ElementUI, iView, we can choose from the mobile side of the VUE component library there are many. Examples include Mint UI, Vant, Mui, Vonic, etc.

Uni-app is developed based on VUE, but it also follows the development specifications of applets.

So just like applets, uni-app also has no Document and window objects.

And we see this in the official documentation:

Uni-app only supports vUE single file components (.vue components). Others are: dynamic components, custom render, and<script type="text/x-template">String templates, etc., are not supported on non-H5 ends.

This prevents us from using many of the usual front-end development operations in UNI-App. Therefore, a purely front-end vUE component library is a bit difficult to use in our Uni-app. You may need to change a lot of code to make uni-App work, or not work at all.

Applets custom component library

Since the vUE component library cannot be used, can the applets component library support it?

The answer is yes, applets are officially supported. See applets support for details.

However, it is important to note that while applets are supported, it does not mean that they will run on all platforms. We chose uni-App to cross ends in the first place, but using the applet component library is only available on the corresponding applet platform, which is obviously not what we expected.

If only compatible with wechat small program platform here recommend two easy to use component library:

  • Vant Weapp
  • iView Weapp

Uni – app component library

If you want to have fun using a component library in uni-App, it’s easier to use a component library developed using the Uni-App framework.

The good thing is uni-App has a plugin market that gives us a lot of components, but there aren’t a lot of systematic component libraries.

The only choice is the official Uni-UI component library.

uni-ui

At the beginning, using Uni-UI was a long story, and it always felt like a lack of sincerity.

But with the iterations of Uni-App, it seems that officials are starting to think about uni-UI.

A change before the BUG, insufficient performance of the distress. At present, the components in UNI-UI are still being updated and optimized, which can basically maintain the basic development of our project.

Now why do I recommend using UNI-UI instead of using the component libraries of the other three parties?

Across the ability

As we mentioned above, using the VUE component library is basically impossible unless you have the ability to modify a large number of components to be uni-app compatible, so we don’t recommend it for now, see the official update and support for vue front-end components.

Applets are supported, but only for platforms. The mini-program libraries, such as Vant syndrome and iView Syndrome, can only operate on the Micro-program platform of wechat, and the cross-end capacity is far from meeting our needs.

Uni-ui, after all, is the son of Uni-App. Although it has some disadvantages, it also has its own advantages, which is reflected in the cross-end capability.

Uni-ui components are multifaceted and adaptive, with many applets platform differences or bugs smooth-out at the bottom.

The UNI-Swiper-Action component, for example, uses WXS technology with better interactive experience in APP, H5 and wechat applet. However, other applet ends that do not support WXS use JS simulation to achieve similar effects, enabling us to cross ends while maintaining performance. And above all we developers just take the components out of the box.

Not only that, but the uni-UI components support native rendering of NVUE, so mom doesn’t have to worry about me running out of components in NVUE.

Update the data

Although Uni-App supports applets custom components. However, the component library of the small program customized components all need to manually update data using setData, which is easy to cause performance problems in the case of large data volume or high frequency data update.

Uni-ui is a VUE component, and the underlying uni-App engine automatically diff updates data. Even in the case of big data and high-frequency data updates, the performance will be much better than manual setData.

Many VUE components in the plug-in market have this feature.

Optimized logic layer and view layer communication damage

At present, both the webview rendering of small programs and APP are separated from the logical layer and the view layer.

This involves a communication problem between the logical layer and the view layer. For example, drag a trackable component in the view layer. Due to the loss of communication, it is difficult to follow the real-time operation with JS monitoring.

You need to use CSS animation and the underlying technologies like WXS and BindingX. However, these technologies are complex, so UNI-UI encapsulates UI components that require hand-tracking, such as the uni-swiper-Action left-swipe menu, for a high-performance interactive experience.

To summarize

While uni-UI may not be perfect in some ways right now, it is definitely the preferred option in the Uni-App framework.

In terms of uni-UI’s cross-terminal capabilities and performance, there is currently no better alternative to uni-UI in the area of applets and hybrid apps.

If you have any suggestions or great implementations, please go to Uni-UI github to raise Issues and PR and maintain a good UI component library together.

Uni – UI Component library github address: github.com/dcloudio/un…

Tips

  • Part of the above analysis comes fromuni-uiThe official instructions, for personal use, are also quite objective
  • If there is any mistake, or description error, please welcome to correct