gourdbaby/wechat-miniprogram-skill

Overview

This skill provides expert guidelines for building native WeChat Mini Programs using JavaScript with a focus on performance, minimal code size, and native compatibility. It enforces native APIs and patterns (no cross-platform frameworks) and prioritizes efficient rendering and predictable runtime behavior. Use these rules to produce maintainable, fast, and small Mini Program bundles.

How this skill works

The skill inspects code and architecture choices against native WeChat best practices: ES6+ arrow functions, async/await wrapping, Component-driven structure, and targeted setData updates. It highlights view and style conventions (wx:key, rpx, BEM), common platform pitfalls (iOS date parsing, navigation stack), and recommends native components for overlays and media interactions. Actionable fixes and examples are suggested to reduce runtime cost and bundle size.

When to use it

• When building or refactoring a native WeChat Mini Program in JavaScript (no TypeScript or cross-platform tools).
• When you need to optimize rendering performance and reduce expensive re-renders.
• When minimizing bundle size and relying on native API compatibility matters.
• When improving reliability across iOS and Android platform idiosyncrasies.
• When designing reusable UI where setData performance matters.

Best practices

• Always use Arrow Functions to preserve lexical this and avoid binding overhead.
• Wrap callback-based APIs in Promises and prefer async/await for readable async flow.
• Use this.setData with data paths for partial updates (e.g., 'list[0].text') to limit diff cost.
• Prefer Component() for reusable pieces to reduce page setData scope and improve reuse.
• Include wx:key in wx:for loops and choose bind:tap or catch:tap depending on event bubbling needs.
• Use rpx for responsive measurements and follow BEM naming for predictable WXSS.

Example use cases

• Refactor a page that repeatedly calls setData with whole objects to use data path partial updates and reduce re-render time.
• Migrate shared UI into Component() to localize state updates and shrink per-page logic.
• Fix date parsing bugs on iOS by normalizing date strings replacing '-' with '/' before new Date().
• Optimize navigation by using wx.switchTab for tab pages and monitoring page stack to avoid exceeding 10 entries.
• Overlay controls reliably on canvas/video/map using <cover-view> to avoid native rendering conflicts.