Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
bighardperson avatar

Wechat Miniprogram

bighardperson/computer-science-skills-collection

  • 9 installs
  • 33 repo stars
  • Updated April 26, 2026
  • bighardperson/computer-science-skills-collection

WeChat Mini Program is a Claude skill that provides a WeChat Mini Program development framework covering WXML, WXSS, WXS, components, WeChat APIs, and cloud development.

About

WeChat Mini Program is a development-framework skill for building WeChat mini apps. It covers WXML templates, WXSS styles, WXS scripting, custom components, WeChat API integration, and cloud development. It was generated from the official WeChat documentation and bundles reference files for framework, components, APIs, and cloud. A developer uses it to build, debug, and optimize WeChat Mini Programs.

  • WeChat Mini Program framework: WXML templates, WXSS styles, WXS scripting
  • Covers components, WeChat APIs, and cloud development (yun kaifa)
  • Includes reference files: framework, components, api, cloud, config

Wechat Miniprogram by the numbers

  • 9 all-time installs (skills.sh)
  • Ranked #793 of 1,039 Mobile Development skills by installs in the Skillselion catalog
  • Data as of Jul 30, 2026 (Skillselion catalog sync)
At a glance

wechat-miniprogram capabilities & compatibility

Free; documentation-based framework skill with no API key requirement.

Capabilities
mobile development · frontend
Use cases
frontend · api development · ui design
Pricing
Free
From the docs

What wechat-miniprogram says it does

WeChat Mini Program (微信小程序) development framework skill, generated from official documentation.
SKILL.md
Working with WXML, WXSS, or WXS
SKILL.md
Using WeChat Mini Program APIs
SKILL.md
Cloud development (云开发)
SKILL.md
npx skills add https://github.com/bighardperson/computer-science-skills-collection --skill wechat-miniprogram

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs9
repo stars★ 33
Last updatedApril 26, 2026
Repositorybighardperson/computer-science-skills-collection ↗

What it does

Build and debug WeChat Mini Programs with WXML, WXSS, components, WeChat APIs, and cloud development.

Who is it for?

Developing WeChat Mini Programs with WXML/WXSS/WXS and WeChat APIs

Skip if: Native iOS/Android apps outside the WeChat Mini Program platform

When should I use this skill?

You are building, debugging, or optimizing a WeChat Mini Program

What you get

A working WeChat Mini Program with proper templates, components, and API usage

  • Mini Program pages and components
  • cloud functions
  • reference documentation

By the numbers

  • 10 quick-reference code examples
  • 6 bundled reference files

Files

SKILL.mdMarkdownGitHub ↗

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

Related skills

firebaseXcode Project SetupAutomatically create and configure a new Xcode project with Swift Package Manager dependencies for iOS or macOS agent projects.74.7k392expoExpo Tailwind SetupInstantly configure Tailwind CSS v4 with NativeWind v5 and react-native-css inside an Expo project for universal styling.46.7k2.3kexpoExpo Dev ClientCreate custom development clients for Expo React Native apps that need native modules or Apple-specific targets.45.9k2.3kavdleeSwiftui Expert SkillGet expert guidance when writing, reviewing, or refactoring SwiftUI views, state, performance, and modern iOS/macOS APIs.27.6k3.3kflutterFlutter Apply Architecture Best PracticesEnforce clean layered architecture when creating or refactoring a Flutter mobile application.25.4k2.7kexpoExpo ModuleCreate custom config plugins that safely modify native Android and iOS projects generated by Expo prebuild.25k2.3k

FAQ

What does WeChat Mini Program cover?

It covers WXML templates, WXSS styles, WXS scripting, component development, WeChat API integration, cloud development, and Mini Program lifecycle and performance optimization.

Where does its content come from?

It was automatically generated from the official WeChat documentation, and its reference files preserve the structure and examples from the source docs, with content in Chinese as per the official docs.

Mobile Developmentfrontend
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.