사용 방법
- 설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
- 필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
- 입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.
npx skills add https://github.com/joneqian/claude-skills-suite --skill wechat-miniprogram시작 전 확인
- 설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
- 별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.
원본 Skill 문서
원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.
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 componentsCommon 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
