WeChat Mini Program (1)

WeChat applet (1) Learn about WeChat applet

---

1. Download and install WeChat Mini Program IDE

1. Register on the official website https://mp.weixin.qq.com/ and download the corresponding IDE.
2. Run the downloaded installation package

3. Install the WeChat applet IDE according to the general installation method and

always install it according to the default configuration.

---

2. Understanding of WeChat Mini Program project framework

1. To create a project, if there is no AppID, only some functions are limited, which will not affect our current learning too much. If you need to upload the applet, you need to register and apply for the corresponding AppID.

2. Create a "Common Quick Start Template" whose project directory is as follows:

• app.js - the startup file of the entire project
  The onlaunch method written in the comments has three functions:

  • Browser cache for storing and retrieving data
  • Use the login success callback
  • Get user information

  globalData is a global variable or constant that defines the entire project.
  In addition, if we need to call the API, we generally define some API variables in the file. For example API: "https://api.douban.com", when we need a page to call the API later, app.globaData.APIwe can use the variables.
  [For the maintenance of the entire project, it is recommended to write such common parameters in the configuration file uniformly]

• app.json - configuration file for the entire project

  • registration page
  • Configure tabs
  • Style the entire project
  • page title, etc.

  Note: The first page that the applet starts by default is the first page in the pages of app.json.

• pages - the page component of the applet. There are several subfolders
  when there are several pages.
  In the quick start template, there are two pages, index and logs
• The index directory - the index page
  has three files, which correspond one-to-one with the files developed by the web
  
  • index.wxml -> index.html
  • index.wxss -> index.css
  • index.js (js file)
    Some functions in the js file are explained:
    
    • var app = getApp();
      Introduce the app.js file of the entire project to get information such as public variables in the period
    • In the entire page({}), the first data is the internal data of the page component, which will be rendered into the wxml file of the page (similar to vue, react), and the data data is modified by setData to drive the page rendering
    • some lifecycle functions
    • onload() (listens for page load)
    • onready() (first rendering of the page)
    • onshow() (page display)
    • onhide() (page hide)
    • onShareAppMessage() (set the message shared by the page)
    • ... (more can be found on the official website API)
  • The .json file is
    used as the configuration file of the page component to set the page title and other functions.
    Comments cannot be written in json, otherwise it is easy to make mistakes.