Small program prototype

At the beginning, wechat provided a series of native JS apis for internal staff to achieve a series of functional purposes. At first, it was only used internally, and later many external developers also used it, gradually becoming the de facto standard for web pages in wechat.

Wechat embedded browser defines a private JavaScript object: WeixinJSBridge, through the operation of the object can be shared to the wechat circle of friends, and judge the attention status of a wechat signal and realize the specified wechat signal and other functions.

The WeixinJSBridge method is used to preview the image in the browser.

WeixinJSBridge.invoke('imagePreview', { current: 'http://inews.gtimg.com/newsapp_bt/0/1693121381/641', urls: [// List of urls for all images, The array format 'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg', 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg', 'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg' ] }, function(res) { console.log(res.err_msg) })Copy the code

Later, wechat observed that many developers used built-in methods, so in early 2015, wechat released a complete set of web development kit, called JS-SDK, which opened dozens of apis such as shooting, recording, voice recognition, TWO-DIMENSIONAL code, map, payment, sharing, card coupons, etc. For all Web developers to open a new window, so that all developers can use the original ability of wechat, to complete some things that can not be done before or difficult to do.

The following is to use the JSSDK method to achieve preview images

wx.previewImage({ current: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg', urls: [// List of urls for all images, The array format 'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg', 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg', 'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg' ], success: function(res) { console.log(res) } })Copy the code

Effect:However, although these native methods are provided, there are still some bad experiences. For example, when a user visits a web page, there will be a white screen before the browser displays. On the mobile terminal, due to the limitation of device performance and network speed, the white screen will be more obvious.

Therefore, we need to design a:

For developers, access to the wechat native system can make the development of a more efficient and simple system

To the user can make the page opening time shorter, better experience system

That’s where applets come in

What is a applets

Miniprogram is a cloud application built into wechat, which does not need to be installed and downloaded

Also known as “app embedded in wechat (Alipay, JD.com, Baidu)”

Users can open the applet page by scanning and searching

Features:

  • The space taken up is negligible
  • Short development cycle
  • User experience is close to native app…

Differences between applets and normal H5 development

Runtime environment

  • H5

When developing a web page in a browser, the GUI rendering thread is suspended while the JS engine runs the script. They are both in the same thread, and the rendering thread and the JS script thread are mutually exclusive. Developers can manipulate DOM elements using DOM apis exposed by various browsers

  • Small program

The rendering layer and logic layer of the applet are separate, divided into different threads. The logical layer runs in the JSCore engine, does not have a complete browser object, and lacks the DOM API

Development costs

The development cost of applets is much lower than the web cost of HTML5 development in the past

  • H5:

To develop an H5, you need to consider from development tools, front-end framework, module management tools, task management tools, as well as UI library selection, interface call tools, browser compatibility, and so on

  • Small program:

Wechat provides unified development tools and standardized development standards. You can call the API in wechat development without worrying about browser compatibility

System permissions

  • Small program:

As a native APP, wechat can obtain more system permissions, such as network communication status and data caching ability, so small programs can also obtain system-level permissions

  • H5:

H5 application is relatively less, so wechat small program between the Web end and the native App, can enrich the call function interface, but also cross-platform.

The user experience

  • H5:

When we open an HTML5 page, we are actually opening a Web page, and when the page is browsing, it needs to be rendered in the browser. This process is called loading. No matter how long the loading time is, it will give users a feeling of “stuck” or “insensitive”.

  • Small program:

Small program is the cloud application in wechat. Through WebSocket two-way communication (no need to refresh instant message), local cache (local cache of pictures and UI to reduce interaction delay with the server) and the optimization of wechat underlying technology, the small program achieves the experience close to the native APP. Therefore, when using small programs, there is almost no need to wait under the same network conditions, and they can operate smoothly like ordinary APPS.

Small program principle

The rendering layer and logic layer of the applet are managed by two threads:

  • Rendering layer: The applet provides its own view layer description languages WXML and WXSS, and the tasks related to interface rendering are all performed in the WebView thread. A small program has multiple interfaces, so the render layer has multiple WebView threads.
  • Logic layer: JsCore thread is used to run JS scripts.

View layer and logic layer communicate through JSBridage of system layer. Logic layer notifies view layer of data changes and triggers page update of view layer, and view layer notifies logic layer of triggered events for business processing, as shown below:

Logic layer on the basis of JavaScript, but also added some functions to facilitate the development of small programs:

  • Add App and Page methods for program registration and Page registration.
  • Add getApp and getCurrentPages methods to get the App instance and the current page stack, respectively.
  • Provide rich API, such as wechat user data, scan, payment and other wechat unique capabilities.
  • Provides modularity, with each page having its own scope.

Here’s an example:

<! -- This is our View --> <view> Hello {{name}}! </view> <button bindtap="changeName"> Click me! </button> // This is our App Service. // This is our data. var helloData = { name: 'Weixin' } // Register a Page. Page({ data: helloData, changeName: function(e) { // sent data change to view this.setData({ name: 'MINA' }) } })Copy the code
  • The developer uses the framework to bind the name of the logical layer data to the name of the view layer, so when the page opens it will display Hello Weixin! ;
  • When a button is clicked, the view layer sends the changeName event to the logic layer, which finds and executes the corresponding event handler.
  • When the callback is triggered, the logical layer performs the setData operation, changing the name of data from Weixin to MINA. Since the data is bound to the view layer, the view layer automatically changes to Hello MINA! .

Small programs will run in IOS and Android wechat client and developer tools respectively, but the operating environment parsing kernel is different:

Runtime environment Logic layer Rendering layer
iOS JavaScriptCore WKWebView
The android V8 Chromium Custom kernel
Applets developer tools NWJS Chrome WebView

Small program code composition

We quickly created a QuickStart project using developer tools. You will notice that different types of files are generated in this project:

  1. Json Configuration file with the suffix. Json
  2. WXML template file with the.wxml suffix
  3. WXSS suffix WXSS style file
  4. Js script logic file with the.js suffix

JSON configuration

Root directory has an app. Json and project. The config. Json, a index under the pages/index. The json file

  • App. json is the global configuration of the current applet, including all page paths, interface performance, network timeout, bottom TAB, etc.
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  }
}
Copy the code

  • The applets developer tool generates a project.config.json file in the root directory of each project, and any configuration you make on the tool is written to this file. When you reinstall the tool or change computers to work, you simply load the same project code package. The developer tool will automatically restore you to the personalization you had when you were developing the project

  • The index.json file under Pages/Index defines properties for each page, such as the top color, whether to allow a pull-down refresh, and so on

WXML template

WXML is very similar to HTML, consisting of tag attributes and so on, but there are some differences:

  1. The label name is different
  • Some common tags in HTML are div, P, and SPAN. Developers combine these tags into different components
  • The tags used in WXML are tags that have encapsulated basic capabilities, such as View,button,text,image,button, etc., to optimize the subsequent performance without affecting the developer’s source code, and to constrain the developer to write code with performance and experience not below the baseline
  1. More attributes like wx:if and expressions like {{}}
  • Dom.js handles dom properties and behavior through THE DOM API by recording states in variables
  • In the small program rendering layer and logical layer are separate, so JS can not get DOM, WXML through template syntax to describe the relationship between state and interface structure, through {{}} syntax to bind a variable to the interface, and some WX: command to control the display in the interface

WXSS style

WXSS has most of the features of CSS, small programs in WXSS also made some additions and modifications.

  1. Added dimension unit RPX. The RPX ADAPTS to the screen width. Specify a screen width of 750rpx. For example, on iPhone6, the screen width is 375px and there are 750 physical pixels, then 750rpx = 375px = 750 physical pixels and 1rpx = 0.5px = 1 physical pixel.

  2. Style import: provide global style and local style, to write an app.wxSS as a global style, will be applied to all pages of the current applet, local page style page.wxss only for the current page.

Js logic interaction

Like javascript files for web development, applets provide their own apis for developers to use