wechat-mini-program-development

Files (1)

• SKILL.md

SKILL.md (first lines)

# WeChat Mini-Program Development Skill

A comprehensive skill for WeChat mini-program development, providing standard project structure, unified request wrapper, API endpoint management, and configuration file conventions.

## Description

This skill helps developers quickly scaffold and develop WeChat mini-programs with best practices and standardized code structure. It provides:

- Standard project directory structure
- Unified HTTP request wrapper with interceptors
- Centralized API endpoint management
- Configuration file conventions

## Usage Scenario

Invoke this skill when:
- User asks to create a new WeChat mini-program project
- User needs help with WeChat mini-program development
- User asks for HTTP request wrapper for WeChat mini-program
- User wants to set up API management in WeChat mini-program

## Instructions

### 1. Project Structure Setup

Create the following directory structure for the WeChat mini-program:

```
├── app.js                 // Mini-program entry logic
├── app.json               // Mini-program global configuration
├── app.wxss               // Mini-program global styles
├── sitemap.json           // Sitemap configuration (SEO related)
├── pages/                 // Pages folder
│   ├── index/             // Home page
│   │   ├── index.js       // Page logic
│   │   ├── index.json     // Page configuration
│   │   ├── index.wxml     // Page structure
│   │   └── index.wxss     // Page styles
│   └── [other pages]/     // Other pages follow same structure
├── components/            // Custom components folder
├── utils/                 // Utility functions folder
├── assets/                // Static assets folder
│   ├── images/            // Image resources
│   └── icons/             // Icon resources
└── .trae/                 // TRAE configuration folder
```

### 2. Create Configuration File (utils/config.js)

Create `utils/config.js` with CommonJS syntax:

```javascript
module.exports = {
  baseUrl: 'https://api.example.com',
  timeout: 10000,
  appId: 'your-app-id'
};
```

### 3. Create API Management (utils/api.js)

Create `utils/api.js` with centralized endpoint management:

```javascript
module.exports = {
  // User module
  user: {
    login: '/user/login',
    info: '/user/info',
    update: '/user/update'
  },
  // Goods module
  goods: {
    list: '/goods/list',
    detail: '/goods/detail',
    search: '/goods/search'
  },
  // Order module
  order: {
    create: '/order/create',
    list: '/order/list',
    detail: '/order/detail'
  }
};
```

### 4. Create Request Wrapper (utils/request.js)

Create `utils/request.js` with unified request/response interceptors:

**Request Interceptor Features:**
- Automatically concatenate full request URL (baseUrl + endpoint path)
- Automatically add unified request headers (Content-Type: application/json)
- Automatically inject user authentication token
- Support custom headers, timeout, loading state
- Let wx.request handle parameter serialization natively

**Response Interceptor Features:**
- Unified loading state management
- HTTP status code 200-299 considered successful
- Business status code === 0 considered successful
- Automatically return business data field
- Business failure automatically shows toast
- 401 automatically redirects to login page and clears token
- 5xx and network errors handled uniformly

```javascript
const config = require('./config.js');

const request = (options) => {
  return new Promise((resolve, reject) => {
    const showLoading = options.showLoading !== false;
    if (showLoading) {
      wx.showLoading({
        title: options.loadingText || 'Loading...',
        mask: true
      });
    }

From trae-community/trae-skills, MIT.

More from trae-community/trae-skills