Application practice of cross-platform mobile framework UniApp

introduction

The CRM transformation project requires the development of a mobile app that covers the main business capabilities of the online business hall (web version). The overall development cycle of the project is short, and it is required to support multiple platforms (IOS, Android, H5, etc.). Each platform requires relatively consistent display effects and user experience. The adaptation effects and SDK access of multiple terminals and multiple sizes of devices have become pain points. It is imperative to introduce a cross-platform Hybrid (hybrid development) framework.

1. Evolution of cross-platform technology on mobile terminals

In the past, the earliest hybrid development represented by Cordova mainly relied on WebView. However, WebView is a heavy control that easily causes memory problems, and the performance of complex UI displayed on WebView is not ideal. The communication between JS and Native code requires the use of JSBridge for context switching, which will reduce some performance.

Cordova principle diagram

It was not until Facebook launched the revolutionary ReactNative technology that WebView components were abandoned and JavaScriptCore was used as a bridge to convert JS calls to Native calls, sacrificing only a small part of the performance of API conversion. This was a big step forward in cross-platform development. The construction idea of ​​the UniApp framework is derived from this, and the introduction of Vue Runtime deep customization further optimizes rendering performance and user experience. The VueJS universal syntax it uses also solves the problem that the code of each React Native platform is too different and requires more native knowledge.

React Native and UniApp principle diagram

2. Introduction and application of UniApp framework

1. What is UniApp

uni-app is a front-end framework for developing cross-platform applications using Vue.js. Developers write a set of codes that can be compiled to multiple platforms such as IOS, Android, H5, and mini-programs. It is launched and operated by DCloud (Digital Paradise).

2. Why UniApp

Compared with other mobile cross-platform frameworks (such as Cordova/ReactNative/NativeJS), UniApp has obvious advantages in cross-platform flatness, expansion flexibility, performance experience, surrounding ecology, development cost and other aspects.

(1) A large number of cross-platforms: A set of code can be compiled and published to multiple platforms such as iOS, Android, H5, and mini-programs, and the cross-platform flatness is high, the display effect of the application is almost consistent, and it can truly be implemented in productivity. This is the biggest advantage of UniApp, which is far superior to other cross-platform frameworks.

(2) Excellent performance experience: UniApp is a hybrid framework with better experience and faster loading of new pages. In addition, the App supports weex native rendering, which can achieve smoother animation effects. In comparison, the Cordova framework that relies on WebView is lacking in performance.

(3) Open and rich ecosystem: UniApp's plug-in market integrates nearly a thousand third-party plug-ins, and various wheels are ready to use; at the same time, because UniApp's interface API adopts the mini-program specification, various SDKs in the WeChat ecosystem can be directly used for cross-platform apps. In comparison, the community activity and data documentation of the React Native framework are relatively limited in this regard.

(4) Low development cost: Development tasks that were previously completed by N platform developers (IOS/Android/H5) are now implemented using a common front-end technology stack, significantly reducing the costs of R&D, maintenance, and testing.

At the same time, the HBuilderX tool combined with UniApp can eliminate the need for terminal debugging, visually create projects, visually install components and extend compilers, and the development experience of R&D personnel has also become better, allowing them to write code more efficiently.

3. Functional framework diagram

UniApp not only supports cross-platform components (the green part in the figure), but also supports customized development of special functions under a certain platform. By introducing the personalized UI components of the platform through conditional compilation or calling proprietary APIs, customized requirements under a single platform can be realized without affecting or interfering with other platforms.

4. Application Lifecycle

UniApp supports the following application lifecycle functions:

5. How to use UniApp

(1) Download the development tool: HBuilderX

App development version: http://www.dcloud.io/hbuilderx.html

(2) After installing and opening the IDE, click File -> New -> Project in the toolbar.

(3) Select uni-app, enter a project name, such as uni-test, and click Create to successfully create the UniApp application. Click Hello uni-app in the template to experience the official example.

(4) Enter the project and click Run -> Run in Browser/Device/Simulator on the toolbar. You can also select the mini program to run in WeChat Developer Tools.

(5) Project directory structure

6. Development Specifications

(1) The page file follows the Vue single-page component specification, and the structure in Vue still uses three top-level code blocks

https://vue-loader.vuejs.org/zh/spec.html#%E7%AE%80%E4%BB%8B

(2) Component tag VUE general template writing method, after compilation, rendering with iOS or Android native UI controls

(So ​​standard HTML tags cannot be used, and JS operations on DOM should be avoided as much as possible)

https://uniapp.dcloud.io/component/README

(3) Interface capability WeChat applet specification, the interface address prefix is ​​modified from wx to uni

https://uniapp.dcloud.io/api/README

(4) Style control: Using upx as the unit of size, UniApp specifies the base width of the screen as 750 upx and uses flex layout

https://uniapp.dcloud.io/frame?id=%E9%A1%B5%E9%9D%A2%E6%A0%B7%E5%BC%8F%E4%B8%8E%E5%B8%83%E5%B1%80

Summarize

Any framework must first serve the actual business needs, and the selection of technology must also be based on the technical direction and specific circumstances of the R&D team members. For project construction, there is no best technical framework, only the most suitable one. In general, UniApp is a very excellent mobile cross-platform framework, which can withstand scrutiny in terms of UI expressiveness, performance experience, and ecological maturity. From its launch to the present, the industry's acceptance attitude has been relatively recognized and the feedback has been relatively good. It is more suitable for this era of short, flat, fast, componentized, small and beautiful projects and products, so it is recommended for everyone to learn and apply.