Master the Architecture of WeChat Mini Programs: A Quick Guide

The Mini Program platform is not fully open yet, so you cannot experience it directly, but the documentation and development tools reveal its development approach.

This guide introduces the Mini Program development method to give interested readers a quick understanding of the overall concept.

Overall Structure

Default example project directory structure:

There are four file types based on extensions:

js logic code

wxml view files

wxss style files

json configuration information

/app.js defines what business logic runs at launch, global functions, and global data.

App({
  onLaunch: function () {
    ...
  },
  getUserInfo:function(cb){
    ...
  },
  globalData:{
    userInfo:null
  }
})

/app.json configures global settings such as bottom navigation tabs, pages, window title, background color, etc.

{
  "pages":[
    "pages/index/index", ...
  ],
  "window":{
    "navigationBarTitleText": "WeChat", ...
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  }
}

/app.wxss defines CSS styles.

The /pages directory contains custom pages; each page is a folder with four files: logic, view, style, and configuration.

Logic Layer

Reactive Data Binding

Data changes automatically update the view without manual refresh.

// Page view code
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>

The page binds a name variable and defines a button that triggers changeName.

Page({
  data: {
    name: 'ABC'
  },
  changeName: function(e) {
    this.setData({
      name: '123'
    })
  }
})

Initially the page shows “Hello ABC!”. After clicking the button, the name changes to “123” and the view updates to “Hello 123!”.

API

The platform provides rich APIs such as file upload/download, WebSocket, audio recording, camera, video recording, local storage, GPS, accelerometer, compass, payment, etc.

Modularization

Modules can be created to extract common code into separate .js files, using module.exports and require for exposure and import.

Example – defining a module:

//common.js
function sayHello(name) {
  console.log('Hello ' + name + '!')
}
module.exports.sayHello = sayHello

Calling the module:

var common = require('common.js')
Page({
  hello: function() {
    common.sayHello('MINA')
  }
})

View Layer

Components

The view consists of components such as buttons, input boxes, progress bars, text, images, video, dialogs, etc.

<view>
  <button>按钮</button>
  <checkbox-group>
    <checkbox value="" checked="true"/>北京
    <checkbox value="" checked=""/>上海
  </checkbox-group>
  <loading>加载中...</loading>
</view>

Logic Handling

1. Loops

Initial data:

Page({
  data: {
    items: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

Loop display:

<view wx:for="{{items}}">
  {{index}}: {{item.message}}
</view>

2. Conditional Rendering

Use wx:if to conditionally render blocks:

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

Events

Bind events on components: <view bindtap="bindViewTap">组件</view> Define the handler in JavaScript:

Page({
  bindViewTap:function(event){
    ...
  }
})

Templates

<!-- Define two templates -->
<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
    <!-- Dynamically select template based on condition -->
    <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

Summary

The Mini Program structure is concise; the logic layer consists of basic JavaScript and APIs, while the view layer requires familiarity with various components and their properties.