# Mini Program Host Environment
The environment provided by the Weixin app for the Mini Program is called host environment. With the capabilities provided by the host environment, the Mini Program can deliver many features that are not available in other web pages.
In the previous chapter, we explained the different types of files in the Mini Program. Now, let's see how these files work together in the example of QuickStart.
# Rendering Layer and Logic Layer
Firstly, let's have a brief understanding of the runtime environment of the Mini Program, which is divided into a render layer and a logic layer. WXML templates and WXSS styles are used in the render layer and JS scripts in the logic layer.
These two layers are managed via two threads: the render layer renders its interfaces using WebView threads, while the logic layer runs the JS scripts with JsCore threads. As more than one interface exists in the Mini Program, there are multiple WebView threads in the render layer. The communication between the WebView threads and JsCore threads as well as the network requests sent from the logic layer are transferred via the Weixin app (hereinafter also referred to as Native). The communication model of the Mini Program is shown below.
For details, see Mini Program Framework.
# Programs and Pages
The Weixin app downloads the code package of the Mini Program to the local device before opening it.
This allows you to get all the page paths of the Mini Program from the pages
field of app.json
:
{
"pages":[
"pages/index/index",
"pages/logs/logs"
]
}
The configuration defines two pages in the QuickStart project, respectively located in the pages/index/index
and pages/logs/logs
directories. The first page specified in the pages
field is the homepage of the Mini Program (i.e. the first page you see when you open the Mini Program).
The Weixin app loads the code of the homepage and render it via the underlying mechanism of the Mini Program.
When the Mini Program is launched, the onLaunch
callback of the App
instance defined in app.js
is executed:
App({
onLaunch: function () {
//Triggered when the Mini Program is launched
}
})
There is only one App instance in the Mini Program, which is shared across all pages. For more event callbacks, see Registering Mini Program.
Now let's take a look at how the page of the Mini Program is written.
Four types of files can be found in the pages/logs/logs
directory. The Weixin app first generates an interface based on the logs.json
configuration file in which the top color and text can be defined. The app then loads the WXML
structure and WXSS
style of the page, and finally the logs.js
file. The content of the logs.js
file looks like this:
Page({
data: { // Data used for page rendering
logs: []
},
onLoad: function () {
// Executed when the page is rendered
}
})
Page
is a page constructor that generates a page. When the page is generated, the Mini Program framework renders the final structure using data
and index.wxml
, so that the Mini Program appears as it is now.
After the interface is rendered, the page instance receives an onLoad
callback, where you can process your logic.
For more information on the Page
constructor, see Registering Page.
# Components
With the wide range of basic components provided by the Mini Program, developers can build their own Mini Programs by combining various components.
Like div
, p
and other tags in HTML
, in the Mini Program, you just need to provide the tag name of a component in WXML
to display the component on the interface. For example, if you want to display the map on the interface, then write like this:
<map></map>
When using the component, you can also pass values to it via properties to display the component differently. For example, if you want the center latitude and longitude of the map to be those of Guangzhou at the very beginning, you need to declare the map's longitude (center longitude) and latitude (center latitude) properties:
<map longitude="Longitude of Guangzhou" latitude="Latitude of Guangzhou"></map>
The internal behavior of the component can also be perceived by developers as an event. For example, if a user taps a marker on the map, you can write a markertap
function in the js
:
<map bindmarkertap="markertap" longitude="Longitude of Guangzhou" latitude="Latitude of Guangzhou"></map>
You can also control the external style of the component via style
or class
to fit the width, height and other properties of your interface.
See Mini Program Components for details.
# API
To make it easy for developers to call the capabilities provided by Weixin, such as access to user information, local storage and WeChat Pay, the Mini Program provides a wide range of APIs.
To obtain user's geographical location, then write like this:
wx.getLocation({
type: 'wgs84',
success: (res) => {
var latitude = res.latitude // Latitude
var longitude = res.longitude // Longitude
}
})
To use the "Scan" feature, then write like this:
wx.scanCode({
success: (res) => {
console.log(res)
}
})
Note that most API callbacks are asynchronous, so you need to take care of the asynchronization of your code logic.
See Mini Program APIs for details.
In this chapter, you've got some basic understanding of how the Mini Program works. After developing a Mini Program, you need to release it. In the next chapter, you will learn the preparations before release.