In the previous chapter, we explained the file types involved in the Mini Program, and we'll talk about how these files work together using QuickStart as an example.

# Start the Mini Program

Before opening the Mini Program, the Weixin client downloads the code package of the entire Mini Program to the local.

Then, the pages field of app.json lets you know all the page paths of your current Mini Program:

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

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

Therefore, the Weixin client loads the code of the home page, and through some mechanisms underlying the Mini Program, the home page can be rendered out.

After the Mini Program starts, the onLaunch callback of the App instance defined in app.js will be executed:

App({
  onLaunch: function () {
    // Triggered after the Mini Program starts
  }
})

There is only one App instance in the whole Mini Program, which is shared by all pages. For more event callbacks, refer to the documents Registration app App.

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

# Programs and pages

You can find that the pages/logs/logs directory contains four types of files. Weixin will generate a user interface based on the logs.json configuration file of which the color and font of the top part can be defined in the json file. Then, the client will load the WXML structure and the WXSS style. Finally, the client will load the logs.js file. The content you can see in the logs.js file is like:

Page({
  data: { // Data that participates in page rendering
    logs: []
  },
  onLoad: function () {
    // Execute after the page is rendered
  }
})

Page is a page constructor, which generates a page. When the page is generated, the Mini Program framework renders the final structure using both data and index.wxml, so that you can get what the Mini Program looks like now.

After rendering the interface, the page instance receives an onLoad callback where you can process your logic.

For more detailed reference documents about the Page constructor, refer to Register Page.

# Components

The Mini Program provides a wealth of basic components for developers to assemble their Mini Programs by combining various components like building blocks.

Just like div, p and other tags in HTML, in the Mini Program, you just need to put the corresponding component tag name in the WXML to display the component on the interface. For example, if you want to display the map on the interface, you just need to write like this:

<map></map>

When using the component, you can also pass values to the component through properties so that the component can be displayed in a different state. For example, we want the latitude and longitude of the map center is Guangzhou at the very beginning, then you need to declare the map's two attributes of longitude (center longitude) and latitude (center latitude):

<map longitude="The longitude of Guangzhou" latitude="The latitude of Guangzhou"></map>

The internal behavior of the component can also be perceived by developers in the form of an event. For example, if a user taps a marker on the map, then you can write a markertap function in the js:

<map bindmarkertap="markertap" longitude="The longitude of Guangzhou" latitude="The latitude of Guangzhou"></map>

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

For more components, refer to Mini Program Components.

# API

To make it easy for developers to tune the capabilities provided by Weixin, such as access to user information, WeChat pay, etc., the Mini Program provides many APIs for the developers to use.

To get the user's geographic location, you only need to write as below:

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

To call the Weixin "Scan QR Code" function, you only need to write as below:

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

Note that most API callbacks are asynchronous, and you need to deal with the asynchronization of your code logic.

For more API capabilities, refer to Mini Program APIs.

Through this section, you've got some basic ideas of how to run the Mini Program. When you've developed a Mini Program, you need to release it. In the next section, you will know what you need to prepare before release.