微信小程序开发框架技能：官方文档、API、组件、云开发与性能优化指南 | SkillsMD微信小程序开发框架技能：官方文档、API、组件、云开发与性能优化指南
wechat-miniprogram by joneqian/claude-skills-suite
npx skills add https://github.com/joneqian/claude-skills-suite --skill wechat-miniprogram🇨🇳中文介绍
微信小程序技能
微信小程序开发框架技能，基于官方文档生成。
何时使用此技能
此技能应在以下场景触发：
- 开发微信小程序
- 处理 WXML、WXSS 或 WXS
- 使用微信小程序 API
- 构建微信组件
- 实现微信开放能力
- 调试小程序问题
- 优化小程序性能
快速参考
项目结构
├── app.js # 应用逻辑
├── app.json # 应用配置
├── app.wxss # 全局样式
├── pages/
│ └── index/
│ ├── index.js # 页面逻辑
│ ├── index.json # 页面配置
│ ├── index.wxml # 页面模板
│ └── index.wxss # 页面样式
└── components/ # 自定义组件
常用模式
示例 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)
})
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
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)
}
})
<!-- /components/index.wmxl -->
<view class="index">{{prop}}</view>
// /components/index.js
Component({
properties: {
prop: {
type: String,
value: 'index.properties'
},
},
})
/* /components/index.wxss */
.index {
color: green;
}
{
"nickName": "Band",
"gender": 1,
"language": "zh_CN",
"city": "Guangzhou",
"province": "Guangdong",
"country": "CN",
"avatarUrl": "http://wx.qlogo.cn/mmopen/vi_32/1vZvI39NWFQ9XM4LtQpFrQJ1xlgZxx3w7bQxKARol6503Iuswjjn6nIGBiaycAjAtpujxyzYsrztuuICqIM5ibXQ/0"
}
{
"openId": "OPENID",
"nickName": "NICKNAME",
"gender": GENDER,
"city": "CITY",
"province": "PROVINCE",
"country": "COUNTRY",
"avatarUrl": "AVATARURL",
"unionId": "UNIONID",
"watermark":
{
"appid":"APPID",
"timestamp":TIMESTAMP
}
}
wx.cloud.callFunction({
name: 'myFunction',
data: {
weRunData: wx.cloud.CloudID('xxx'), // 这个 CloudID 值到云函数端会被替换
obj: {
shareInfo: wx.cloud.CloudID('yyy'), // 非顶层字段的 CloudID 不会被替换，会原样字符串展示
}
}
})
<scroll-view type="list" scroll-y>
<view> a </view>
<view> b </view>
<view> c </view>
</scroll-view>
<scroll-view type="list" scroll-y>
<virtual-comp>
<view> a </view>
<view> b </view>
<view> c </view>
</virtual-comp>
</scroll-view>
参考文件
此技能包含 references/ 目录下的完整文档：
- getting_started.md - 快速入门和介绍
- framework.md - 小程序框架（逻辑层、视图层）
- components.md - 内置组件
- api.md - API 参考
- cloud.md - 云开发
- reference.md - 配置参考
需要详细信息时，使用 view 命令读取特定的参考文件。
核心概念
应用生命周期
App({
onLaunch(options) {
// 小程序初始化完成时触发
},
onShow(options) {
// 小程序启动或从后台进入前台显示时触发
},
onHide() {
// 小程序从前台进入后台时触发
},
globalData: {
userInfo: null
}
})
页面生命周期
Page({
data: {
message: 'Hello World'
},
onLoad(options) {
// 页面加载时触发
},
onShow() {
// 页面显示时触发
},
onReady() {
// 页面初次渲染完成时触发
},
onHide() {
// 页面隐藏时触发
},
onUnload() {
// 页面卸载时触发
}
})
WXML 数据绑定
<view>{{message}}</view>
<view wx:if="{{condition}}">条件渲染</view>
<view wx:for="{{array}}" wx:key="id">{{item}}</view>
事件处理
<button bindtap="handleTap">点击我</button>
Page({
handleTap(e) {
console.log(e)
}
})
使用此技能
对于初学者
从 getting_started 参考文件开始，了解基础概念。
对于特定功能
使用相应的分类参考文件（api、framework 等）获取详细信息。
对于代码示例
上面的快速参考部分包含了从官方文档中提取的常用模式。
资源
说明
- 此技能基于微信官方文档自动生成
- 参考文件保留了源文档的结构和示例
- 内容按照官方文档使用中文
React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性
120,000 周安装
