uni-app API interface & extension component (uni-ui)

Fengge’s original uni-app video tutorial:

2023 version of uniapp from entry to success video tutorial (Java backend no nonsense version), hot update..._bilibili_bilibili 2023 version of uniapp from entry to success video tutorial (Java backend no nonsense version), hot update Updating... A total of 23 videos, including: Lecture 1 Introduction to uni-app, Lecture 2 uni-app environment construction, Lecture 3 HelloWorld implementation of uni-app, etc. For more exciting videos from UP, please follow UP account. icon-default.png?t=N7T8The js API of https://www.bilibili.com/video/BV1eG411N71c/uni-app consists of two parts: the standard ECMAScript js API and the uni extension API.

Standard ECMAScript js is only the most basic js. The browser extends window, document, navigator and other objects based on it. The mini program also extends various wx.xx, my.xx, and swan.xx APIs based on standard js. node also extends fs and other modules.

uni-app extends the uni object based on ECMAScript, and the API naming remains compatible with the mini program.

Documentation: API Overview | uni-app official website

uni-ui is a cross-end UI library provided by DCloud. It is a cross-end UI framework based on vue components, flex layout, and no DOM.

uni-ui does not include basic components, it is a supplement to basic components .

uni-ui product features

1. High performance

So far, uni-ui is the performance benchmark in the field of small programs and hybrid apps.

  • Automatic delta update data

Although uni-app supports mini program custom components, all mini program UI libraries can be used. However, the UI library of the custom component of the mini program needs to use setData to manually update the data. When the amount of data is large or the data is updated frequently, performance problems can easily occur.

While uni-ui is a vue component, the bottom layer of the uni-app engine automatically updates data through diff. Of course, in fact, many vue components in the plug-in market have this feature.

  • Optimize communication loss between logic layer and view layer

Non-H5, whether it is a mini program or an app, whether it is the app's webview rendering or native rendering, all are separated from the logic layer and the view layer. There is a problem of loss of communication between the logic layer and the view layer. For example, if you drag a component that can be followed in the view layer, due to the loss of communication, it is difficult to follow it in real time using js monitoring.

At this time, you need to use css animation and wxs, bindingx and other technologies provided by the bottom layer of the platform. However, these technologies are relatively complex, so they are encapsulated in uni-ui. For UI components that require manual operation, such as the swiperaction list item left-sliding menu, these technologies are used at the bottom to achieve a high-performance interactive experience.

  • background stop

Many UI components are constantly moving, such as carousels and marquees. Even if this form is blocked by the new form, it is still consuming hardware resources in the background layer. When the Android webview version is chrome66 or above, operating the UI in the background will cause serious performance problems, causing the front-end interface to be obviously stuck.

Uni-ui components will automatically determine their display status and will no longer consume hardware resources when the component is no longer visible.

2. Full end

The components of uni-ui are all multi-terminal adaptive, and the bottom layer will smooth out many differences or bugs in the small program platform.

For example, the navbar component of the navigation bar will automatically handle the status bar on different ends; for example, the swiperaction component will use wxs technology with a better interactive experience on apps and WeChat mini programs, but other mini programs that do not support wxs will use js to simulate similar Effect.

uni-ui also supports nvue native rendering.

uni-ui also supports widescreen devices such as PCs. You can access https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge through a PC browser to experience

3. Style expansion

The default style of uni-ui is medium, which is consistent with the style of the basic components of uni-app. But it supports uni.scss , which can easily expand and switch application styles.

UI is a product with very divergent needs. DCloud officials have no intention of using uni-ui to suppress the space of third-party UI plug-ins, but the official is obliged to provide an open source benchmark for everyone in terms of performance and cross-terminal aspects.

We welcome more excellent UI components to appear, and we also welcome more people to contribute uni-ui theme styles to meet the needs of more users.

4. Cooperate with uniCloud

Many components in uni-ui are connected to uniCloud, which can greatly improve development efficiency.

5. Automatically integrate with uni statistics to eliminate the need for management

uni statistics is an excellent multi-terminal statistics platform, see tongji.dcloud.net.cn .

In addition to viewing the entire report in one report, another important feature of it is that it requires no management. For example, using uni-ui's navbar title bar, collection, shopping cart and other components can realize automatic management and statistics of various behavioral data such as page titles. Of course you can also turn off uni statistics, this is not mandatory.

6. uni-ui complies with the full set of DCloud component specifications

Including easycom, uni_module, datacom, all follow.

Guess you like

Origin blog.csdn.net/caoli201314/article/details/135302698