Consulting Hotline: 0592-5774223
Victoria WeChat
Victoria Mobile

WeChat Mini Program Development Guide

2017-01-10 13:17:02

This document will take you step by step to create and complete a WeChat applet, and you can experience the actual effect of the applet on your phone. The homepage of this applet will display the welcome message and the current user ’s WeChat avatar. Click the avatar to view the startup log of the current applet on the newly opened page. Download the source code

1. Get the AppID of WeChat Mini Program

Log in to, and you can check the AppID of WeChat Mini Program in "Settings"-"Developer Settings" of the website. Please note that you cannot directly use the AppID of the service number or subscription number.

Note: If you want to experience this applet on a mobile phone with a non-administrator WeChat, then we also need to operate "Bind Developer". That is, in the "user identity"-"developer" module, you need to experience the WeChat of the applet. This tutorial defaults to registering an account and experience using the administrator WeChat.

2. Create a project

We need to use developer tools to complete applet creation and code editing.

After the developer tools are installed, open and log in using WeChat scan code. Choose to create a "Project", fill in the AppID obtained above, set the name of a local project (not the name of the applet), such as "My first project", and select a local folder as the directory where the code is stored Click on "New Project".

To help beginners understand the basic code structure of WeChat Mini Programs, during the creation process, if the selected local folder is an empty folder, the developer tools will prompt if you need to create a quick start project. Select "Yes" and the developer tools will help us generate a simple demo in the development directory.

After the project is successfully created, we can click on the project to enter and see the complete developer tools interface. Click on the left navigation to view and edit our code in "Edit" and test the code in "Debug". Simulate the effect of the applet on the WeChat client. In the "Project", you can send it to your phone to preview the actual effect.

3. Write the code

Create applet instance

Click "Edit" on the left navigation of the developer tools, we can see that this project has been initialized and contains some simple code files. The most critical and indispensable are app.js, app.json, and app.wxss. Among them, the .js suffix is a script file, the .json suffix is a configuration file, and the .wxss suffix is a style sheet file. The WeChat applet reads these files and generates applet instances.

Below we briefly understand the functions of these three files to facilitate modification and develop your own WeChat applet from scratch.

app.js is the script code for the applet. We can listen to and process the lifecycle functions of the applet and declare global variables in this file. Call the rich API provided by the framework, such as synchronous storage and synchronous reading of local data in this example. For more information on available APIs, refer to the API documentation

//app.jsApp ({

onLaunch: function () {// Call API to get data from local cache

var logs = wx.getStorageSync ('logs') || []

logs.unshift ( ())

wx.setStorageSync ('logs', logs)


getUserInfo: function (cb) {var that = this; if (this.globalData.userInfo) {typeof cb == "function" && cb (this.globalData.userInfo)

} else {// Call login interface

wx.login ({

success: function () {

wx.getUserInfo ({

success: function (res) {

that.globalData.userInfo = res.userInfo; typeof cb == "function" && cb (that.globalData.userInfo)







globalData: {

userInfo: null



app.json is a global configuration for the entire applet. In this file, we can configure which pages the applet consists of, configure the applet's window background color, configure the navigation bar style, and configure the default title. Note that this file cannot be commented. For more configurable items, please refer to the detailed configuration

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

], "window": {"backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black"



app.wxss is a common style sheet for the entire applet. We can use the style rules declared in app.wxss directly on the class attribute of the page component.

/**app.wxss**/.container {height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box;


Create page

In this tutorial, we have two pages, the index page and the logs page, that is, the welcome page and the display page of the applet startup log, both of which are in the pages directory. [Path + Page Name] of each page in the WeChat Mini Program needs to be written in the pages of app.json, and the first page in pages is the home page of the Mini Program.

Each applet page is composed of four different suffix files with the same name under the same path, such as: index.js, index.wxml, index.wxss, index.json. Files with .js suffix are script files, files with .json suffix are configuration files, files with .wxss suffix are style sheet files, and files with .wxml suffix are page structure files.

index.wxml is the structure file for the page:

{{userInfo.nickName}} {{motto}}

In this example, the use of, to build the page structure, binding data and interaction processing functions.

index.js is the script file of the page. In this file, we can monitor and process the life cycle functions of the page, obtain applet instances, declare and process data, and respond to page interaction events.

//index.js//Get application instancevar app = getApp ()

Page ({

data: {

motto: 'Hello World',

userInfo: {}

}, // Event handler

bindViewTap: function () {

wx.navigateTo ({

url: '../logs/logs'



onLoad: function () {console.log ('onLoad') var that = this

// Call the method of the application instance to get global data

app.getUserInfo (function (userInfo) {// Update data

that.setData ({

userInfo: userInfo





index.wxss is the style sheet for the page:

/**index.wxss**/.userinfo {display: flex; flex-direction: column; align-items: center;

} .userinfo-avatar {width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%;

} .userinfo-nickname {color: #aaa;

} .usermotto {margin-top: 200px;


The style sheet of the page is not necessary. When there is a page style sheet, the style rules in the page's style sheet overlay the style rules in app.wxss. If you do not specify a style sheet for the page, you can also directly use the style rules specified in app.wxss in the structure file of the page.

index.json is the configuration file for the page:

The configuration file for the page is not necessary. When there is a configuration file for the page, the configuration items on the page will override the same configuration items in the window of app.json. If no page configuration file is specified, the default configuration in app.json is used directly on the page.

Page structure of logs

{{index + 1}}. {{log}}

The logs page uses control tags to organize code, uses wx: for to bind logs data, and loops logs data to expand nodes

//logs.jsvar util = require ('../../ utils / util.js')

Page ({

data: {

logs: []


onLoad: function () {this.setData ({

logs: (wx.getStorageSync ('logs') || []). map (function (log) {return util.formatTime (new Date (log))





The results are as follows:

4. Phone Preview

Select "Project" on the left menu bar of the developer tools, click "Preview", and you can experience in WeChat client after scanning the code.

share it:
@ 2009-2019 Xiamen Weipin Network Technology Co., Ltd. All rights reserved. Xiamen Website Construction Fujian ICP No. 14000305


Website building QQ consultation Website Construction WeChat Consulting
15880204330 导航到维品 Long press to copy WeChat: 15880204330 15880204330 Navigate to Victoria