Basic Getting Started Guide for Mini Program Development

1. Getting started

1.1. Apply for an account

Address: https://mp.weixin.qq.com/wxopen/waregister?action=step1

Fill in the registration information:

Mail
ID card name
ID number (one ID number can only register 5 mini programs)
Mobile number (one mobile number can only register 5 Mini Programs)
Scan the code to bind a WeChat account as a manager

The differences between the different subject types are as follows:

Principal Type Description

How to choose the subject type, to participate in the official instructions .

After successful registration, enter the background, and get the AppID (mini program identity) corresponding to the applet through the menu "Settings - Development Settings" . At the same time, the background has other functions such as: managing the permissions of the applet, viewing data reports, publishing the applet, etc.

1.2. Install the developer tools

download link:

The tool integrates two development modes: official account web page debugging and applet debugging :

Using the official account webpage debugging, developers can debug functions such as WeChat webpage authorization and WeChat JS-SDK. Details
Using applet debugging, developers can complete the development and debugging of the applet's API and pages, code viewing and editing, applet preview and release and other functions.

For a detailed introduction to the tool, please click here .

1.3. Hello World

Open the developer tools and select the applet;
Project configuration:
View the effect

In the simulator on the left, click "Get avatar nickname", and you will get the avatar and nickname corresponding to the WeChat account of the current developer tool.

Note: Because the AppID is not filled in, the developer tools have some functional limitations. For example, the buttons such as "Preview" and "Remote Debugging" in the upper right corner of the above figure are grayed out.

2. Basic project structure

Through the quick preview project created in the previous step, we can see that the applet is mainly composed of *.json、*.js、*.wxss、*.wxmlfour types of files, the detailed description is as follows.

2.1. json

File extension: *.json

It mainly implements some static configuration functions, which are divided into the following three categories:

app.json in the root directory

For the global configuration of the current applet, including: all page paths, interface performance, network timeout, bottom tab, etc., see here for details .
project.config.json in the root directory

For the configuration of the current developer tools, interface colors, compilation configuration, etc., please refer to here .
[page].json

It exists under the directory corresponding to each page (module) and is used to configure the independent properties of each page. See here for details .

2.2. wxml

File extension: *.wxml

The full name of WXML is WeiXin Markup Language, which is a set of markup language designed by the applet framework. Combined with the basic components and event system of the applet, the structure of the page can be constructed. It is equivalent to HTML , but on the basis of div, p, span and these tags, some encapsulation is done, and some similar attribute expressions wx:ifare to achieve more functions, see here for details .

Introduction to basic features:

It consists of a start tag and an end tag, and must be strictly closed, such as <view></view>;
Tags can have attributes, formats key="value", and case sensitivity;

Properties common to all components are as follows:
Data binding function, through {{变量名}}to bind the data object attribute in the wxml file corresponding to the js file;
- Variable names are case sensitive;
- Variables that are not defined or are set to undefined will not be synchronized to wxml;
{{ }}perform simple logical operations in
Conditional logicwx:if="{{condition}}"
List renderingwx:for="{{array}}"
stencil<template name="">...</template>
Citing other documents
- import
- include

2.3. wxss

File extension: *.wxss

WXSS (WeiXin Style Sheets) is a style language for small programs, equivalent to CSS , but with some extensions and modifications, see here for details :

app.wxss in the root directory is the public style of the project, which is shared by all pages, and other *.wxss are applicable to specific pages;
Added size unit rpx (responsive pixel);

The conversion of rpx is based on 375 physical pixels, that is, under a screen with a width of 375 physical pixels, 1rpx = 1px. It is recommended to take the iPhone6 screen (width of 375px, a total of 750 physical pixels) as the design benchmark, at this time 1rpx = 375 / 750px = 0.5px
Reference other style files@import './test.wxss'
Only some CSS selectors are supported:
The weight of styles is similar to CSS, from large to small!important > style="" > #id > .class > element
Official style library: https://github.com/Tencent/weui-wxss

2.4. js

File extension: *.js

The main development language of Mini Programs is JavaScript, which developers use to respond to user operations, develop business logic, and call Mini Program APIs to fulfill business requirements.

ECMAScript is a scripting programming language standardized by Ecma International through ECMA-262, and JavaScript is an implementation of ECMAScript.

ECMA-262 specifies several important components of the ECMAScript language:

grammar
Types of
statement
keywords
operator
object

JavaScript implementation form comparison:

js_constructer

The JavaScript in the applet is implemented by ECMAScript and the applet framework and applet API. Compared with JavaScript in browsers, there are no BOM and DOM objects, so browser class libraries like JQuery and Zepto cannot be run in small programs, and the same lack of Native modules and NPM package management mechanism, small programs Native libraries cannot be loaded in, and most NPM packages cannot be used directly.

The entry file for the execution of the applet is app.js, and the running order of the files will be determined according to the order of the required modules.

When the execution of app.js is finished, the applet will be executed one by one according to the order of pages defined by the developer in app.json.

3. Execution process

applet execution process

illustrate:

The first page configured in app.json is the home page of the applet.
The client loads the page code and renders the page through some underlying mechanisms.

4. Post

4.1. Setting User Identity

For a small program project developed by a team, it is necessary to set different identity permissions for each participant. The settings 用户身份 - 成员管理are . The differences between different permissions are as follows:

User ID

4.2. Test Preview

Using the developer tools, do the following:

Mini Program Development Preview

Tip: If the AppID is not filled in when creating the project, the button is grayed out and unavailable.

4.3. Upload the code and publish it online

Also through the developer tools, click the "Upload" button in the upper right corner, confirm the upload and fill in the following two fields:

version number

Required, only letters and numbers, such asv1.0.0
Project Notes

Not required, it is a special description for this upload.

After the upload is successful, it will become the [development version]. The applet administrator can set this upload as the [experimental version] in the background, or submit it for review to become the [under review version]. The previous version], the specific process is as follows:

applet code version

Description :

[Development version] Only keep the latest code uploaded by each person, which can be deleted at will, without affecting the review version and online version.

Only one piece of code can be in the [Review Version]. After the review results are obtained, it can be released online or resubmitted for review.

[Online version] will be overwritten with each new version released.

You can scan the QR code below to quickly experience the above versions through the applet developer assistant .

applet developer assistant

5. Other

5.1. View Mini Program Operation Data

Method 1: Log in to the applet management background and open the menu "Data Analysis";
Method 2: Scan the QR code on WeChat and use the Mini Program data assistant tool

5.2. Related resources

Continuously update the address: https://github.com/whorusq/wechat-learning