WeChat applet development

Environmental preparation

First, you need to prepare a WeChat developer account.

If you do not have a developer account yet, you need to apply for an account on the WeChat public platform. Website: WeChat public platform
Register a developer account for a small program
Insert picture description here

Insert picture description here
Fill in the email address that has not been registered with the WeChat official account.

Insert picture description here
The filled-in mailbox will receive an activation email, follow the activation of the WeChat applet stated in the email, and return to the WeChat official platform.

Information registration: To choose the main body of the mini program, if it is an enterprise or other main body, other information needs to be provided. So here I am choosing individuals. Then fill in some subject information and administrator information.

Insert picture description here

Insert picture description here
After filling in these, a developer account is registered.

After registration, you need to scan the WeChat code to log in to this WeChat applet, and get a developer ID. This is a very important one, and you will need it for later development.

Insert picture description here

Second, install WeChat developer tools. (Software developed by WeChat Mini Program)

The URL is: WeChat Open Document
Insert picture description here

Third, download a front-end development tool (HBuilderX, VSCode, Webstorm).

(Optional or not) Because although you can also write code in WeChat Developer Tools, it is not convenient, so it is best to download a software for writing small programs. HBuilderX is used here. Below are the download steps.

Insert picture description here

Download and install the steps here without taking screenshots. Just unzip it and open it. Note that the first time you open HBuilderX, you need to connect to the Internet. Need to download some plug-ins so that there will be prompts when writing code later. Only the first time you open it will automatically download. If you forget, just delete it and unzip it again.

Create a small program

1) Create a new project
Open HBuilderX, select File->New->Project.
Select the applet and fill in the project name. You can generate a default template.

Insert picture description here
2) To modify the developer ID
in the default template, you first need to modify the "appid" in the following 15 lines in the file "project.config.json". This is the developer ID in the WeChat developer.

The written applet needs to be run in the WeChat developer tool of the WeChat applet. As shown below.
Insert picture description here
If the connection is successful, the WeChat developer tool will be opened, and you can scan and log in with the WeChat that you originally logged in to the WeChat public platform.

After scanning, you will enter the WeChat developer tool. On the left is the simulator, which simulates the display effect in WeChat, the upper right is the editor for writing code, and the lower right is the debugger.
Insert picture description here

Mini Program Homepage

The grammatical knowledge of writing small programs can be viewed by opening the WeChat open document .
The structure of the applet.
The language of the applet is similar to that of the webpage, but the words are different.
The composition of each page of the
applet : xxx.json file: configure page title and other information
xxx.wxml file: html (view replaces div, text replaces span, image replaces img)
xxx.wxss file: css (layout, applet recommends flex Layout, unit px is changed to rpx 100rpx=50px)
xxx.js file: js (json format, vuejs idea)

Three global configuration files for the
applet : app.json (configure the global title, bottom menu bar)
app.js (global js file)
app.wxss (global style file)

The following is the production of the menu bar at the bottom of WeChat:

page: page path list, used to specify which pages the applet consists of, each item corresponds to the path (including file name) information of a page.
window: Used to set the status bar, navigation bar, title, window background color of the applet.
tabBar: If the applet is a multi-tab application (there is a tab bar at the bottom or top of the client window to switch pages), you can specify the performance of the tab bar through the tabBar configuration item, and the corresponding page displayed when the tab is switched.
For specific functions, please refer to WeChat open documents

The following code can be copied and modified.


{
  "pages": [
    "pages/ai/ai",
    "pages/yq/yq"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "实训",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json",
  "tabBar": { 
	"color": "#a9b7b7",
  "selectedColor": "#ff8124",
	"borderStyle": "white",
    "list": [
          {  
			"pagePath": "pages/ai/ai",
			"text": "人脸识别",
			"selectedIconPath": "image/ai-active.png",
			"iconPath": "image/ai.png"
          },
		  {
		  	"pagePath": "pages/yq/yq",
		  	"text": "疫情地图",
		    "selectedIconPath": "image/map-active.png",
		  	"iconPath": "image/map.png"
		  }
		  ]
    }
}