Brief introduction to the historical development and status quo of small programs and some multi-terminal solutions

Review of the development history of wechat applets

Wechat small program short for small program. Zhang xiaolong announced the launch of his wechat open class on January 9, 2017. The English name of Mini Program is Mini Program, which is an application that can be used without downloading and installing. It enables the application to be "at your fingertips". Users can open the application by scanning or searching. Applets are not a concept that came out of nowhere. When WebView in wechat gradually becomes an important entry point of mobile Web, wechat has JS API. That is to say, in fact, this small program enabling has always been technically possibleCopy the code

The background of the birth of applets

• Native apps have the best user experience and the most functionality. However, this method requires downloading from the App Store or other app markets, and it is not acceptable for users to download an app without wifi coverage. In addition, general apps are relatively large, and will occupy a large space of the system as the time line becomes longer. For example, iT is normal for wechat to occupy several gigabytes of space. Moreover, if it is not frequently used, it is very likely to be deleted by users.

  Native app development is a matter of engineering is very high, and the development of time need a larger team to maintenance, such as the app’s development need to develop the IOS client and AnZhuoDuan on both ends of the staff, also need to the service personnel and operational personnel, this part of the cost will be very large, if the function of the development of the app logic is complex, More investment is required

• H5 is a mobile phone on the web, as long as there is the browser environment can run, of course, we also can put the web url to generate a qr code, let users through sweeping code into the project, the reuse and spread the cost is relatively low, also on the configuration of personnel is to save money, don’t have to have two teams to maintain a set of product development

  The disadvantage is that the user experience is relatively poor compared to the original app, including the need to re-request the server for page hopping, which also leads to the inability to do more things on H5, so it is also an absolute reason for not becoming the dominant position

• Small program small program because wechat uses special technology, especially some controls are used by some of the system’s native components, so the operation is very close to the operation of the native APP. In addition, once you open the small program, it means that its code has been stored on the phone, so there is no need to request server resources when doing page hopping. Therefore, the user experience is very good, almost close to the user experience of the native app, and it can do a lot of things. Basically, you can see a small application that captures most of the functionality of a native app. In addition, because of the underlying mechanism, its code volume is very small (controlled within 2M), so it is very fast to download a small wechat program. This is a very important reason why users can accept it

• Small total small program is a relatively good user experience, and save money, high development efficiency, you can use some solutions of the open source community to achieve a set of code, suitable for cross-terminal multi-app

Applets and ordinary web development differences

• The main development language of the small program is JavaScript. The development of the small program is very similar to the common web development. Moving from web development to applets is not expensive for front-end developers, but there are a few differences.

  Web developers only need to use a browser and some auxiliary tools or editors to develop web pages. The development of small program is different, need to apply for small program account, install small program developer tools, configuration projects and so on to complete the process.

  In Web development, when a user opens a page, we usually load and access a remote page through an HTTP address, while in applets, we load and access a remote page through protocols (e.g. Sslocal ://microapp) after the applet is activated, the applet will be delivered to the current App in the form of a package, and the local JS/XML/CSS file will be loaded to open the applet. Therefore, the small program itself does not have a domain name (not refers to the request request and other access ability does not have a domain name), so can not like web development, the use of location and other ways to jump to the page, there is no “cross-domain”.

  Because the js of the applet is run in JScore rather than webView, there is no DOM/BOM, and thus the global variables provided by the browser such as Window cannot be used. Therefore, many NPM that can be run in the browser cannot be directly used in the applet.

  What is a webview

• Code development

  At the code level we only need to be familiar with the small program API, and many of the API in order to fit the front end of the development of the classmate, on the design of the API is more conform to the development of the front-end students thinking, on the learning cost is relatively small, the structure of the small native application development and writing have some similar vue, if we use a vue, So it’s really quick

• The running environment of the applets

• JavaScript support and runtime limitations
  • JS code execution using EVAL is not supported
  • Creating functions using new Function is not supported
• The operation mechanism of applets
  • Foreground/background status
  • Small program start
    • Cold start
    • Warm start
• Update mechanism
  • Updated when not started
  • Update at startup
• Small program debugging
  • Generally we use wechat developer tools for development, because our view rendering can only be debugged in wechat Developer tools
  • Because wechat developer tools sometimes have a bit of a block, it is generally coded in vscode, and then debug the view layer in wechat developer tools

Some limitations in applets

Dependency packages cannot be downloaded

Development of wechat applets (compared with native applets and VUE development)

• Wechat small program and Vue writing differences
  • Loop through: small program is wx:for=”list”, vue is V -for=”inforin list”
  • Call data: the applet is this.data.initData and vue is this.initData
  • Assignment: The applet is this.setdata ({info:1}), and the vue is straight this.info=1
• How is bidirectional binding of applets different from vUE
  • This. SetData ({init: XXX});
• The life cycle function of a small program
  • OnLoad — page load, called once
  • OnShow — Page display, called every time a page is opened
  • OnReady — Once the first rendering is done
  • OnHide — Page hide, called when navigateTo or bottom TAB is switched
  • OnUnload — Page unload, called when redirectTo or navigateBack
• Page jump in small program
  • Wx. navigateTo — Leave the current page and jump to a page within the app. But you cannot skip to the Tabbar page (the argument must be a string)
  • Wx. redirectTo — Closes the current page and jumps to a page within the app. However, jumping to the Tabbar page is not allowed
  • Wx. switchTab — Jumps to a tabBar page and closes all other non-tabbar pages
  • Wx. navigateBack — Close the current page and return to the previous page or multi-level page. GetCurrentPages () gets the current page stack and determines how many layers you need to return

  -wx.reLaunch — Close all pages and open to a page within the app

Taro and

Small program development and small program multi – terminal framework

• Native development

Use the official documentation API for development, but because of the different header companies in the development of small program standards, there is no unified.

• Multiterminal framework

A set of code that can be packaged into small program code suitable for multiple ends – Taro’s unique team of bump lab – Uni-app is still in maintenance for a long time – MPvue Meituan seems not to be maintained for a long time – Wepy Tencent – Chameleon – CML Chameleon – Didi

How about multi-terminal support (April 2020)

The development experience

Github popularity data from 2021-04-05

The development tools

To study the threshold

Mainstream cross-end frameworks basically follow the existing technology stack of React and Vue (vUe-like) syntax reuse engineers to reduce the learning cost, which also becomes a factor of whether a cross-end framework can be used quickly. If the syntax difference is large, it will increase the learning cost greatly for us

Multiport applets framework

React virtual DOM is a javascript object. The virtual DOM describes the nesting relationship of the DOM in the page. The dom node is not recognized on android and ios, but can only be recognized in browsers. Generate native application components that can be displayed on native applications, so the virtual DOM can increase our cross-end capabilities

In React, we will first escape our JSX into our virtual DOM via Babel, and then call the Render method provided in React to iterate over the virtual DOM object to generate the corresponding HTML

Advantages of applets

• Fast loading
• More powerful capabilities (can rely on the native app, provide a lot of native open capabilities or APIS, such as preview, access to the phone’s local gallery, etc.)
• Close to native experience
• Easy to use and secure wechat data opening
• Efficient and simple development
• Rely on wechat’s social traffic
• Lightweight just go
• Open entrance more scan code to send friends, search, nearby small program, public number association, group post article embedded, public number menu link

Shortcomings or limitations of applets

• Retention problem: Unable to actively receive user interaction information, similar to app push, can only reach users through SMS or public account push
• Controlled by wechat: will be subject to a lot of restrictions and supervision from wechat, if blocked, will affect a large area of business
• The size limit cannot exceed 2M, and pages with more than 5 levels cannot be opened
• Relying on wechat, it is impossible to develop background management functions
• Deployment requires review, which takes longer at night

The prospects and future of applets

• Performance: In 2020, the number of daily active users of small programs exceeded 300 million, and the total transaction amount reached 800 billion YUAN
• The number of existing small programs in the market is huge, both the current ecology and community construction is more and more perfect

Summary of this sharing

• Understand the difference between wechat small program development and web development
• The state of applets
• Cross-end small program solutions and their own characteristics, for our subsequent technology selection as a reference
• The ecology of applets at each end
• The future of applets

References: An overview of the history of applets and the history of applets technology Didi cross-end framework Chameleon1.0 has officially released Taro principle summary