{"slug":"cm-miniprogram-engineer","title":"cm-miniprogram-engineer","summary":"微信小程序开发工程师 Skill，执行小程序开发任务，自动适配项目技术栈（原生小程序/Taro/uni-app 等），支持 Figma/Stitch 设计稿还原与云开发","platform":"Claude","tags":[],"authorName":"LLM Mart","authorSlug":"llm-mart","score":0,"source":"github","price":null,"verified":false,"createdAt":"2026-09-24T15:43:02.582939Z","repo":{"url":"https://github.com/kingxiaozhe/cm-workflow","stars":27,"forks":0,"license":"MIT","updatedAt":"2026-09-24T10:35:03Z"},"bodyHtml":"<hr>\n<h2>name: cm-miniprogram-engineer\ndescription: 微信小程序开发工程师 Skill，执行小程序开发任务，自动适配项目技术栈（原生小程序/Taro/uni-app 等），支持 Figma/Stitch 设计稿还原与云开发</h2>\n<h1>cm-miniprogram-engineer — 微信小程序开发工程师</h1>\n<p>执行微信小程序开发任务。自动识别项目技术栈，遵循项目 <code>.claude/rules/</code> 中的规范。</p>\n<p>涉及账号主体、类目、支付/广告、权限、云能力或首次发布准备时，读取\n<code>references/platform-readiness.md</code>；执行 feature 完成 QA、真机走查或发布准备时，\n读取 <code>references/release-checklist.md</code>。平台规则属于易变外部事实，按参考文件在当前\n官方文档/后台查证，不把固定门槛或社区经验当作长期规则。</p>\n<h2>触发条件</h2>\n<p>由 <code>/cm-ai</code> 自动调用，当 task 涉及微信小程序开发时触发。</p>\n<h2>工作流程</h2>\n<h3>0. 设计稿检查</h3>\n<p>开发前先读取已审批 design.md 的「设计基准」及 <code>design-baseline/</code>：</p>\n<ul>\n<li>已明确“无设计稿/无基准，按 design.md 自行实现” → 直接开发，<strong>不得重复询问</strong></li>\n<li><strong>有 Figma 链接</strong> → 调用 figma mcp</li>\n<li><strong>有 Stitch 项目</strong> → 调用 stitch mcp</li>\n<li>只有设计基准字段缺失、链接与落盘基准不一致、或 specs 内信息<strong>规格缺失或互相矛盾</strong>\n时才暂停询问；新输入会改变批准方案时停止并要求 <code>$cm-prd --change</code>，不在 N3 临时改规格</li>\n</ul>\n<p><strong>设计稿与业务的关系：</strong></p>\n<ul>\n<li>设计稿存在且完整 → 按设计稿还原</li>\n<li>设计稿存在但不是明显的缺失 → 自行补全功能</li>\n<li>设计稿存在但与业务需求有明显差距或缺失页面 → <strong>主动询问用户</strong>是否需要先还原设计稿再开发功能，等待用户回复后再继续</li>\n<li>已审批为没有设计稿 → 根据 design.md 和业务需求自行实现</li>\n</ul>\n<h3>1. 识别技术栈</h3>\n<p>读取项目配置自动判断，不做硬编码假设：</p>\n<ul>\n<li><code>project.config.json</code> / <code>project.private.config.json</code> → 项目类型、appid、编译配置</li>\n<li><code>app.json</code> → 页面路由、分包配置、tabBar、窗口表现、原生组件</li>\n<li><code>package.json</code>（如存在）→ 跨端框架（Taro / uni-app / mpvue / Remax...）、构建工具、依赖</li>\n<li>框架判断 → 原生小程序（WXML/WXSS/JS/JSON）还是跨端框架（Taro = React 语法、uni-app = Vue 语法）</li>\n<li>是否启用 <strong>云开发</strong>（<code>cloudfunctions/</code> 目录、<code>wx.cloud</code>）</li>\n</ul>\n<p>识别为微信小程序后记录 <code>DELIVERY_SHAPE=wechat-miniprogram</code>。平台就绪项缺失但只影响\n后续提审时允许继续本地开发并保留待决；功能本身依赖未确认的平台能力时 <code>BLOCKED</code>，\n不得用假 AppID、假资质或 Web target 绕过。</p>\n<h3>2. 读取上下文</h3>\n<ul>\n<li><code>.claude/rules/miniprogram.md</code>、<code>.claude/rules/coding-style.md</code>（如存在）</li>\n<li>design.md 中当前任务相关的模块设计</li>\n<li>扫描 <code>pages/</code>、<code>components/</code> 了解现有页面与组件结构和命名规律</li>\n<li><strong>重点扫描项目已有的自定义组件库</strong>（<code>components/</code>、<code>miniprogram/components/</code> 等），了解哪些组件已封装可复用</li>\n<li>查看 <code>app.json</code> 的 <code>usingComponents</code>、是否引入第三方 UI 库（Vant Weapp / TDesign / WeUI / ColorUI）</li>\n</ul>\n<h3>3. 开发</h3>\n<p><strong>组件封装与复用（重要）：</strong></p>\n<ul>\n<li>开发前先检查项目已有的自定义组件，能复用的绝不重写</li>\n<li>新建通用组件用 <code>Component</code> 构造器，放入项目约定的公共组件目录，并在 <code>usingComponents</code> 中按需引入</li>\n<li>业务组件和基础 UI 组件分层：基础组件不含业务逻辑，业务页面组合基础组件</li>\n<li>如果项目引入了第三方组件库（Vant Weapp / TDesign 小程序版 / WeUI 等），优先用库内组件，不自己造轮子</li>\n</ul>\n<p><strong>样式（WXSS）：</strong></p>\n<ul>\n<li>尺寸优先用 <strong>rpx</strong> 做多机型适配（750rpx = 屏幕宽度），避免写死 px</li>\n<li>颜色、圆角、间距等通过 WXSS 变量或公共样式文件统一管理，不硬编码具体值</li>\n<li>复用样式通过 <code>@import</code> 公共样式或组件封装，而非到处复制</li>\n<li>注意小程序 WXSS <strong>不支持</strong> 部分 CSS 选择器（如 <code>*</code>、属性选择器有限），用 class 选择器为主</li>\n</ul>\n<p><strong>页面与组件开发：</strong></p>\n<ul>\n<li>页面用 <code>Page({})</code>，组件用 <code>Component({})</code>，遵循项目已有模式</li>\n<li>生命周期：页面 <code>onLoad/onShow/onReady/onHide/onUnload</code>，组件 <code>lifetimes.attached/ready/detached</code></li>\n<li><code>data</code> 更新统一走 <code>setData</code>，<strong>只更新变化的字段</strong>，避免一次性 setData 大对象</li>\n<li>properties / observers / 事件命名跟随项目约定，文件命名（page/component 四件套 <code>.wxml/.wxss/.js/.json</code>）跟随项目已有规律</li>\n</ul>\n<p><strong>状态管理：</strong></p>\n<ul>\n<li>识别项目使用的方案（<code>globalData</code> / mobx-miniprogram / Taro 用 Redux·Zustand / uni-app 用 Vuex·Pinia）</li>\n<li>简单局部状态用页面/组件原生 <code>data</code></li>\n<li>跨页面共享参考 design.md 中的状态流转设计</li>\n</ul>\n<p><strong>数据请求：</strong></p>\n<ul>\n<li>原生：<code>wx.request</code>（封装统一的 request 工具，处理 baseURL、token、loading、错误）</li>\n<li>云开发：云函数 <code>wx.cloud.callFunction</code>、云数据库 <code>db.collection()</code></li>\n<li>基于 design.md 中的接口契约；后端未就绪 → 先写 mock，标注 <code>// TODO: replace mock when API ready</code></li>\n<li>统一处理错误提示（<code>wx.showToast</code>）和 loading 状态（<code>wx.showLoading</code>）</li>\n</ul>\n<p><strong>路由与导航：</strong></p>\n<ul>\n<li>页面注册在 <code>app.json</code> 的 <code>pages</code>，tabBar 页面用 <code>wx.switchTab</code>，普通页面 <code>wx.navigateTo</code>/<code>wx.redirectTo</code>/<code>wx.navigateBack</code></li>\n<li>页面栈最多 10 层，注意深层跳转改用 redirect</li>\n<li>参数通过 query 传递（<code>navigateTo({url:'/pages/x?id=1'})</code>），大对象用全局或本地缓存</li>\n</ul>\n<p><strong>登录与授权：</strong></p>\n<ul>\n<li>登录走 <code>wx.login</code> 拿 code → 后端换 openid/session；用户信息用 <code>wx.getUserProfile</code>（需用户点击触发）</li>\n<li>手机号、位置等敏感权限走对应的 <code>open-type</code> 按钮或 <code>wx.authorize</code>，处理拒绝授权的兜底</li>\n</ul>\n<h3>4. 验证</h3>\n<pre><code># 跨端框架（如项目使用）按实际命令执行\nnpm run lint\nnpm run build:weapp   # Taro 示例；uni-app 为 npm run dev:mp-weixin\n</code></pre>\n<ul>\n<li>原生小程序：在<strong>微信开发者工具</strong>中编译，确认无报错、页面渲染正常</li>\n<li>检查 <strong>真机预览</strong>（部分 API 与样式在真机和模拟器表现不同）</li>\n<li>读取项目配置与微信官方当前限制核对包体积；超限时配置分包、压缩资源或移至 CDN</li>\n<li>按 <code>references/release-checklist.md</code> 选择本 feature 相关专项；Web/H5 预览不得冒充\n微信开发者工具或真机证据。工具、扫码或账号权限不可用时如实标记 <code>BLOCKED</code>/待人工</li>\n</ul>\n<h2>常见坑</h2>\n<table>\n<thead>\n<tr>\n<th>问题</th>\n<th>处理</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>setData 频繁/数据量大导致卡顿</td>\n<td>只 setData 变化字段，避免在循环/滚动中高频调用，长列表用虚拟列表</td>\n</tr>\n<tr>\n<td>px 写死导致机型适配错乱</td>\n<td>改用 rpx，必要时结合 <code>wx.getSystemInfo</code> 动态计算</td>\n</tr>\n<tr>\n<td><code>getUserProfile</code> 不触发/拿不到信息</td>\n<td>必须由用户点击事件直接调用，不能在 onLoad 等生命周期里自动调</td>\n</tr>\n<tr>\n<td>包体积超过当前平台限制</td>\n<td>核对官方当前限制，配置 <code>subpackages</code>，图片走 CDN，移除未用资源</td>\n</tr>\n<tr>\n<td>WXSS 选择器不生效</td>\n<td>小程序不支持部分 CSS 选择器，改用 class；组件样式隔离用 <code>styleIsolation</code></td>\n</tr>\n<tr>\n<td>自定义组件样式被隔离 / 穿透失败</td>\n<td>用 <code>externalClasses</code> 或 <code>:host</code>，跨组件样式用全局类并设置隔离选项</td>\n</tr>\n<tr>\n<td><code>wx.request</code> 域名报错</td>\n<td>在小程序后台配置合法域名（request/socket/uploadFile/downloadFile）</td>\n</tr>\n<tr>\n<td>组件重复造轮子</td>\n<td>开发前先搜索项目已有组件与第三方 UI 库，grep 关键词</td>\n</tr>\n<tr>\n<td>设计稿颜色/间距与项目 token 不一致</td>\n<td>扩展公共样式变量而非硬编码 hex 值</td>\n</tr>\n<tr>\n<td>跨端框架语法误用（Taro≈React/uni≈Vue）</td>\n<td>先确认框架，按对应语法写，不混用</td>\n</tr>\n</tbody>\n</table>\n<h2>输出</h2>\n<ul>\n<li>创建/修改的文件列表（含 <code>.wxml/.wxss/.js/.json</code> 四件套及 <code>app.json</code> 路由变更）</li>\n<li>验证结果（开发者工具编译 / lint + build）</li>\n<li>设计稿还原情况（如有设计稿）</li>\n<li>需要其他工种配合的事项（如后端接口、合法域名配置、云函数部署）</li>\n</ul>\n","files":[{"path":"references/platform-readiness.md","sizeBytes":3359,"isText":true},{"path":"references/release-checklist.md","sizeBytes":3566,"isText":true},{"path":"SKILL.md","sizeBytes":8593,"isText":true}],"reviewScore":null,"reviewSummary":null,"trust":{"provenance":"trusted-source-unreviewed","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow.","bodySource":null},"bodyLocked":false,"purchaseUrl":null,"sourceUrl":null,"report":{"provenance":"trusted-source-unreviewed","screen":{"ran":true,"outcome":"clean","suspicious":0,"notes":0,"hiddenCharacters":false},"virusScan":{"engine":"clamav","status":"clean","scannedAt":"2026-09-24T15:43:54.965007Z","sha256":"7D2777D2E9C46321098D2B42ED0AA89B81FDC44FBC87048886506D5D8558FE30","sizeBytes":9096},"review":null,"source":{"repositoryUrl":"https://github.com/kingxiaozhe/cm-workflow","path":"skills/cm-miniprogram-engineer","license":"MIT","commit":"3f79f657e2e9e21f1300efe8e5c0bd5d4d6d208c","subtreeSha":"2E1E01F2A02F66A7E8BBD76CCB5E4276C9DD6E87D4A7CA9481727817C789AF48","lastSyncedAt":"2026-09-24T15:42:59.811488Z"},"reviewedAt":"2026-09-24T15:46:18.436119Z","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow."},"install":[{"target":"skills-cli","command":"npx skills add https://github.com/kingxiaozhe/cm-workflow/tree/main/skills/cm-miniprogram-engineer"},{"target":"claude-code","command":"claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install kingxiaozhe-cm-workflow@llmmart"},{"target":"git","command":"git clone https://github.com/kingxiaozhe/cm-workflow.git"}]}