Master WeChat Mini Program Development: From Setup to Todo List App

Development Environment

Download the WeChat Mini Program developer tools, install, and log in by scanning a QR code. If you don't have an AppID, select "No AppID".

Directory Structure

The mini program consists of a framework core and page files.

Framework Core Files

app.js registers the app instance and defines lifecycle callbacks and global data.

<code>// app.js
App({
  onLaunch: function () {
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  onShow: function () { /* ... */ },
  onHide: function () { /* ... */ },
  getUserInfo: function (cb) {
    if (this.globalData.userInfo) {
      typeof cb == "function" && cb(this.globalData.userInfo)
    } else {
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData: {
    userInfo: null
  }
})
</code>

Use

getApp()

to obtain the global instance.

<code>var app = getApp()
console.log(app.globalData) // {userInfo:null}
</code>

app.json

Global configuration file (no comments allowed). Defines pages, window appearance, tabBar, network timeout, and debug mode.

<code>{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "page/index/index",
        "text": "首页"
      },
      {
        "pagePath": "page/logs/logs",
        "text": "日志"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}
</code>

app.wxss

Global style sheet.

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

Page Files

Each page has a .js and .json file. page.js uses

Page()

to define data and lifecycle callbacks.

<code>Page({
  data: {
    text: "This is page data."
  },
  onLoad: function (options) { /* ... */ },
  onReady: function () { /* ... */ },
  onShow: function () { /* ... */ },
  onHide: function () { /* ... */ },
  onUnload: function () { /* ... */ },
  viewTap: function () {
    this.setData({ text: 'Set some data for updating view.' })
  }
})
</code>

WXML Components

WeChat Mini Programs use a set of built‑in WXML components instead of standard HTML tags, such as

view

,

scroll-view

,

swiper

,

icon

,

text

,

button

,

checkbox

,

form

,

input

,

picker

,

radio

,

slider

,

switch

,

navigator

,

audio

,

image

,

video

,

map

,

canvas

and others.

WXSS

Style language for WXML. Supports the responsive pixel unit

rpx

(750 rpx = 20 rem). Supported selectors: class, id, element, element,element, :after, :before.

Data Binding

Use Mustache syntax

{{variable}}

in WXML and call

setData()

in the corresponding page script to update the view.

<code><!-- index.wxml -->
<view class="container">
  <text>{{hello}}</text>
</view>

// index.js
Page({
  data: { hello: 'Hello World' },
  onLoad: function () {
    this.setData({ hello: 'Hello World' })
  }
})
</code>

Conditional Rendering

Use

wx:if="{{condition}}"

to render a block only when the condition is true.

<code><view wx:if="{{condition}}">True</view>
</code>

List Rendering

Use

wx:for

to iterate over an array, with optional

wx:for-index

and

wx:for-item

to name the index and item variables.

<code><view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>
</code>

Templates

Define reusable fragments with

<template name="...">

and include them via

is="..." data="{{...}}"

.

<code><!-- template -->
<template name="msgItem">
  <view>
    <text>{{index}}: {{msg}}</text>
    <text>Time: {{time}}</text>
  </view>
</template>

<!-- usage -->
<template is="msgItem" data="{{...item}}"></template>
</code>

Events

Supported event types include

touchstart

,

touchmove

,

touchcancel

,

touchend

,

tap

, and

longtap

. Bind events with

bindtap="handler"

(does not stop propagation) or

catchtap="handler"

(stops propagation). Event objects contain

type

,

timeStamp

,

target

,

currentTarget

,

touches

, and

detail

.

Routing with Parameters

Navigate using

<navigator url="navigate?title=navigate">...

. In the target page, retrieve parameters from the

options

argument of

onLoad

.

<code>Page({
  onLoad: function (options) {
    this.setData({ title: options.title })
  }
})
</code>

API

The framework provides many native WeChat APIs for user info, storage, payment, etc. Refer to the official documentation for details.

TodoList Example

A complete Todo List demonstrates page layout, data binding, adding, deleting, checking tasks, and counting completed items.

Source code: https://github.com/mistory/todolist