WeChat Mini Program Development Guide: Architecture, Packaging, Tools, and CI/CD

WeChat Mini Programs are lightweight applications that run inside the WeChat ecosystem without requiring installation. Since their launch in 2017 they have become a major development target, and this article shares the practical guidelines and experiences gathered by the DeWu team.

Architecture : Mini Programs adopt a hybrid model that combines a WebView‑based rendering layer with a native‑provided JavaScript sandbox (logic layer). The two layers run in separate threads, providing security isolation and fast UI rendering.

Package size limits : The total size of a Mini Program must not exceed 20 MB (30 MB for games), and each main package or sub‑package is limited to 2 MB. The main package contains the startup page, TabBar pages and shared resources, while sub‑packages are used to split page‑level code for faster initialization.

Framework selection : For projects that only target WeChat, native Mini Program development is possible but less flexible. Most developers choose cross‑platform frameworks; currently maintained options are uni‑app (Vue‑based) and Taro (React‑based).

Package size optimization : Common techniques include CDN loading of static assets, code compression, and dependency analysis. An example directory layout for a uni‑app project is shown below:

├── ...
├── bin // build commands
├── loaders
├── src
│   ├── assets // static resources
│   ├── components // shared components
│   ├── pages // main‑package pages
│   ├── product // product sub‑package
│   ├── order // order sub‑package
│   ├── ...
│   ├── sdk // external SDKs
│   ├── store // global state
│   ├── style // style files
│   ├── utils // utility functions
│   └── wxcomponents // native components
├── ...

Sub‑package configuration : The app.json file defines the main pages and sub‑packages. Example:

{
  "pages": [
    "pages/index/index",
    "pages/xxxxx/index"
  ],
  "subPackages": [
    {
      "root": "product",
      "pages": ["xxxxx/index"]
    }
  ],
  "window": { /* global window config */ },
  "tabBar": { /* tabBar config */ }
}

Development efficiency tools :

API environment switch component (Vue template snippet):

<view v-if="!IS_PRODUCTION" class="changeServiceEnv">
  <view class="changeTitle">环境切换</view>
  <radio-group @change="radioChange">
    <radio v-for="item in ENV_Array" :key="item" :value="item" :checked="item === SERVICE_ENV" class="radio-info">{{ item }}</radio>
  </radio-group>
</view>

radioChange(e) {
  let { value } = e.detail;
  this.$store.commit('SET_SERVICE_ENV', value);
  uni.showToast({ title: `当前环境是${this.SERVICE_ENV}` });
}

DEV panel injection via a custom Webpack loader:

// loader implementation
function modifyTemplateString(inputString, customTag) {
  let templateStart = inputString.indexOf('

Automated publishing : The CI/CD pipeline uses miniprogram-ci to build and upload the Mini Program. A simplified script is shown:

#!/usr/bin/env node
const shell = require('shelljs');
const signale = require('signale');
const { Signale } = signale;
const ci = require('miniprogram-ci');
async function main() {
  const interactive = new Signale({ interactive: true });
  const result = shell.exec('npm run build');
  if (result.code !== 0) { interactive.error('build failed'); process.exit(1); }
  const project = new ci.Project({
    type: 'miniProgram',
    projectPath: '/dist/dev/mp-weixin',
    ignores: ['node_modules/**/*']
  });
  ci.upload({ project }).then(() => console.log('上传成功')).catch(err => { interactive.error(err); process.exit(1); });
}
main();

Automation saves manual effort, integrates with CI/CD, and provides programmable control over the upload process.

Post‑release data analysis : Stability monitoring and JS error analysis are performed via WeChat’s “WeAnalysis” platform, offering performance dashboards, real‑time logs, and error stack traces.

Conclusion : Despite limitations (closed source, strict sandbox), Mini Programs have become a standard mobile development paradigm. Continuous learning and adaptation are essential for leveraging their commercial and technical benefits.