mcpField
W
wechat-miniprogram

wechat-miniprogram

github.com/joneqian开发32593 次安装37 周前更新
代码仓库

关于 wechat-miniprogram

wechat-miniprogram 是基于文档的微信小程序开发 Skill，提供项目结构、框架概念、组件、API 和云开发参考资料及示例，也涵盖调试与性能优化。

主要功能

  1. 01框架和项目结构参考指南
  2. 02组件与 API 文档
  3. 03云开发参考资料
  4. 04WXML、WXSS 和 WXS 模式示例
  5. 05调试与性能优化指导

适用场景

  1. 01开发微信小程序页面或组件
  2. 02查询小程序 API 用法
  3. 03调试或优化现有小程序

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/joneqian/claude-skills-suite --skill wechat-miniprogram

安装后在 Claude Code 中输入/wechat-miniprogram确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

index.md
references/
api.md
cloud.md
components.md
framework.md
getting_started.md
index.md
other.md
reference.md

详细介绍

微信小程序技能

基于官方文档生成的微信小程序开发框架技能。

何时使用此技能

在以下情况下应使用此技能：

  • 开发微信小程序
  • 使用 WXML、WXSS 或 WXS
  • 使用微信小程序 API
  • 构建微信组件
  • 实现微信开放能力
  • 调试小程序问题
  • 优化小程序性能

快速参考

项目结构
├── 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
常见模式

示例 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)
})

示例 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)
  }
})

示例 3（html）：


<view class="index">{{prop}}</view>

示例 4（js）：

// /components/index.js
Component({
  properties: {
    prop: {
      type: String,
      value: 'index.properties'
    },
  },
})

示例 5（css）：

/* /components/index.wxss */
.index {
  color: green;
}

示例 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"
}

示例 7（json）：

{
    "openId": "OPENID",
    "nickName": "NICKNAME",
    "gender": GENDER,
    "city": "CITY",
    "province": "PROVINCE",
    "country": "COUNTRY",
    "avatarUrl": "AVATARURL",
    "unionId": "UNIONID",
    "watermark":
    {
        "appid":"APPID",
        "timestamp":TIMESTAMP
    }
}

示例 8（js）：

wx.cloud.callFunction({
  name: 'myFunction',
  data: {
    weRunData: wx.cloud.CloudID('xxx'), // 这个 CloudID 值到云函数端会被替换
    obj: {
      shareInfo: wx.cloud.CloudID('yyy'), // 非顶层字段的 CloudID 不会被替换，会原样字符串展示
    }
  }
})

示例 9（html）：

<scroll-view type="list" scroll-y>
  <view> a </view>
  <view> b </view>
  <view> c </view>
</scroll-view>

示例 10（html）：

<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) {
    // Mini Program initialized
  },
  onShow(options) {
    // Mini Program shown
  },
  onHide() {
    // Mini Program hidden
  },
  globalData: {
    userInfo: null
  }
})
页面生命周期
Page({
  data: {
    message: 'Hello World'
  },
  onLoad(options) {
    // Page loaded
  },
  onShow() {
    // Page shown
  },
  onReady() {
    // Page ready
  },
  onHide() {
    // Page hidden
  },
  onUnload() {
    // Page unloaded
  }
})
WXML 数据绑定
<view>{{message}}</view>
<view wx:if="{{condition}}">Conditional</view>
<view wx:for="{{array}}" wx:key="id">{{item}}</view>
事件处理
<button bindtap="handleTap">Click Me</button>

Page({
  handleTap(e) {
    console.log(e)
  }
})

使用此技能

面向初学者

从 getting_started 参考文件开始，了解基础概念。

面向特定功能

使用相应类别的参考文件（api、framework 等）获取详细信息。

面向代码示例

上方的快速参考部分包含从官方文档中提取的常见模式。

资源

注意事项

  • 此技能由官方微信文档自动生成
  • 参考文件保留了源文档的结构和示例
  • 根据官方文档的要求，内容为中文

评论

支持 Markdown