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(