Master WeChat Mini Program Development: From Setup to Advanced Features

Introduction

WeChat Mini Programs are a popular front‑end platform; this guide walks beginners through installing the WeChat Developer Tool, creating a project, understanding the file structure (js, json, wxml, wxss), and configuring the app.

Step 1: Install the WeChat Developer Tool

Download the standard version from the WeChat public platform and install it (≈100 MB).

Choose the ordinary Mini Program tool and open it.

Select the stable version and install.

Step 2: Create a Mini Program Project

Scan the QR code to log in, then select an AppID.

Set project parameters and click “Create”.

The tool shows a log similar to a browser; the avatar displays the login time.

Step 3: Mini Program File Structure

The project contains only four file types: .js, .json, .wxml, and .wxss. The index folder holds the home page (index.js, index.wxml, index.wxss). The logs folder stores login logs with similar files. app.js, app.json, and app.wxss are global configuration files, while util.js is a helper module. project.config.json stores project‑level settings.

Step 4: Collaborative Development

Multiple WeChat accounts can be added as collaborators.

Up to 15 friends can be added for testing.

Step 5: Building a Simple Page

Edit app.json to set the page title and home page.

Create a new page folder and add .wxml (structure) and .wxss (style) files.

Write a simple form using WXML components.

Note: px and rpx can be converted; rpx is logical pixel and usually safe for compatibility.

Step 6: Selectors, Data Binding, and List Rendering

WeChat Mini Programs support CSS‑like selectors ( .class, #id, element selectors, ::after, ::before) for styling components.

Data binding works like template engines; variables defined in data are referenced in WXML with {{}}.

Example of list rendering:

demo.wxml

demo.js

Step 7: Conditional Rendering

Use wx:if, wx:elif, and wx:else to render components based on conditions.

Step 8: Templates and Import/Include

Define reusable templates with <template name="..."> and use them via the is attribute.

<template name="staffName">
  <view>FirstName: {{firstName}}, LastName: {{lastName}}</view>
</template>

Import other WXML files using import (single‑level) or include (full copy).

Step 9: Style Import

Create a shared .wxss file and import it into page styles.

Step 10: Mini Program Script Language (WXS)

Write custom logic in <wxs> tags or separate .wxs files.

<wxs module="index">
  var bb = function (val) { return val; };
  module.exports = { key: bb };
</wxs>
<view>{{index.key(12)}}</view>

Modules can be required with require:

var d = require("demo.wxs");
console.log(d.msg);
console.log(d.key(111));

Step 11: Configuration Files

app.json

defines global settings (pages, window, tabBar, networkTimeout, etc.). Individual pages have their own .json for local configuration (navigationBar, backgroundColor, pull‑down refresh, etc.).

{
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  }
}

Step 12: Sitemap Configuration

Use sitemap.json to control which pages are indexed by WeChat search.

{
  "rules": [
    {"action": "allow", "page": "path/to/page", "params": ["a","b"], "matching": "exact"},
    {"action": "disallow", "page": "path/to/page"}
  ]
}

Step 13: Event Binding

Bind component events (e.g., bindtap) and page lifecycle events ( onPullDownRefresh, onReachBottom, onPageScroll).

onPullDownRefresh: function(){ console.log('User pulled down'); },
onReachBottom: function(){ console.log('User reached bottom'); },
onPageScroll: function(options){ console.log('Scroll top:', options.scrollTop); }

Conclusion

WeChat Mini Programs are a fast‑growing market; mastering their development workflow—from tool installation to advanced configuration—provides valuable front‑end skills for building lightweight, cross‑platform applications.