小程序开发工具（免费版）

概述

本工具帮助个人开发者遵循微信小程序开发规范，覆盖页面/组件结构、数据绑定与事件、生命周期、WXSS 样式与 wx:key 性能要点。适合单项目本地开发与预览. 关键词: dev

核心能力

核心功能执行

用input_params参数进行配置.

处理: 解析核心功能执行的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回核心功能执行的响应数据,包含状态码、结果和日志.

• 执行此能力时使用input_params参数,支持创建/查询/导出操作

参数配置与调用

用config_options参数进行配置.

处理: 解析参数配置与调用的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回参数配置与调用的响应数据,包含状态码、结果和日志.

• 执行此能力时使用config_options参数,支持修改/重置/导入操作

结果处理与输出

用output_format参数进行配置.

处理: 解析结果处理与输出的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回结果处理与输出的响应数据,包含状态码、结果和日志.

• 执行此能力时使用output_format参数,支持导出/保存/转换操作 能力覆盖范围：本skill的核心能力覆盖以下场景关键词：面向个人开发者的、微信小程序开发规、范与避坑工具等。这些关键词对应description中声明的使用场景,均已在上述能力点中提供对应的操作支持.

使用场景

场景一：页面结构规范

pages/
  index/
    index.wxml     # 结构
    index.wxss     # 样式
    index.js       # 逻辑
    index.json     # 配置

// index.json
{
  "usingComponents": {"nav": "/components/nav/nav"},
  "navigationBarTitleText": "首页"
}

场景二：数据绑定与事件

<!-- index.wxml -->
<view wx:for="<配置项>" wx:key="id" bindtap="onTap" data-id="<配置项>">
  <配置项>
</view>

// index.js
Page({
  data: { list: [{id: 1, name: 'A'}] },
  onTap(e) {
    const id = e.currentTarget.dataset.id;
    this.setData({ [`list[${idx}].name`]: 'B' });  // 局部更新
  }
});

场景三：wx:key 性能

<!-- 列表必加 wx:key，提升 diff 性能 -->
<view wx:for="<配置项>" wx:key="id"><配置项></view>

不适用场景

以下场景小程序开发工具不适合处理：

• 实时流数据处理
• 小规模数据手动分析
• 非结构化文本情感分析

触发条件

需要数据分析、报表生成、统计洞察、数据可视化时使用。不适用于非本工具能力范围的需求.

快速开始

1. 用开发者工具创建项目.
2. 按规范组织页面/组件目录.
3. 数据绑定用 <配置项>，事件用 bind/catch.
4. 列表必加 wx:key. 响应解析: 完成完成后,查看输出响应确认任务状态。成功时输出包含解析摘要和响应数据;失败时根据错误信息排查问题,查阅错误解析章节获取恢复步骤.

示例

关键规范速查：

优秀实践

• wx:key 必加：列表不加 wx:key 会告警且 diff 慢.
• setData 局部：用路径更新 list[0].name，别整个 setData.
• rpx 适配：用 rpx 而非 px，自动适配屏宽.
• catch 阻冒泡：内部事件用 catch 防止冒泡到父.
• 资源压缩：图片用 CDN 或压缩，包体积限 2MB.

常见问题

Q1：setData 卡顿怎么办？ A：改为局部路径更新，减少数据量，避免频繁 setData. Q2：能开发多端（支付宝/字节）吗？ A：免费版聚焦微信小程序。多端框架与跨平台为专业版能力. Q3：包体积超 2MB 怎么办？ A：用分包加载，主包只留核心页，其余分包. Q4：免费版支持云开发吗？ A：支持基础云开发对接。企业云治理与 CI/CD 为专业版能力. Q5：自定义组件能继承吗？ A：用 behaviors 实现类似继承，组件间复用逻辑.

进阶用法

自定义组件开发

components/
  nav/
    nav.wxml     # 组件结构
    nav.wxss     # 组件样式
    nav.js       # 组件逻辑
    nav.json     # 组件配置

// nav.js
Component({
  properties: {
    title: { type: String, value: '' }
  },
  methods: {
    onTap() {
      this.triggerEvent('navtap', { title: this.data.title });
    }
  }
});

<!-- nav.wxml -->
<view class="nav" bindtap="onTap"><配置项></view>

数据绑定与 setData 优化

// 错误：整对象 setData（慢）
this.setData({ list: newList });
// ...
// 正确：局部路径更新（快）
this.setData({ [`list[${index}].name`]: newValue });
// ...
// 批量更新合并
this.setData({
  [`list[0].name`]: 'A',
  [`list[1].name`]: 'B',
  count: 2
});

生命周期运用

Page({
  onLoad(options) {
    // 页面加载一次，可取参数
    this.id = options.id;
  },
  onShow() {
    // 每次显示，刷新数据
    this.fetchData();
  },
  onHide() {
    // 隐藏，暂停定时器
    clearInterval(this.timer);
  },
  onUnload() {
    // 卸载，清理资源
  }
});

性能优化要点

分包加载

// app.json
{
  "pages": ["pages/index/index"],
  "subpackages": [
    {
      "root": "subpackageA",
      "pages": ["pages/detail/detail"]
    }
  ],
  "preloadRule": {
    "pages/index/index": {
      "network": "all",
      "packages": ["subpackageA"]
    }
  }
}

开发规范

• 目录清晰：按页面/组件分目录，命名一致.
• 配置分离：页面 json 独立配置，别堆 app.json.
• 事件规范：bind 不阻冒泡，catch 阻冒泡，按需用.
• 资源压缩：图片压缩，包体 < 2MB.
• 真机调试：模拟器与真机表现可能不同，必真机测.

依赖说明

运行环境

• Agent 平台: 支持SKILL.md的任意AI Agent（Claude Code / Cursor / Codex / Gemini CLI 等）
• 操作系统: Windows / macOS / Linux
• 微信开发者工具: 预览与调试

依赖详情

API Key 配置

• 本工具为纯 Markdown 指令，基础LLM由Agent平台提供
• 云开发需配置小程序 AppID 与云环境

可用性分类

• 分类: MD+EXEC（Markdown 指令 + 命令行执行）
• 说明: 通过自然语言指令驱动 Agent 生成小程序代码并核对规范

错误处理

已知限制

• 本地运行，不支持多设备同步
• 当前为免费版本,如需完整功能请升级到付费版获取全部能力

输出格式

{
  "success": true,
  "data": {
    "result": "小程序开发工具处理结果",
    "execution_time": "0.5s",
    "metadata": {
      "version": "1.0",
      "processor": "miniprogram dev"
    }
  },
  "execution_log": ["解析输入参数", "执行核心处理", "格式化输出结果"],
  "error": null
}