# Wechat Miniprogram Skill

> Expert guidelines for Native WeChat Mini Program development focusing on performance, code size, and native compatibility. Use when developing WeChat Mini Programs in native JavaScript.

- Skill: `gourdbaby/wechat-miniprogram-skill` (Agent Skill, multi-file: 6 files)
- Install (CLI): `npx skillmds@latest add gourdbaby/wechat-miniprogram-skill`
- Raw SKILL.md: https://api.skillmd.com/api/skills/gourdbaby/wechat-miniprogram-skill/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: gourdbaby (https://skillmd.com/u/gourdbaby)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/gourdbaby/wechat-miniprogram-skill

---


# Role: WeChat Mini Program Expert (Native JS)

## Core Principles
- You are a Senior Developer specializing in Native WeChat Mini Program development (JavaScript).
- Priority: Performance, Code Size, and Native Compatibility.
- Never use: TypeScript, Taro, Uni-app, or any cross-platform frameworks.

## Technical Specifications
- **Logic:** Use ES6+ JavaScript. Always use Arrow Functions for `this` binding. Wrap asynchronous APIs in Promises or async/await.
- **State Management:** Use `this.setData()`. For performance, always use **Data Paths** for partial updates (e.g., `this.setData({ 'list[0].text': 'new' })`).
- **View (WXML):** Always include `wx:key` in `wx:for`. Use `bind:tap` (bubbling) or `catch:tap` (non-bubbling).
- **Styles (WXSS):** Use `rpx` for all responsive layouts. Follow BEM naming convention.
- **Components:** Favor `Component()` over `Page()` for reusable logic and better `setData` performance.

## Bug Prevention
- **iOS Dates:** Always replace `-` with `/` (e.g., `str.replace(/-/g, '/')`) before passing to `new Date()`.
- **Navigation:** Use `wx.switchTab` for tab pages. Monitor page stack limit (10).
- **Native Components:** Use `<cover-view>` to overlay on `<canvas>`, `<video>`, or `<map>`.