微信小程序开发专家

概述

一套在真机上验证过的小程序工程规程，解决四类高频翻车：真机输入交互、AI 能力接入、无素材视觉创作、分享与海报，并在交付前用脚本把风险一次性扫出来。

业务价值：

• 把"开发者工具一切正常、真机上打不出字"这类静默 bug 变成可静态检测的硬错误
• AI 能力做成增强项而非依赖项，无密钥、无网络、无云环境时功能 100% 可用
• 不依赖任何设计素材即可产出可复现的卡片/海报视觉
• 分享路径只走平台可靠能力，避免"点了没反应"

何时使用

• 新建或维护微信小程序（页面、组件、工具库、云函数）
• 出现"电脑上能输入、手机上不能输入"、"键盘弹了又消失"、"只能输入一个字"
• 需要接入大模型（OpenAI 兼容接口 / 云函数）且要保证无密钥时仍可用
• 需要生成卡片、海报、背景等视觉效果，但不依赖图片素材
• 需要"发送给朋友 / 发朋友圈 / 保存相册"等分享能力
• 交付前需要一份可复跑的全项目自检报告

依赖声明

执行步骤

1. 先取基线：执行 node <skill>/scripts/check_miniprogram.js <小程序根目录>，记录 PASS / WARN / FAIL 数量。改代码前必须先有基线，改完必须复跑。
2. 判定问题类型并只读对应参考：真机输入 → references/real-device-input.md；AI 接入 → references/ai-integration.md；视觉 → references/visual-engine.md；分享/海报 → references/share-and-poster.md。不要一次性加载全部参考文档。
3. 给出最小可粘贴修复：直接产出 WXML / JS / WXSS 片段，复用 assets/safe-input-template.md 中三个代码块的结构，不要凭直觉改写 input 与 setData。
4. 逐条对照硬性规则（见下）：input 节点静态化、打字期间零 setData、focus 与样式解耦、外盒承担布局、禁用危险 CSS。
5. 复跑自检并清零：node <skill>/scripts/check_miniprogram.js <根目录> --warn-as-error，FAIL 与 WARN 必须归零；纯逻辑模块（视觉引擎 / 海报 / AI 解析）用 mock 在 Node 里跑冒烟。
6. 交付前走清单：逐项核对 references/checklist.md，并明确列出必须在真机上验证的条目（工具通过不算通过）。

硬性规则（违反必出真机问题）

1. input 节点保持静态：input 上只允许 value / focus / adjust-position 三个动态属性，其余（class、style 等）一律静态；聚焦高亮、边框、背景放到外层容器 view 上。
2. 打字期间零 setData：bindinput 只写草稿（this._draft = e.detail.value），不做任何 setData；联动逻辑放到失焦或停手 600–800ms 防抖之后。
3. focus 与样式状态解耦：用 focusNow（仅程序化唤起键盘）与 inputFocus（仅样式）两个独立状态；用户手动点击时绝不把 focus 从 false 改成 true。
4. input 固定宽高、不参与 flex 自适应：外盒承担 flex:1、边框、背景；input 用 width:100% + 固定 height。
5. 禁用危险 CSS：含 input 的祖先不用 backdrop-filter；input 自身只用 transition 过渡 background / border-color / box-shadow，禁用 transition: all。
6. 必备键盘属性：cursor-spacing、adjust-position、bindinput 必配 bindblur（草稿同步的最后一道保险）。

<view class="text-box {{inputFocus ? 'focus' : ''}}">
  <input class="text-input" value="{{text}}" bindinput="onTextInput" bindblur="onEditBlur"
         bindconfirm="onEditConfirm" cursor-spacing="30" adjust-position="{{true}}" />
</view>

onTextInput: function (e) { this._draft = e.detail.value; },
onEditBlur:  function () { this.syncDraft(); this.build(); }

AI 接入：三级策略（任何一级失败都静默降级）

1. 填了 API KEY → wx.request 直连 OpenAI 兼容接口
2. 未填 KEY → 云函数（密钥不出服务端）
3. 都没有 / 超时 / 返回非法 → 本地启发式兜底，返回 null，界面零报错

开关关闭 = 纯本地，不发起任何网络请求；密钥只存本机 wx.setStorageSync；界面必须提示需把接口域名加入 request 合法域名。详见 references/ai-integration.md。

分享路径

• 发送给朋友：<button open-type="share"> + onShareAppMessage（唯一能用 JS 触发的分享面板）
• 发朋友圈：不能用 JS 拉起面板，open-type="shareTimeline" 在部分客户端点击无响应且 JS 无法感知失败 → 改为「生成海报 → wx.saveImageToPhotosAlbum → 用户去微信发朋友圈」
• 好友打开即还原作品：把设计参数 + seed + copySeed + variant 放进分享 path/query
• 详见 references/share-and-poster.md

输入输出示例

输入：

我的小程序输入框在手机上打不出字，电脑上却正常，请帮我定位并修复

输出（要点）：

真因：bindinput 中 setData 了 value 绑定的字段，输入法拼音组合期间被回写打断。
修复：
1. bindinput 只写草稿，失焦/防抖后再同步并刷新预览
2. 按 assets/safe-input-template.md 的 WXML 块搭结构，样式放到外层容器
3. 复跑 node scripts/check_miniprogram.js <根目录>，确认 input 审计全部 PASS
真机验证：中文拼音连续输入、中英混输、切页面再回来

输入：点击分享没有反应，帮我接上微信真实转发面板 → 输出：改用 open-type="share" + onShareAppMessage，并把朋友圈路径改成「生成海报 → 保存相册」，附带自检脚本中分享钩子配对项的复跑结果。

异常处理

约束与边界

• 输入约束：自检脚本的目标目录必须是包含 app.json 的小程序根目录；跳过 node_modules / miniprogram_npm / .git 等目录。
• 执行约束：先跑基线再改代码，改完必须复跑；不修改用户未要求改动的文件；不在小程序根目录留下临时脚本。
• 业务边界：本技能只给工程规范与可粘贴片段，不代替真机验收，也不替用户提交审核或处理账号资质问题。
• 能力边界：不提供 JS 主动拉起朋友圈面板的方案（平台无此 API），不使用外部网络服务，不读写小程序目录之外的文件。

资源索引