Coding for Wechat Mini Programs

Note to developers

This is a technical article focused on the actual coding of Wechat’s latest Mini Programs. You can check out my other articles: an introduction to Mini Programs, and a walk-through of how to register to develop your own mini program.

Direct from Wechat’s Guide for Mini Program Developers (in Chinese only), I’m sharing here the example code provided by Wechat, hoping to give you some ideas on how to work with this new product.

The sample code will help you complete a mini program, viewable on your phone. The homepage of the mini program will display a greeting and the current user’s head shot; when you click the head shot, you will see the startup log for this mini program.

Acquire AppID for your mini program

Go to http://mp.weixin.qq.com, Login with your Mini Program credentials (check out registration guide here). Go to “Settings” (设置),and “Developer Settings” (开发者设置),where you will be able to find your mini program’s AppID.

Create Project

First, you need to download the official development tool: windows 64windows 32mac

Open the program and use the Admin’s wechat to scan the start-up QR code for login. Choose “Create Project” (创建项目).

Put in your mini program AppID, a “Project Name” (项目名称), and a folder to save your coding log (项目目录). And click “Add Project” (添加项目) to complete.

Designed to quickly introduce the basic coding structures of Wechat Mini Programs to beginners, when the target log folder is empty, a prompt will appear to ask “Do you want to create a ‘quick start’ project” (是否需要创建一个 quick start 项目). When you click “yes” (是), the development program will help you create a simple demo in the destination folder.

After creating the project, we can click and enter the coding interface. On the left navigation column, you can click “Edit” (编辑) to view and edit your code. In “Test” (调试), you can test and simulate how the program looks on a user interface. In “Project”, you can send the program to a cell phone for preview.


Coding

Create the Mini Program —

Click “Edit” (编辑) on the left navigation column, we can see that the demo program already contains some simple codes. The most essential three elements are: app.js, app.json, app.wxss .

.js indicates script file, .json indicates configuration file, and .wxss indicates style sheet.

Let’s review the functions of these three types of files, in order to help you code.

app.js is the script file of a mini program. We can monitor and process the “lifecycle function”(生命周期函数) and declare “global variables” (全局变量) in this file. There are a wide range of APIs available. In this example, the sync reading local data and sync saving local data are used (同步存储本地数据 & 同步读取本地数据). Learn more about the API available, check here.

app.json file can configure the mini program at a macro level. You can determine the pages of your mini program, configure the program window’s background color, decide the style of navigation panel, set up default title. Note: you cannot add any annotation to this file. Learn more about the config items here.

app.wxss file is the shared style sheet for the entire mini program. You can directly use the style rules declared by app.wxss on each program pages.

Create pages —

In this code tutorial, there are two pages: index page and logs page, i.e. welcome page and the startup log display page. They are both under pages directory.

Every page’s path+page name should be written in the pages of app.json file, and the first page under pages should always be the homepage of the mini program.

Every mini program page is consisted of four different files of the same name under the same path, for instance, index.js, index.wxml, index.wxss, index.json.

.js is the page’s script file, .json is the page’s configuration file, .wxss is the page’s style sheet, and .wxml is the page structure file.

index.wxml file is the following. In this example, <view>, <image>, <text> are used to construct the page, bind data and process functions.

index.js is the page’s script file. In this file, we can monitor and process “lifecycle function” (生命周期函数), fetch “mini program demo” (小程序实例), “declare and process data” (声明并处理数据), respond to “interactive events” (交互事件), etc.:

index.wxss is the page’s style sheet. This is not required. When there is one, the page’s style sheet will cover over app.wxss’ style rules. If you don’t specify a page’s style sheet, the app.wxss can be directly applied to the page.

index.json is the page’s config file. This is also not required. Same case as the above index.wxss.

Page structure for logs is shown below.

Logs page use <block/> to organize code. On <block/>, use wx:for to bind logs data, and use logs data to loop expand nodes.

Results when running the program:

Preview on the phone

On the left navigation panel, choose “Project” (项目), and click “Preview” (预览). After scanning the QR code prompt, you will be able to view the mini program within your Wechat interface.

There’s a forum dedicated to all questions mini program. But it’s in Chinese… so WeChat is not making it easy for international developers. Hope this will change as WeChat aims to gain more market share outside of China.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.