mcpField
W
wechat-miniprogram-skill

wechat-miniprogram-skill

github.com/gourdbabyDevelopment91.4k installsUpdated 40w ago
Repository

About wechat-miniprogram-skill

A skill for native JavaScript development of WeChat Mini Programs, focused on performance, code size, and native compatibility. It sets conventions for pages, components, styles, state updates, and common pitfalls, while excluding cross-platform frameworks.

Key features

  1. 01Native JavaScript development conventions
  2. 02State updates with setData
  3. 03WXML list and event rules
  4. 04Responsive WXSS layout conventions
  5. 05Date and navigation cautions

Use cases

  1. 01Build native WeChat Mini Program pages
  2. 02Optimize partial setData updates
  3. 03Write reusable Mini Program components
  4. 04Address date and navigation pitfalls

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/gourdbaby/wechat-miniprogram-skill --skill wechat-miniprogram-skill

After installing, type/wechat-miniprogram-skillin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

.opencode-rules
package.json
README.md
.cursorrules
.antigravityrules

Details

From the project README

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>.

Comments

Markdown supported