Agent skill

wechat-miniprogram

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

View SKILL.md on GitHub Repository
Stars 9
Forks 1

Install this agent skill to your Project

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

SKILL.md

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):

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):

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):

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

Example 4 (js):

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

Example 5 (css):

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

Example 6 (json):

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):

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):

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

Example 9 (html):

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

Example 10 (html):

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

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

Page Lifecycle

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

WXML Data Binding

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

Event Handling

wxml
<button bindtap="handleTap">Click Me</button>
javascript
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

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

joneqian/claude-skills-suite

sequelize-patterns

Sequelize Node.js ORM for SQL databases. Use for database models, migrations, associations, queries, transactions, validations, hooks, and working with PostgreSQL, MySQL, MariaDB, SQLite, SQL Server.

9 1
Explore
joneqian/claude-skills-suite

deepagents

LangChain Deep Agents framework for building autonomous coding agents. Use for agent harness, backends, subagents, human-in-the-loop, long-term memory, middleware, and CLI-based agent development.

9 1
Explore
joneqian/claude-skills-suite

ui-ux-pro-max

UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.

9 1
Explore
joneqian/claude-skills-suite

iterative-retrieval

Pattern for progressively refining context retrieval to solve the subagent context problem

9 1
Explore
joneqian/claude-skills-suite

d3-viz

Creating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, network diagrams, geographic visualisations, or any complex SVG-based data visualisation that requires fine-grained control over visual elements, transitions, or interactions. Use this for bespoke visualisations beyond standard charting libraries, whether in React, Vue, Svelte, vanilla JavaScript, or any other environment.

9 1
Explore
joneqian/claude-skills-suite

continuous-learning-v2

Instinct-based learning system that observes sessions via hooks, creates atomic instincts with confidence scoring, and evolves them into skills/commands/agents.

9 1
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results