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 WeChat client downloads the code package of the entire Mini Program to the local.

Then, through the pages field of app.json, you can 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 WeChat 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 observe that there are actually four files under pages/logs/logs. The WeChat client will first generate an interface based on the logs.json configuration. The color and text at the top can be defined in the json file. Immediately after that, the client will load the WXML structure and WXSS style of the page. Finally, the client will load logs.js. You can see that the general content of logs.js is as below:

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 will render the final structure using both data and index.wxml, and then you get what the Mini Program looks like.

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

For more detailed documentation on the Page constructor, refer to Registration page 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 clicks a tag on the map, and you can write a markertap function in the js to handle it:

<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 The Mini Program components.

API

To make it easy for developers to tune the capabilities provided by WeChat, 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 WeChat "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 The 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.

个结果 ""

    没有找到相关内容 ""