MCPInstall

wechat-miniprogram

by joneqianFrontend & Design

WeChat Mini Program development framework. Use for building WeChat mini apps, WXML templates, WXSS styles, WXS scripting, component development, and WeChat API integration.

Installs
593
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/joneqian/claude-skills-suite --skill wechat-miniprogram
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads wechat-miniprogram automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

WeChat Mini Program Skill

WeChat Mini Program (微信小程序) development framework skill, generated from official documentation.

When to Use This Skill

This skill should be triggered when:

  • Developing WeChat Mini Programs (微信小程序)
  • Working with WXML, WXSS, or WXS
  • Using WeChat Mini Program APIs
  • Building WeChat components
  • Implementing WeChat open capabilities (开放能力)
  • Debugging Mini Program issues
  • Optimizing Mini Program performance

Quick Reference

Project Structure

├── app.js          # App logic
├── app.json        # App configuration
├── app.wxss        # Global styles
├── pages/
│   └── index/
│       ├── index.js    # Page logic
│       ├── index.json  # Page configuration
│       ├── index.wxml  # Page template
│       └── index.wxss  # Page styles
└── components/     # Custom components

Common Patterns

Example 1 (javascript):

WeixinJSBridge.invoke('imagePreview', {
    current: 'http://inews.gtimg.com/newsapp_bt/0/1693121381/641',
    urls: [ // 所有图片的URL列表，数组格式
        'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
        'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
        'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
    ]
}, function(res) {
    console.log(res.err_msg)
})

Example 2 (javascript):

wx.previewImage({
  current: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
  urls: [ // 所有图片的URL列表，数组格式
    'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
    'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
    'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
  ],
  success: function(res) {
    console.log(res)
  }
})

Example 3 (html):

<!-- /components/index.wmxl -->
<view class="index">{{prop}}</view>

Example 4 (js):

// /components/index.js
Component({
  properties: {
    prop: {
      type: String,
      value: 'index.properties'
    },
  },
})

Example 5 (css):

/* /components/index.wxss */
.index {
  color: green;
}

Example 6 (json):

{
  "nickName": "Band",
  "gender": 1,
  "language": "zh_CN",
  "city": "Guangzhou",
  "province": "Guangdong",
  "country": "CN",
  "avatarUrl": "http://wx.qlogo.cn/mmopen/vi_32/1vZvI39NWFQ9XM4LtQpFrQJ1xlgZxx3w7bQxKARol6503Iuswjjn6nIGBiaycAjAtpujxyzYsrztuuICqIM5ibXQ/0"
}

Example 7 (json):

{
    "openId": "OPENID",
    "nickName": "NICKNAME",
    "gender": GENDER,
    "city": "CITY",
    "province": "PROVINCE",
    "country": "COUNTRY",
    "avatarUrl": "AVATARURL",
    "unionId": "UNIONID",
    "watermark":
    {
        "appid":"APPID",
        "timestamp":TIMESTAMP
    }
}

Example 8 (js):

wx.cloud.callFunction({
  name: 'myFunction',
  data: {
    weRunData: wx.cloud.CloudID('xxx'), // 这个 CloudID 值到云函数端会被替换
    obj: {
      shareInfo: wx.cloud.CloudID('yyy'), // 非顶层字段的 CloudID 不会被替换，会原样字符串展示
    }
  }
})

Example 9 (html):

<scroll-view type="list" scroll-y>
  <view> a </view>
  <view> b </view>
  <view> c </view>
</scroll-view>

Example 10 (html):

<scroll-view type="list" scroll-y>
  <virtual-comp>
    <view> a </view>
    <view> b </view>
    <view> c </view>
  </virtual-comp>
</scroll-view>

Reference Files

This skill includes comprehensive documentation in references/:

  • getting_started.md - Quick start and introduction
  • framework.md - Mini Program framework (逻辑层、视图层)
  • components.md - Built-in components
  • api.md - API reference
  • cloud.md - Cloud development (云开发)
  • reference.md - Configuration reference

Use view to read specific reference files when detailed information is needed.

Key Concepts

App Lifecycle

App({
  onLaunch(options) {
    // Mini Program initialized
  },
  onShow(options) {
    // Mini Program shown
  },
  onHide() {
    // Mini Program hidden
  },
  globalData: {
    userInfo: null
  }
})

Page Lifecycle

Page({
  data: {
    message: 'Hello World'
  },
  onLoad(options) {
    // Page loaded
  },
  onShow() {
    // Page shown
  },
  onReady() {
    // Page ready
  },
  onHide() {
    // Page hidden
  },
  onUnload() {
    // Page unloaded
  }
})

WXML Data Binding

<view>{{message}}</view>
<view wx:if="{{condition}}">Conditional</view>
<view wx:for="{{array}}" wx:key="id">{{item}}</view>

Event Handling

<button bindtap="handleTap">Click Me</button>

Page({
  handleTap(e) {
    console.log(e)
  }
})

Working with This Skill

For Beginners

Start with the getting_started reference file for foundational concepts.

For Specific Features

Use the appropriate category reference file (api, framework, etc.) for detailed information.

For Code Examples

The quick reference section above contains common patterns extracted from the official docs.

Resources

Notes

  • This skill was automatically generated from official WeChat documentation
  • Reference files preserve the structure and examples from source docs
  • Content is in Chinese as per official documentation

FAQ

What does the wechat-miniprogram skill do?

WeChat Mini Program development framework. Use for building WeChat mini apps, WXML templates, WXSS styles, WXS scripting, component development, and WeChat API integration.

How do I install wechat-miniprogram?

Run npx skills add https://github.com/joneqian/claude-skills-suite --skill wechat-miniprogram in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/wechat-miniprogram/ (personal) or .claude/skills/wechat-miniprogram/ (project).

Which AI agents can use wechat-miniprogram?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is wechat-miniprogram safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains wechat-miniprogram?

It is published by joneqian in joneqian/claude-skills-suite. It has 593 recorded installs.

More from joneqian/claude-skills-suite

View all →

tdesign-miniprogram

joneqian/claude-skills-suite

Open the skill to read its SKILL.md instructions.

398 installs

ui-ux-pro-max

joneqian/claude-skills-suite

Open the skill to read its SKILL.md instructions.

Frontend & Design92 installs

sequelize-patterns

joneqian/claude-skills-suite

Open the skill to read its SKILL.md instructions.

62 installs

mysql-patterns

joneqian/claude-skills-suite

Open the skill to read its SKILL.md instructions.

Data & Databases62 installs

backend-patterns

joneqian/claude-skills-suite

Open the skill to read its SKILL.md instructions.

Backend & APIs56 installs

security-review

joneqian/claude-skills-suite

Open the skill to read its SKILL.md instructions.

Code Quality & Workflow55 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs