Understanding WeChat Mini Programs

📢 This article was translated by gemini-2.5-flash

Official Website: https://mp.weixin.qq.com/cgi-bin/wx

Before you dev a Mini Program, you gotta register one first. You can register Mini Programs with different entities, and the permissions will vary accordingly. For example, registering a Mini Program as an individual won’t get you payment access (but you can use a test account to play around).

Once registered, set up your info, grab your AppID and AppSecret, download the developer tools , log in, and create a project.

First, go to Details - Local Settings in the top right. Check Do not verify valid domain names, web-view (business domains), TLS versions, and HTTPS certificates.

Mini Program dev is frontend work, mostly using JavaScript.

Mini Program Directory Structure

A Mini Program includes an app part describing the overall program and multiple page parts describing individual pages.

Core Structure

Composed of three files, which must be placed in the project’s root directory.

File	Purpose
app.js	Mini Program Logic
app.json	Mini Program Global Config
app.wxss	Mini Program Global Stylesheet, optional, similar to CSS

Pages

A Mini Program has multiple pages, stored in the pages directory.

Each page consists of four files.

File Type	Required?	Purpose
js	Yes	Page Logic, JavaScript
wxml	Yes	Page Structure/Layout, HTML
json	No	Page Config
wxss	No	Page Stylesheet, CSS

Quick Start

Mini Program coding style is similar to Vue.

Interpolation

wxml

1
<view>{{title}}</view>

1
2
3
4
5
Page({
    data: {
    title: 'Hello'
  }
})

Getting User Info

wxml

1
2
3
4
<view>
    <button type="default" bindtap="getUserInfo">Get User Info</button>
    <image src="{{avatarUrl}}" style="width: 100px; height: 100px;"/>{{nickName}}
</view>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
Page({
  data: {
    title: 'Hello',
    avatarUrl: '',
    nickName: ''
  },
  getUserInfo: function(){
    wx.getUserProfile({
      desc: 'Get user info',
      success: (res) => {
        console.log(res);
        this.setData({
          avatarUrl: res.userInfo.avatarUrl,
          nickName: res.userInfo.nickName
        })
      }
    })
  }
})

wxml

1
2
3
4
<view>
    <button type="primary" bind:tap="wxlogin">WeChat Login</button>
    Auth Code: {{code}}
</view>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
Page({
  data: {
    code: ''
  },
  wxlogin: function(){
    wx.login({
      success: (res) => {
        console.log("Auth Code: " + res.code);
        this.setData({
          code: res.code
        })
      },
    })
  }
})

WeChat Login Flow: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html

Sending HTTP Requests

wxml

1
2
3
4
<view>
    <button type="warn" bind:tap="sendRequest">Send Request</button>
    Response Result: {{result}}
</view>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
Page({
  data: {
    result: ''
  },
  sendRequest: function(){
    wx.request({
      url: 'url', // Request path
      method: 'GET', // Request method
      success: (res) => {
        console.log("Response result: " + res.data);
        this.setData({
          result: res.data // Response data
        })
      }
    })
  }
})

Compile and Publish

Hit the ‘Compile’ button up top. Once it’s done, preview it on the left.

Once your code’s finished, upload it, setting a version number. After a successful upload, submit it for review on the WeChat Official Account Platform, and then you can push it live.