What is UNI-app

Uni-app is a front-end development framework released by DCloud to address some of the pain points in front-end development.

The pain?

Pain in the front end platform too much. Only small program has micro channel small program has micro channel, Alipay, Nails, Baidu, headlines, QQ… And so on and so on.

So here comes uni-App.

Using the UNI-App framework, we can write a single set of code that can be distributed to multiple platforms. Multiple platforms how many platforms? To be specific, it is (wechat/Alipay/Baidu/Toutiao /QQ/ Kuaofan/Dingpin/Taobao) small program, fast application, H5, Android App, iOS App, how bad is it?

Of course, uni-app is not the only one that can achieve similar functions, such as Taro from JD.com, but I still recommend uni-app, which will be explained later.

2. The origin of UNI-App

Before we get to Uni-App, let’s talk about its predecessor: the 5+App. Uni-app 5+App is similar to uni-App, but not as powerful as uni-App. It can be used to create Android and iOS apps and H5 apps, but because it is a multi-page App framework, it has been abandoned in the wave of single-page apps. But it is certainly an important part of uni-App’s development.

Uni-app was first released in January 2018, why this time? That’s where applets come in. As we all know, small program is wechat officially launched in 2017, since then out of control, each platform of small programs mushroomed out, straight teach people dazzling, straight teach the development of people heartbroken.

Wechat is the first platform to release small programs, but this concept has already existed. In 2013, Baidu officially put forward the concept of “light application” at baidu World Conference. In 2015, DCloud officially commercialized its own “small program” called “streaming application”, and 360 mobile assistant was the first to access streaming application.

In September 2015, DCloud pushed wechat team to carry out small program business, but it did not access the alliance standard, but customized its own standard. Later, as we all know, major manufacturers launched small program platforms, some of which connected to the alliance standard, but some still made their own standards, which led to the difficulties of developers. As a result, DCloud uses uni-App as a framework to unify standards across platforms and launches in 2018.

3. How to use UNI-App

Uni-app is developer-friendly in general, it is based on vUE syntax, but Template is based on applets and the project structure is similar to applets, so it is easy for front-end developers to get started. In addition, uni-app development needs to be coupled with their editor HBuilderX, which makes it easy to do a lot of things and greatly improves development efficiency. Below is a screenshot of creating a uni-APP standard project and project directory.

3.1 Conditional Compilation

As mentioned, UNI-App is compatible with multiple platforms, so we need to conditionally compile our code for different platform scenarios.

Conditional compilation is marked with special comments that are used to compile code for different platforms at compile time. It starts with #ifdef or #ifndef plus %PLATFORM% and ends with #endif.

#ifdef = if defined, meaning only exists on a platform; #ifndef = if not defined; %PLATFORM% indicates the PLATFORM name. Such as:

// #ifdef APP-PLUS
console.log("This is a piece of code that only works in APP.")
// #endif
// #ifndef MP-ALIPAY
console.log("This is a code that is only invalid in alipay mini program.")
// #endif
Copy the code

Note that conditional compilation works not only in JS, but also in HTML, CSS, and even JSON files, but in different scenarios you need to use the corresponding annotation notation. In addition, Android and iOS platforms do not support conditional compilation to distinguish them. To distinguish Android and iOS platforms, you need to call uni.getSystemInfo to obtain platform information.

Use HTML 5 + 3.2

What is HTML5+?

HTML5+ is a specification of the HTML5 Industry Alliance. We know that our mobile phone has this big powerful function, and the traditional JS call way in the call mobile phone native ability is a bit inadequate, such as: such as management of the operating environment, access to the current operating environment information, and other procedures for communication.

Uni-app Has a built-in HTML5+ engine on the app side, allowing JS to directly invoke rich native capabilities.

Note that there is no HTML5+ extension specification for applets and H5 platforms, so conditional compilation should be used when uni-app calls HTML5+ extension specification. Otherwise, the plus is not defined error occurs when running h5 or small programs.

3.3 use nvue

Why uni-App is different from ordinary Webapps, we know that ordinary Webapps are difficult to pass the approval of the mobile app market, because ordinary Webapps are essentially run in the browser environment, and the experience of using the app environment is not good. Uni-app has a native rendering engine built into the app side based on weeX improvements to provide native rendering capabilities. Make our APP experience comparable to that of native apps.

Uni-app has two modes of pages. On the App side, there is a vUE page ending with.vue, which is rendered by WebView. Nvue pages that end in.nvue are native Vue pages that use native rendering. We can use different page modes for different pages in the same APP, or even use both modes on the same page.

Although NVUE pages can also be compiled to multiple ends and output to small programs and H5 ends, some CSS writing methods of NVUE are limited. For example, the page layout can only use Flex layout, and the default main axis of Flex layout is Column, leading to trouble for developers. Therefore, You don’t need NVUE if you’re not developing apps on the APP side, or if you’re not concerned about the performance of apps on the APP side.

Nvue pages perform better than VUE pages, both in terms of performance and smoothness, and have more built-in components than VUE pages.

HBuilder X 3.1.0, nvue add render-whole attribute, type Boolean.

  • When render-whole=”true” is set, the view layer communicates the information structure of the component and its children with the native layer at once, improving the layout rendering performance by redrawing the entire node.
  • When render-whole=”false”, the view layer will be redrawn as child nodes communicating with the native layer one by one. The overall render time may be longer.
<! - case - >
<swiper :render-whole="true"></swiper>
Copy the code

3.4 Widescreen adaptation scheme

Uni-app is mobile-first and is primarily a solution for all applications on mobile, but sometimes we need to accommodate larger devices for our applications. Uni-app 2.9 provides PC and other widescreen adaptation solutions.

The widescreen adaptation mentioned here is slightly different from the screen adaptation in our traditional sense.

Let’s start with this picture:As can be seen in the figure, the view we see on a normal mobile phone is the main window in the middle.uni-appOn the basis of the main window, leftWindow, rightWindow and topWindow are extended in the left and right directions respectively. These three Windows are not visible under normal circumstances, and need to be configured in pages. Json, and can be displayed or hidden when the device width meets certain conditions. In addition, the three Windows are separate, and switching pages can be refreshed within their own Windows rather than the entire screen.

{
    "globalStyle": {},"topWindow": {
        "path": "responsive/top-window.vue".// Specify the topWindow page file
        "style": {
            "height": "44px"}},"leftWindow": {
        "path": "responsive/left-window.vue".// Specify the leftWindow page file
        "style": {
            "width": 300}},"rightWindow": {
        "path": "responsive/right-window.vue".// Specify the rightWindow page file
        "style": {
            "width": "calc(100vw - 400px)" // Page width
        },
        "matchMedia": {
            "minWidth": 768 // When the window width is larger than 768px}}}Copy the code