miniprogram-architect

name: "miniprogram-architect" description: "Provides support for WeChat Mini Program architecture design, project structure optimization, code standard formulation, and component library establishment. Call when users need to build a new WeChat Mini Program project, refactor an existing project structure, or establish a component library."

WeChat Mini Program Architect

Feature Introduction

This skill focuses on the architecture design and project management of WeChat Mini Programs, providing users with the following support:

WeChat Mini Program project structure design and optimization
Formulation of code standards and directory division standards
Component library establishment and reuse strategies
Performance optimization and best practices
Writing project architecture documentation
Standardization of network requests and API encapsulation
User authorization and privacy compliance development

Applicable Scenarios

When users need to:

Create a new WeChat Mini Program project and build a complete directory structure
Refactor the structure of an existing Mini Program project
Formulate team development standards and specifications
Establish a reusable component library
Optimize Mini Program performance and loading speed

Project Architecture

Directory Structure

miniprogram-architect/
├── api/                        # API相关文件
├── assets/                     # 静态资源
│   ├── images/                 # 图片资源
│   └── styles/                 # 样式文件
├── pages/                      # 页面文件
│   ├── index/                  # 首页
│   └── tabBar/                 # 底部导航栏页面
├── utils/                      # 工具函数
├── app.js                      # 小程序入口文件
├── app.json                    # 小程序配置文件
├── app.wxss                    # 全局样式文件
├── project.config.json         # 项目配置文件
├── project.private.config.json # 项目私有配置文件
└── sitemap.json                # 小程序站点地图

Technology Stack

Native WeChat Mini Program development
WXML + WXSS + JavaScript
WeUI component library
WeChat official API

Usage Guide

Project Initialization

Directory structure setup: Create a standard Mini Program directory structure
Configuration file settings: Configure app.json, project.config.json, and other files
Basic file creation: Create basic files such as app.js, app.wxss, etc.

Code Standards

Naming conventions: Naming rules for files, variables, and functions (It is not allowed to use Chinese naming.)
Code style: Indentation, comments, and code organization methods
Directory division: Standards for dividing directories for pages, components, and utility functions

Module Export Standards (ES6 `export * as`）

In Mini Program projects, you can use ES2020's namespace re-export to uniformly export path configuration, route mapping, etc., facilitating centralized management and reuse:

// utils/variable.js
export const home = 'pages/index/index'
export const about = 'pages/about/index'

// pages/paths.js
export * as paths from './variable';
console.log(paths.home)

// pages/other.js
import { home } from './variable';

console.log(home)

Component Library Establishment

Component design: Design reusable component structures
Component standards: Component naming, parameter passing, and event handling
Component documentation: Write component usage instructions and examples

Performance Optimization

Code size optimization: Reduce Mini Program package size
Loading performance optimization: Improve page loading speed
Runtime performance optimization: Optimize Mini Program runtime performance

Best Practices

Directory Structure Best Practices

Modularization: Divide directories by functional modules
Componentization: Abstract reusable parts into components
Utility functions: Encapsulate common functionality as utility functions

Code Standards Best Practices

Naming Conventions: Use camelCase and avoid pinyin
Comment Conventions: Add comments to key code to explain functionality and implementation approach
Code Organization: Clear logic and reasonable structure

Performance Optimization Best Practices

On-demand Loading: Use lazyCodeLoading and componentPlaceholder
Image Optimization: Use appropriate image formats and sizes
Network Request Optimization: Use caching appropriately and reduce the number of requests

Example

Project Structure Example

├── api/                        # API相关文件
│   ├── env.js                  # 环境配置（开发/测试/生产环境）
│   ├── dome.js                 # 功能相关API (根据实际项目功能设计API文件，如用户、商品、订单等模块)
│   └── fetch.js                # 网络请求封装 (封装网络请求：支持请求拦截、响应拦截、错误处理token刷新、中断请求任务等功能)
├── assets/                     # 静态资源
│   ├── images/                 # 图片资源
│   └── styles/                 # 样式文件
├── pages/                      # 页面文件
│   ├── index/                  # 启动页
│   └── tabBar/                 # 底部导航栏页面
│       ├── home/               # 首页
│       ├── folder/             # 档案夹
│       └── mine/               # 我的
├── utils/                      # 工具函数
│   ├── request.js              # 请求工具 (封装网络请求：wx.request、wx.downloadFile、wx.uploadFile参照axisos封装，支持请求拦截、响应拦截、错误处理等功能)
│   ├── util.js                 # 通用工具
│   └── version.js              # 版本工具
├── app.js                      # 小程序入口文件
├── app.json                    # 小程序配置文件
├── app.wxss                    # 全局样式文件
├── project.config.json         # 项目配置文件
├── project.private.config.json # 项目私有配置文件
└── sitemap.json                # 小程序站点地图

Configuration File Example

Note: The iconPath and selectedIconPath paths need to be adjusted according to the actual project resource paths to ensure that icon resources load correctly.

{
  "pages": [
    "pages/index/index",
    "pages/tabBar/home/home",
    "pages/tabBar/folder/folder",
    "pages/tabBar/mine/mine"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#FFFFFF",
    "navigationBarTitleText": "miniprogram-architect",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#666666",
    "selectedColor": "#4A76F3",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/tabBar/home/home",
        "text": "首页",
        "iconPath": "assets/images/tabbar/home.png",
        "selectedIconPath": "assets/images/tabbar/home_active.png"
      },
      {
        "pagePath": "pages/tabBar/folder/folder",
        "text": "档案夹",
        "iconPath": "assets/images/tabbar/folder.png",
        "selectedIconPath": "assets/images/tabbar/folder_active.png"
      },
      {
        "pagePath": "pages/tabBar/mine/mine",
        "text": "我的",
        "iconPath": "assets/images/tabbar/mine.png",
        "selectedIconPath": "assets/images/tabbar/mine_active.png"
      }
    ]
  },
  "sitemapLocation": "sitemap.json",
  "useExtendedLib": {
    "weui": true
  },
  "lazyCodeLoading": "requiredComponents"
}

Notes

Strictly follow the official WeChat Mini Program development specifications to ensure that the code meets platform review standards;
Strictly control code size. The main package size must not exceed 2MB. Reasonably adopt a subpackage loading strategy to split non-core functions (such as detail pages and tool pages). A single subpackage must not exceed 20MB, and the total size must not exceed 200MB;
Ensure API call security. All interface requests must use the HTTPS protocol. Sensitive interfaces must add signature / Token verification to avoid transmitting user information in plaintext;
Optimize page performance and user experience, including but not limited to: reducing first-screen loading time, optimizing rendering logic, avoiding frequent setData, and adding loading / empty state prompts;
Improve code maintainability and extensibility. Adopt modular / component-based development, unify code standards (such as ESLint), and reserve interfaces for feature expansion;
Subpackage management must follow the principle of "core functions in the main package, non-core functions in subpackages", prioritize loading modules frequently accessed by users, and reduce initial loading pressure.

Subpackage Configuration (app.json)

{
  "pages": [
    "pages/index/index", // 主包核心页面（首页）
    "pages/home/home"    // 主包高频页面
  ],
  "subpackages": [
    {
      "root": "packageA", // 分包A根目录
      "pages": [
        "pages/detail/detail", // 商品详情（非核心，分包加载）
        "pages/comment/comment" // 评论页（非核心）
      ],
      "independent": false // 非独立分包（可依赖主包资源）
    },
    {
      "root": "packageB", // 分包B（独立分包，如营销活动页）
      "pages": [
        "pages/activity/activity"
      ],
      "independent": true // 独立分包（不依赖主包，可单独加载）
    }
  ],
  "preloadRule": {
    // 预加载策略：进入首页时预加载packageA（提升后续跳转速度）
    "pages/index/index": {
      "network": "wifi", // 仅wifi下预加载
      "packages": ["packageA"]
    }
  }
}

Key Notes

independent: true is suitable for pages that do not need main package resources (such as activity pages). They can be opened independently, reducing the main package loading pressure;
preloadRule preloads commonly used subpackages on demand, balancing "initial loading speed" and "subsequent experience".

Supplementary Size Optimization Techniques

The main package should retain only core logic + high-frequency pages. Static resources (such as images and large JSON files) should preferably be placed in subpackages or on a CDN;
Use the "Code Dependency Analysis" feature of WeChat DevTools to clean up unused code / resources;
Import third-party libraries on demand (for example, import only some components of Vant Weapp) to avoid full imports. (If on-demand import is not possible, it is recommended to use the WEUI component library. The official useExtendedLib support does not occupy the Mini Program package size, or place third-party libraries in subpackages to reduce the main package size)

{
  "useExtendedLib": {
    "weui": true
  }
}

Summary

Core of size control: strictly keep the main package within 2MB, split non-core functions through subpackage loading, and optimize experience with preloading;
Security and performance: API calls require HTTPS + signature verification. Page optimization focuses on first-screen loading and rendering efficiency;
Maintainability: modular development + reasonable subpackage division, balancing code extensibility and platform specifications.