# Mini Program host environment

We call the environment provided by the WeChat client to the mini program the host environment. With the ability provided by the host environment, Mini Programs can complete many functions that ordinary web pages cannot complete.

In the previous chapter, we explained the file types involved in the Mini Program, and we combined QuickStart This project is about how these documents work together.

# Rendering Layer and Logic Layer

First of all, we have a simple understanding of the Mini Program running environment. The operating environment of the Mini Program is divided into a rendering layer and a logic layer, in which WXML Templates and WXSS Styles work at the rendering layer, JS Scripts work at the logical level.

The rendering layer and the logic layer of the Mini Program are managed by two threads respectively: the interface of the rendering layer uses WebView To renderThe logic layer uses the JsCore thread to run JS scripts. A Mini Program has multiple interfaces, so there are multiple WebView threads in the rendering layer, and the communication between these two threads will be transferred through the WeChat client (which will also use Native to refer to the WeChat client). The logical layer sends network requests also via Native forwarding. The communication model of the Mini Program is shown below.

Detailed documentation of the rendering layer and the logical layer Mini Program framework 。

# Programs and Pages

Before opening the mini program, the WeChat client will download the entire code package of the mini program to the local area.

Immediately after passing app.json of pages The field will know all the page paths of your current Mini Program:

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

This configuration is described in QuickStart The project defines two pages, located in the pages/index/index and pages/logs/logsWhile written in pages The first page of the field is the home page of the Mini Program (the first page you see when you open the Mini Program).

So the WeChat client loaded the code of the home page, and through some mechanisms at the bottom of the Mini Program, it can render the home page.

After the Mini Program starts, in app.js Defined App Examples of onLaunch The callback is executed:

App({
  onLaunch: function () {
    // After the Mini Program starts trigger
  }
})

There is only one Mini Program. App Instance, is shared across the page, more event callback reference documentation Registration procedure App 。

Let's take a quick look at how a page of the Mini Program is written.

You can observe pages/logs/logs In fact, it includes 4 kinds of files, the WeChat client will first according to the logs.json Configuration to generate an interface, the top color and text you can in this json Defined in the document. The client will then load the page. WXML Structure and WXSS Style. Finally, the client will load logs.js♪ you can see logs.js The general content is:

Page({
  data: { // Data involved in the rendering of the page
    logs: []
  },
  onLoad: function () {
    // After page rendering implement
  }
})

Page Is a page constructor, this constructor generates a page. When generating the page, the Mini Program framework puts Data Data and index.wxml Together to render the final structure, so you get what the Mini Program looks like.

After rendering the interface, the page instance receives a onLoad Callback, you can handle your logic in this callback.

There's something about Page Constructor More detailed documentation reference Registration page Page 。

# assembly

Small programs provide a wealth of basic components to developers, developers can be like building blocks, the combination of various components into their own Mini programs.

It's like HTML of div, p Like the label, in the Mini Program, you only need to WXML To display the component in the interface, write the corresponding component label name. For example, if you want to display a map on the interface, you can simply write:

<map></map>

When using a component, you can also pass values to the component through attributes, so that the component can be displayed in different states, for example, we want the latitude and longitude of the center of the map at the beginning to be Guangzhou, then you need to declare the map's Longitude (central longitude) and Latitude (central latitude) Two attributes:

<map Longitude = "Guangzhou Longitude" Latitude = "Latitude of Guangzhou"></map>

The internal behavior of the component is also perceived by the developer in the form of events, such as when the user clicks on a marker on the map. js write markertap Function to handle:

<map bindmarkertap="markertap" Longitude = "Guangzhou Longitude" Latitude = "Latitude of Guangzhou"></map>

Of course, you can also go through style or class To control the outer style of the component to fit your interface width, height, etc.

More components can be referred to Components of an Mini Program。

# API

In order to allow developers to easily adjust the capabilities provided by WeChat, such as access to user information, Weixin Pay, etc., the mini program provides a lot of API For developers to use.

To get the user's geographic location, you need only:

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

Call the WeChat scan ability, just need:

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

It is important to note that the majority API All callbacks are asynchronous, and you need to deal with the asynchronous aspects of your code logic.

More API Ability to see Mini Programs API。

Through this chapter, you have a general understanding of the basic concepts of Mini Program operation. After you have developed a Mini Program, you need to release your Mini Program. inNext Chapter, you will know what needs to be done before the release.