The small program host environment

We call the environment that WeChat clients provide to small programs the host environment. With the capabilities provided by the host environment, small programs can accomplish functions that many ordinary Web pages cannot.

In the last chapter, we explained the types of files involved in the small program, and we'll take a look at how these files work together in conjunction with the QuickStart project.

The render layer and the logical layer

First, let's take a brief look at the environment in which the next small program runs. The environment in which the applet runs is divided into the rendering layer and the logical layer, where the WXML template and WXSS style work at the render layer and the JS script works on the logical layer.

The rendering layer and the logical layer of the program are managed by two threads: the interface of the rendering layer is rendered using WebView, and the logical layer runs the JS script using the JsCore thread. A small program has multiple interfaces, so the rendering layer has multiple WebView threads, the communication between the two threads will be through the WeChat client (below will also use Native to refer to the WeChat client) to do the transit, the logical layer to send network requests also through Native forwarding, the communication model of the small program is shown in the figure below.

Detailed documentation about the rendering layer and the logical layer refers to the small program framework.

Programs and pages

WeChat clients download the entire package of code for a small program locally before opening it.

You can then know all the page paths for your current gadget via app.json's pages field:

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}

This configuration description is defined in the QuickStart project, which is located in Pages / INDEX / INDEX and PAGES / LOGS / LOGS.And the first page written in the pages field is the home page of this applet (open the first page you see by the applet).

So the WeChat client loads the code of the home page, and can render this home by some mechanisms of the small program.

After the applet is started, the ONLAUNCH callback of the App instance defined by app.js is executed:

App({
  onLaunch: function () {
    // 小程序启动之后 触发
  }
})

Only one app instance is only a version of all pages, more event callback reference documents Registration Program APP 。

Next, let's take a look at how the applet is written.

You can observe that the pages/logs/logs actually include 4 files, weChat client will first generate an interface based on the logs.json configuration, the top color and text you can define in this json file. T he client then mounts the WXML structure and WXSS style of the page. Finally, the client loads the logs .js, and you can see .js general content of the logs is:

Page({
  data: { // 参与页面渲染的数据
    logs: []
  },
  onLoad: function () {
    // 页面渲染后 执行
  }
})

Page is a page constructor that generates a page. When you build a page, the small program framework renders the final structure with the data data and index.wxml, and you get what the little program looks like.

After rendering the interface, the page instance receives a callback onLoad from which you can work with your logic.

There are more detailed documentation references for page Page for Page constructors.

Component

Small programs provide a wealth of basic components for developers, who can combine various components to synthesize their own small programs like building blocks.

Just like HTML's div, p and other tags, in a small program, you only need to write the corresponding component label name in WXML to display the component on the interface, for example, you need to display the map on the interface, you just need to write this:

<map></map>

When using a component, you can also pass values to the component through properties that allow the component to be presented in different states, for example, if we want the latitude and longitude of the center at the beginning of the map to be Guangzhou, then you need to declare the two properties of the map, longitude and latitude:

<map longitude="广州经度" latitude="广州纬度"></map>

The internal behavior of the component is also aware by the developer in the form of events, such as when a user clicks on a tag on the map, which you can write a markertap function in js to handle:

<map bindmarkertap="markertap" longitude="广州经度" latitude="广州纬度"></map>

Of course, you can also control the outer style of the component through style or class to fit the width of your interface, and so on.

Api

In order to make it easy for developers to adjust the capabilities provided by WeChat, such as access to user information, WeChat payments, etc., small programs provide a lot of APIs for developers to use.

To get a user's geographic location, all you need to do is:

wx.getLocation({
  type: 'wgs84',
  success: (res) => {
    var latitude = res.latitude // 纬度
    var longitude = res.longitude // 经度
  }
})

Call WeChat's sweep capability, just:

wx.scanCode({
  success: (res) => {
    console.log(res)
  }
})

It is important to note that most API callbacks are asynchronous, and you need to deal with asynchronous problems with code logic.

More API capabilities can be found in the API of the small program.

Through this section you've got a rough idea of some of the basic concepts of small programs running, and when you've developed a small program, you'll need to publish your little program. In the next chapter, you'll know what to prepare for before you release.