Miniprogram Development

When to use this skill

Use this skill for WeChat Mini Program development when you need to:

• Develop WeChat mini program pages and components
• Integrate CloudBase capabilities (database, cloud functions, storage)
• Deploy and preview mini program projects
• Handle mini program authentication and user identity
• Call AI models in mini programs
• Get WeChat step count data

Do NOT use for:

• Web frontend development (use web-development skill)
• Backend service development (use cloudrun-development skill)
• UI design only (use ui-design skill, but may combine with this skill)

---

How to use this skill (for a coding agent)

1. Follow project structure conventions

   • Mini program code in miniprogram directory
   • Cloud functions in cloudfunctions directory
   • Use latest base library version
   • Include page configuration files (e.g., index.json) when generating pages

2. Understand authentication characteristics

   • Important: Mini programs with CloudBase are naturally login-free
   • Never generate login pages or login flows
   • Get user identity via cloud.getWXContext().OPENID in cloud functions

3. Use WeChat Developer Tools correctly

   • Check project.config.json has appid field before opening
   • Use CLI command to open project pointing to directory containing project.config.json

4. Handle resources properly

   • Icons8 (Recommended): Use Icons8 for icon images (e.g., tabbar iconPath)
     • URL format: https://img.icons8.com/{style}/{size}/{color}/{icon-name}.png
     • Parameters:
       • style: ios (outline style) or ios-filled (filled style)
       • size: 100 (recommended 100px, file size < 5KB)
       • color: hex color code without # (e.g., 8E8E93 for gray, FF3B30 for red)
       • icon-name: icon name (e.g., checked--v1)
     • Examples:
       • Unselected (gray outline): https://img.icons8.com/ios/100/8E8E93/checked--v1.png
       • Selected (red filled): https://img.icons8.com/ios-filled/100/FF3B30/checked--v1.png
     • Advantages:
       • ✅ Very small file size (usually < 3KB)
       • ✅ Supports custom colors
       • ✅ Clean and professional icons
   • Use downloadRemoteFile tool to download resources
   • Avoid build errors by ensuring all referenced resources exist

---

WeChat Mini Program Development Rules

Project Structure

1. CloudBase Integration:

   • If user needs to develop mini program, you will use various WeChat CloudBase capabilities to develop the project
   • Mini program base library should use latest version

2. Directory Organization:

   • Mini program projects follow WeChat CloudBase best practices
   • Mini program code is generally in miniprogram directory
   • If developing cloud functions, they can be stored in cloudfunctions directory
   • Mini program's project.config.json needs to specify miniprogramRoot and other configurations

3. Page Generation:

   • When generating mini program pages, must include page configuration files such as index.json
   • Must comply with specifications to avoid compilation errors

Development Tools

WeChat Developer Tools Opening Project Workflow:

• When detecting current project is a mini program project, suggest user to use WeChat Developer Tools for preview, debugging, and publishing
• Before opening, confirm project.config.json has appid field configured. If not configured, must ask user to provide it
• Use WeChat Developer built-in CLI command to open project (pointing to directory containing project.config.json):
  • Windows: "C:\Program Files (x86)\Tencent\微信web开发者工具\cli.bat" open --project "项目根目录路径"
  • macOS: /Applications/wechatwebdevtools.app/Contents/MacOS/cli open --project "/path/to/project/root"
• Project root directory path is the directory containing project.config.json file

CloudBase Integration

1. Environment Configuration:

   • When using wx.cloud in mini program, need to specify environment ID
   • Environment ID can be queried via envQuery tool

2. Resource Management:

   • When generating mini program code, if material images are needed, such as tabbar's iconPath and other places, prefer Icons8 (see section 4 above for details)
   • Use downloadRemoteFile tool to download resources
   • When generating mini program code, if using iconPath and similar, must simultaneously help user download icons to avoid build errors