WeChat MiniProgram Dev
微信小程序开发指南 - 从入门到精通。当用户提到微信小程序、小程序开发、WeChat Mini Program、wx API、微信小程序框架时使用此技能。 Skill: WeChat MiniProgram Dev Owner: zhibuyu Summary: 微信小程序开发指南 - 从入门到精通。当用户提到微信小程序、小程序开发、WeChat Mini Program、wx API、微信小程序框架时使用此技能。 Tags: latest:1.0.0, miniprogram:1.0.0, wechat:1.0.0, weixin:1.0.0 Version history: v1.0.0 | 2026-03-24T16:39:32.744Z | auto Initial release of the WeChat Mini Program development skill. - Provides a comprehensive guide for WeChat Mini Program development from beginner to advanced levels.
Rank
62
Safety
84
Downloads
1.9k
Updated
Oct 9, 2026
Version
1.0.0
Source
CLAWHUB
About
What it does, and when to use it.
Capability contract not published. No trust telemetry is available yet. 1.9K downloads reported by the source. Last updated 10/9/2026.
Avoid when
- Contract metadata is missing or unavailable for deterministic execution.
Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing
Public facts
Every fact links back to the source it came from.
- Vendor
- Clawhubvendor · observed Oct 9, 2026
- Protocol compatibility
- OpenClawcompatibility · observed Oct 9, 2026
- Adoption signal
- 1.9K downloadsadoption · observed Oct 9, 2026
- Latest release
- 1.0.0release · observed Mar 24, 2026
- Handshake status
- UNKNOWNsecurity
Install and run
Setup complexity: low.
clawhub skill install s178bh06k3esrc9m12h98ej7j583hcyk:wechat-miniprogram-skill- Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.
- Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.
Contract: missing
curl -s "https://www.xpersona.co/api/v1/agents/clawhub-zhibuyu-wechat-miniprogram-skill/snapshot"
Documentation
CLAWHUB
13,198 characters of source documentation, loaded on request.
Extracted files
5 files captured from the source.
SKILL.md
---
name: wechat-miniprogram-skill
version: 1.0.0
description: 微信小程序开发指南 - 从入门到精通。当用户提到微信小程序、小程序开发、WeChat Mini Program、wx API、微信小程序框架时使用此技能。
---
# 微信小程序开发 Skill
> 微信小程序开发指南 - 从入门到精通
## 官方文档
- 开发文档: https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/
- 框架参考: https://developers.weixin.qq.com/miniprogram/dev/reference/
- 组件文档: https://developers.weixin.qq.com/miniprogram/dev/component/
- API 文档: https://developers.weixin.qq.com/miniprogram/dev/api/
---
## 小程序简介
小程序是一种全新的连接用户与服务的方式,可以在微信内被便捷地获取和传播。
### 技术特点
- **快速加载**:从微信本地加载资源
- **原生体验**:流畅的页面切换和操作反馈
- **强大能力**:拍摄、录音、支付、分享等
- **易开发**:类似 Web 开发,学习成本低
### 与 Web 开发的区别
| 特性 | 小程序 | Web |
|------|--------|-----|
| 渲染线程 | 双线程 | 单线程 |
| DOM API | 不可用 | 可用 |
| jQuery/Zepto | 不可用 | 可用 |
| 运行环境 | iOS/Android 微信客户端 | 浏览器 |
---
## 项目结构
```
miniprogram/
├── app.js # 小程序入口文件
├── app.json # 全局配置
├── app.wxss # 全局样式
├── pages/ # 页面目录
│ └── index/
│ ├── index.js
│ ├── index.json
│ ├── index.wxml
│ └── index.wxss
├── components/ # 自定义组件
└── utils/ # 工具函数
```
---
## 全局配置 (app.json)
```json
{
"pages": ["pages/index/index"],
"window": {
"navigationBarBackgroundColor": "#000000",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "小程序标题"
},
"tabBar": {
"color": "#999999",
"selectedColor": "#007AFF",
"list": [
{"pagePath": "pages/index/index", "text": "首页"}
]
}
}
```
---
## 页面注册 (Page)
```javascript
Page({
data: {
text: "Hello World"
},
onLoad: function(options) {
// 页面创建时执行
},
onShow: function() {
// 页面出现在前台
},
onPullDownRefresh: function() {
// 下拉刷新
},
handleTap: function() {
this.setData({ text: '点击了' });
}
});
```
---
## 模板语法 (WXML)
```xml
<!-- 数据绑定 -->
<view>{{message}}</view>
<!-- 列表渲染 -->
<view wx:for="{{array}}" wx:key="id">{{item.name}}</view>
<!-- 条件渲染 -->
<view wx:if="{{condition}}">显示</view>
<!-- 事件处理 -->
<view bindtap="handleTap">点击</view>
```
---
## 常用 API
### 网络请求
```javascript
wx.request({
url: 'https://api.example.com/data',
method: 'GET',
success: function(res) {
console.log(res.data);
}
});
```
### 路由跳转
```javascript
wx.navigateTo({ url: '/pages/detail/detail?id=1' });
wx.redirectTo({ url: '/pages/index/index' });
wx.switchTab({ url: '/pages/index/index' });
wx.navigateBack({ delta: 1 });
```
### 数据缓存
```javascript
wx.setStorageSync('key', 'value');
const value = wx.getStorageSync('key');
```
---
## 自定义组件
```javascript
Component({
properties: {
title: { type: String, value: '默认标题' }
},
data: { count: 0 },
methods: {
increment: function() {
this.setData({ count: this.data.count + 1 });
this.triggerEvent('change', { count: this.data.count });
}
}
});
```
---
## 注意事项
1. **域名配置**:request 域名需在小程序后台配置
2. **HTTPS 要求**:所有网络请求必须使用 HTTPS
3. **代码包大小**:主包限制 2MB,总分包限制 20MB
4. **用户隐私**:使用地理位置等敏感接口需声明
---
## 参考资源
- [微信小程序官_meta.json
{
"ownerId": "kn70q7dbakqn5hm1anha9ppn9h81xqgy",
"slug": "wechat-miniprogram-skill",
"version": "1.0.0",
"publishedAt": 1774370372744
}references/app-configuration.md
# 微信小程序全局配置 app.json
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象。
## 配置项
| 属性 | 类型 | 必填 | 描述 |
|------|------|------|------|
| entryPagePath | string | 否 | 小程序默认启动首页 |
| pages | string[] | 是 | 页面路径列表 |
| window | Object | 否 | 全局的默认窗口表现 |
| tabBar | Object | 否 | 底部 tab 栏的表现 |
| networkTimeout | Object | 否 | 网络超时时间 |
| debug | boolean | 否 | 是否开启 debug 模式 |
| functionalPages | boolean | 否 | 是否启用插件功能页 |
| subpackages | Object[] | 否 | 分包结构配置 |
| workers | string | 否 | Worker 代码放置的目录 |
| requiredBackgroundModes | string[] | 否 | 需要在后台使用的能力 |
| requiredPrivateInfos | string[] | 否 | 调用的地理位置相关隐私接口 |
| plugins | Object | 否 | 使用到的插件 |
| preloadRule | Object | 否 | 分包预下载规则 |
| resizable | boolean | 否 | PC/iPad 小程序窗口调整 |
| usingComponents | Object | 否 | 全局自定义组件配置 |
| permission | Object | 否 | 小程序接口权限相关设置 |
| sitemapLocation | string | 是 | 指明 sitemap.json 的位置 |
| style | string | 否 | 指定使用升级后的 weui 样式 |
| useExtendedLib | Object | 否 | 指定需要引用的扩展库 |
| darkmode | boolean | 否 | 小程序支持 DarkMode |
| themeLocation | string | 否 | 指明 theme.json 的位置 |
| lazyCodeLoading | string | 否 | 配置自定义组件代码按需注入 |
## window 配置
用于设置小程序的状态栏、导航条、标题、窗口背景色。
| 属性 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色 |
| navigationBarTextStyle | string | white | 导航栏标题颜色,black/white |
| navigationBarTitleText | string | - | 导航栏标题文字内容 |
| navigationStyle | string | default | 导航栏样式,default/custom |
| backgroundColor | HexColor | #ffffff | 窗口的背景色 |
| backgroundTextStyle | string | dark | 下拉 loading 样式,dark/light |
| enablePullDownRefresh | boolean | false | 是否开启全局下拉刷新 |
| onReachBottomDistance | number | 50 | 页面上拉触底事件触发距离(px) |
| pageOrientation | string | portrait | 屏幕旋转设置 |
## tabBar 配置
如果小程序是一个多 tab 应用,可以通过 tabBar 配置项指定 tab 栏的表现。
| 属性 | 类型 | 必填 | 默认值 | 描述 |
|------|------|------|--------|------|
| color | HexColor | 是 | - | tab 上文字默认颜色 |
| selectedColor | HexColor | 是 | - | tab 上文字选中时颜色 |
| backgroundColor | HexColor | 是 | - | tab 的背景色 |
| borderStyle | string | 否 | black | tabbar 上边框颜色 |
| list | Array | 是 | - | tab 列表,最少2个最多5个 |
| position | string | 否 | bottom | tabBar 位置,bottom/top |
| custom | boolean | 否 | false | 自定义 tabBar |
## networkTimeout 配置
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| request | number | 60000 | wx.request 超时时间(ms) |
| connectSocket | number | 60000 | wx.connectSocket 超时时间(ms) |
| uploadFile | number | 60000 | wx.uploadFile 超时时间(ms) |
| downloadFile | number | 60000 | wx.downloadFile 超时时间(ms) |
## 示例
```json
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"navigationBarBackgroundColor": "#000000",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "小程序标题",
"backgroundColor": "#ffffff"
},
"tabBar": {
"color": "#999999",
"selectedColor": "#007AFF",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "icons/home.png",
"references/miniprogram-framework.md
# 微信小程序开发指南 ## 开发指南 小程序提供了一个简单、高效的应用开发框架和丰富的组件及API,帮助开发者在微信中开发具有原生 APP 体验的服务。 ## 参考文档 - [小程序框架参考文档](https://developers.weixin.qq.com/miniprogram/dev/reference/) - [小程序组件参考文档](https://developers.weixin.qq.com/miniprogram/dev/component/) - [小程序 API 参考文档](https://developers.weixin.qq.com/miniprogram/dev/api/) - [小程序服务端 API 参考文档](https://developers.weixin.qq.com/miniprogram/dev/api-backend/) - [微信开发者工具参考文档](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html) - [微信云托管参考文档](https://developers.weixin.qq.com/miniprogram/dev/wxcloudservice/wxcloudrun/src/basic/intro.html) - [微信云开发参考文档](https://developers.weixin.qq.com/miniprogram/dev/wxcloudservice/wxcloud/basis/getting-started.html)
references/page-registration.md
# 微信小程序页面注册
对于小程序中的每个页面,都需要在页面对应的 js 文件中进行注册,指定页面的初始数据、生命周期回调、事件处理函数等。
## 使用 Page 构造器注册页面
简单的页面可以使用 Page() 进行构造。
```javascript
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// 页面创建时执行
},
onShow: function() {
// 页面出现在前台时执行
},
onReady: function() {
// 页面首次渲染完毕时执行
},
onHide: function() {
// 页面从前台变为后台时执行
},
onUnload: function() {
// 页面销毁时执行
},
onPullDownRefresh: function() {
// 触发下拉刷新时执行
},
onReachBottom: function() {
// 页面触底时执行
},
onShareAppMessage: function () {
// 页面被用户分享时执行
},
onPageScroll: function() {
// 页面滚动时执行
},
onResize: function() {
// 页面尺寸变化时执行
},
onTabItemTap(item) {
// tab 点击时执行
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// 事件响应函数
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
})
}
})
```
## 在页面中使用 behaviors
页面可以引用 behaviors,用来让多个页面有相同的数据字段和方法。
```javascript
// my-behavior.js
module.exports = Behavior({
data: {
sharedText: 'This is a piece of data shared between pages.'
},
methods: {
sharedMethod: function() {
this.data.sharedText === 'This is a piece of data shared between pages.'
}
}
})
// page-a.js
var myBehavior = require('./my-behavior.js')
Page({
behaviors: [myBehavior],
onLoad: function() {
this.data.sharedText === 'This is a piece of data shared between pages.'
}
})
```
## 使用 Component 构造器构造页面
对于复杂的页面,可以使用 Component 构造器来构造页面。方法需要放在 methods: { } 里面。
```javascript
Component({
data: {
text: "This is page data."
},
methods: {
onLoad: function(options) {
// 页面创建时执行
},
onPullDownRefresh: function() {
// 下拉刷新时执行
},
// 事件响应函数
viewTap: function() {
// ...
}
}
})
```
这种创建方式非常类似于自定义组件,可以像自定义组件一样使用 behaviors 等高级特性。AionUi
Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!
activepieces
AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents
cherry-studio
AI productivity studio with smart chat, autonomous agents, and 300+ assistants.
CopilotKit
The Frontend for Agents & Generative UI. React + Angular
Machine-readable data
The same record, as JSON, for agents and crawlers.
{
"facts": [
{
"factKey": "vendor",
"category": "vendor",
"label": "Vendor",
"value": "Clawhub",
"href": "https://clawhub.ai/zhibuyu/skills/wechat-miniprogram-skill",
"sourceUrl": "https://clawhub.ai/zhibuyu/skills/wechat-miniprogram-skill",
"sourceType": "profile",
"confidence": "medium",
"observedAt": "2026-10-09T23:10:29.720Z",
"isPublic": true
},
{
"factKey": "protocols",
"category": "compatibility",
"label": "Protocol compatibility",
"value": "OpenClaw",
"href": "https://www.xpersona.co/api/v1/agents/clawhub-zhibuyu-wechat-miniprogram-skill/contract",
"sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-zhibuyu-wechat-miniprogram-skill/contract",
"sourceType": "contract",
"confidence": "medium",
"observedAt": "2026-10-09T23:10:29.720Z",
"isPublic": true
},
{
"factKey": "traction",
"category": "adoption",
"label": "Adoption signal",
"value": "1.9K downloads",
"href": "https://clawhub.ai/zhibuyu/wechat-miniprogram-skill",
"sourceUrl": "https://clawhub.ai/zhibuyu/wechat-miniprogram-skill",
"sourceType": "profile",
"confidence": "medium",
"observedAt": "2026-10-09T23:10:29.720Z",
"isPublic": true
},
{
"factKey": "latest_release",
"category": "release",
"label": "Latest release",
"value": "1.0.0",
"href": "https://clawhub.ai/zhibuyu/wechat-miniprogram-skill",
"sourceUrl": "https://clawhub.ai/zhibuyu/wechat-miniprogram-skill",
"sourceType": "release",
"confidence": "medium",
"observedAt": "2026-03-24T16:39:32.744Z",
"isPublic": true
},
{
"factKey": "handshake_status",
"category": "security",
"label": "Handshake status",
"value": "UNKNOWN",
"href": "https://www.xpersona.co/api/v1/agents/clawhub-zhibuyu-wechat-miniprogram-skill/trust",
"sourceUrl": "https://www.xpersona.co/api/v1/agents/clawhub-zhibuyu-wechat-miniprogram-skill/trust",
"sourceType": "trust",
"confidence": "medium",
"observedAt": null,
"isPublic": true
}
],
"events": [
{
"eventType": "release",
"title": "Release 1.0.0",
"description": "Initial release of the WeChat Mini Program development skill. - Provides a comprehensive guide for WeChat Mini Program development from beginner to advanced levels. - Includes official documentation links, project structure explanation, and key concepts. - Covers configuration, page registration, template syntax, common APIs, and custom components. - Lists important notes for development such as domain configuration, HTTPS requirements, code size limits, and user privacy. - Offers quick reference resources for further study.",
"href": "https://clawhub.ai/zhibuyu/wechat-miniprogram-skill",
"sourceUrl": "https://clawhub.ai/zhibuyu/wechat-miniprogram-skill",
"sourceType": "release",
"confidence": "medium",
"observedAt": "2026-03-24T16:39:32.744Z",
"isPublic": true
}
]
}Record generated Oct 10, 2026.
