Applets contain an ‘app’ that describes the entire program + a ‘page’ that describes the individual pages.


What is a applets

When users receive articles pushed by wechat public accounts, they directly open them inside wechat, using a UIWebView. When WebView in wechat gradually becomes the entrance of mobile Web, wechat has js API.
Wechat official inside added a default JS API —
WeixinJSBridge, through which you can perform related operations on the page:


  • Share the article on wechat moments
  • Send the article directly to your wechat friends
  • Following a Specific User
  • Get wechat user’s profile picture and nickname




JS – SDK is right
WeixinJSBridgePackaging, and the release of new capabilities, will turn inward opening into outward opening. It solves the problem of insufficient mobile web capabilities by exposing the wechat interface so that web developers have more capabilities.


The browser will display a white screen before the process, on mobile devices, depending on device performance and network speed.
Wechat offline resource storage, similar to ‘HTML5 Application Cache’ for Web developers, provides web acceleration solutions based on wechat. Offline storage enables wechat to load web resources locally without pulling them from the server, thus reducing the loading time of web pages and providing a better browsing experience.
For example, a large number of CSS or JS files are loaded on the page. In addition to the problem of white screen affecting the Web experience, there are also defects of operation feedback, which are reflected in: stiff page switching and click lag.

Advantages of small programs

There are three ways to render a page

  1. Web rendering.

  2. Native rendering.

  3. Web and Native, also known as Hybrid rendering.

The final presentation form of the small program is WebView + native components, Hybrid. Let’s combine our previous expectations for applets with:

  • Barriers to development: The Web is low, but Native also has support for frameworks like RN

  • Experience: Native experience is not much better than Web experience, Hybrid is closer to Native experience than Web experience to some extent

  • Version update: Web supports online update, while Native needs to be packaged to wechat for review and release

  • Control and security: The Web page can be redirected or changed, resulting in uncontrollable factors and security risks

In general, the applet chooses Hybrid rendering, can be developed in a similar way to the Web, and can also be updated online code. At the same time, introducing native components has the following benefits:

  • Extend the power of the Web. Components like input (textarea) have better control over the keyboard

  • The experience is better and the rendering of the WebView is reduced

  • Bypassing setData, data communication, and re-rendering processes for better rendering performance

Applets and ordinary web development differences



The differences are mainly reflected in the following three aspects:


  • language
  • DOM/BOM
  • Compatible with environment and platform


Small program main development language is JS, and ordinary web pages have great similarity. Moving from web development to applets is inexpensive for front-end developers.
But the web development rendering thread and script thread are mutually exclusive, which is why long script runs can cause the page to become unresponsive, and
Applets separate the two and run in different threads, with the logic layer running in JSCoreThere is no complete browser object, so the DOM API and BOM API are missing. This difference prevents some libraries, such as jQuery/Zepto, from running in applets. In addition, the JSCode environment is different from the NodeJS environment, so some NPM packages will not run in applets.


We can use the JavaScript engine of the client system, the JavaScriptCore framework under iOS, and the JsCore environment provided by Tencent X5 kernel under Android. Solve this problem by providing a sandbox environment to run the developer’s JavaScript code. This sandbox environment only provides a pure JavaScript interpretation execution environment without any browser-specific interfaces.


Web development needs to face a variety of browsers, PC needs to face IE/Chrome/QQ browser, mobile terminal needs Safari/Chrome/ and iOS, Android system in a variety of WebViews. In the process of small program development, we need to face the wechat client of the two major operating systems iOS and Android, as well as the small program developer tools for auxiliary development. The three running environments in the small program are also different.


Small program running environment:






identification

An applets AppID is an ID card for the applets platform


File description developers.weixin.qq.com/miniprogram…


pages
A small program body consists of three files that must be placed at the root of the project, as follows:
An applet page consists of four files, which are:






Json configuration



Json is a data format, not a programming language, and it plays a static configuration role in applets.
1) Applets configuration
App. json is the global configuration of the current applet, including all page paths, interface performance, network timeout, bottom TAB, etc
2) Tool configuration
The root directory of each project will generate a project.config.json for personalized configuration, such as interface color, edit configuration, etc., without reconfiguration when switching to another computer.
3) Page configuration
Page. json defines the properties of each page individually, such as the top color, whether to allow a pull-down refresh, and so on


WXML template
HTML is used to describe the structure of the current page, CSS describes the appearance, AND JS processes the page and user interaction logic.


Differences between WXML and HTML

  • Tag name
  • Special attributes to avoid dom manipulation


Applets package commonly used components to improve development efficiency. On the other hand, as projects get bigger and bigger, your code will be filled with a lot of interface interaction logic and application state variables, which is obviously not a good development model, hence the MVVM development model (e.g. React, Vue), which advocates the separation of rendering and logic. Simply put, don’t let JS manipulate the DOM directly,
JS only needs to manage stateThen a template syntax describes the relationship between state and interface structure. There are attributes like ‘wx:if’ and expressions that respond to user behavior


WXSS is different from CSS



  • Added dimension unit RPX
  • Global and local styles are provided
  • Only some CSS selectors are supported


Developers need to take into account that collecting devices to the screen will have different widths and device pixel ratios, and use some tricks to make the conversion. WXSS supports a new dimension unit, RPX, in the bottom layer, eliminating conversion headaches. Floating-point operations can be biased




Applets host environment

The environment provided by wechat client for small programs is called host environment. Small programs are divided into a rendering layer and a logical layer with the help of the host environment. WXML and WXSS styles work in the rendering layer, and JS scripts work in the logical layer.
The rendering layer and logic layer of the applet are managed by two threads:
The interface of rendering layer uses WebView to render; The logic layer uses JsCore thread to run JS script. A small program has multiple interfaces, so the render layer has multiple WebView threads, the two threads
The communication will be via the wechat client(Native will also be used to refer to the wechat client below) as the transfer, and the network request sent by the logical layer is also forwarded by Native. The communication model of the small program is shown in the following figure.

The communication between the logic layer and the rendering layer will be transferred by Native (wechat client), and the network request sent by the logic layer will also be forwarded by Native.



Exparser framework

Exparser is the component organization framework of wechat small program, which is built into the basic library of small program and provides basic support for various components of small program. All components within the applets, both built-in and custom, are managed by the Exparser organization. Exparser features include:

  1. ShadowDOM model: The model is highly similar to WebComponents’ ShadowDOM, but it does not rely on browser’s native support, nor does it have other dependent libraries; When implemented, additional apis were added specifically to support applets component programming.

  2. Runs in a pure JS environment: this means that the logical layer also has some component tree organization capability.

  3. High efficiency and light weight: High performance, especially in environments with a large number of component instances, and small code size.


Other applets and their comparison

  • mpvue

Mpvue inherits from vue. js, and its technical specifications and syntactic features are consistent with vue. js. Support micro channel small program, Baidu intelligent small program, headlines small program and alipay small program. The framework is based on vue. js, modified runtime framework runtime and code compiler implementation, so that it can run in the small program environment, thus introducing vue. js development experience for small program development.

Quick start tutorial: mpvue.com/mpvue/quick…

Ability:

  1. Radical componentized development capabilities: improved code reuse
  2. The completeVue.jsDevelopment experience
  3. convenientVuexData management solution: Easy to build complex applications
  4. quickwebpackBuild mechanism: custom build strategy, hotReload during development
  5. Support for using NPM external dependencies
  6. useVue.jsCommand line tool vue-CLI quickly initializes the project
  7. H5 code conversion ability to compile into small program object code


  • Taro



Taro is a multi-terminal development solution that follows the React syntax specification. Now at the top of the market form is varied, the Web, the React – Native, WeChat small programs and other side, when the business requirements in different side are required to show at the same time, more than to write code for different end cost is very high, obviously at that time only a set of code can be adapted to varying ability is very need.

  • NPM/YARN can be used to install and manage third-party dependencies.
  • Support for using ES7/ES8 and even newer ES specifications, everything is self-configurable.
  • Supports the use of CSS precompilers, such as Sass.
  • Support for state management using Redux.
  • Support for state management using Mobx.
  • Small program API optimization, asynchronous API Promise and so on.

Taro is a relatively good choice, with far more community activity and feedback than any of its competitors. It also supports multiple applications (including React Native and H5). The only problem should be that you are limited to using the React technology stack.


  • WePY 

Vue syntax is one of the first development frameworks for small programs. WePY 2 is component-based development based on native components of applets. Therefore, the lowest version of the applets base library supported by WePY 2 is 1.6.3.

Design ideas for WePY 2

  1. Non-invasive design WePY 2 runs on the small program, is the encapsulation and optimization of the original capabilities of the small program, will not have any change or impact on the original small program framework.

  2. Native compatible code can be compatible with native code, that is, some pages are native and some pages are WePY. At the same time, you can reference existing natively developed applets without any changes.

  3. Componentized development based on native components of small programs Native components have a great improvement in performance compared with before. Therefore, WePY 2 is entirely based on the native component implementation of applets and does not support versions of the applets base library < 1.6.3.

  4. Data binding is based on the Vue Observer implementation while customizing applets specific optimizations for it.

  5. The core library provides mixin, hooks, use and other methods to develop extensions, and the CLI compilation tool provides a more powerful plug-in mechanism to facilitate the developer to invade any stage of compilation for personalized compilation.