凌晨1点，我把‘高考查分倒计时’网页发到家长群——3小时后，3所中学教务处问‘能嵌进校园公众号菜单栏吗？’
不是小程序，不是H5活动页，就是一个.html文件。
但它做到了：
下面，手把手带你复现这个“零技术门槛嵌入”流程。
---
🌐 第一步：认清现实——公众号菜单栏≠普通网页
微信公众号菜单栏打开的是WebView，它有三大限制：
window.open）破解方案：用免费HTTPS代理 + 微信专用meta
---
🛠️ 第二步：用Claude Code生成“公众号友好型”页面
在Cursor中新建countdown.html，光标悬停，输入Prompt：
生成一个高考查分倒计时网页，要求：
倒计时目标：2024年6月25日 00:00（北京时间）
显示天/时/分/秒，数字用超大字体（80px），深红底白字
底部固定栏：左「分享海报」右「复制链接」
必须适配微信WebView：
• 在<head>中加入：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
• 加入：<meta name="format-detection" content="telephone=no">
• 加入：<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
所有样式内联，所有JS写在<script>里，不引用外部文件
分享海报功能：点击后调用html2canvas生成截图（用CDN引入：https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js）
复制链接：调用navigator.clipboard.writeText(location.href)
页面底部加一行小字：“本页已通过微信WebView兼容性检测”
Claude Code会输出完整单文件。注意检查两点：
<meta name="viewport">（必须存在）html2canvas是否用CDN（避免本地路径404）---
🔐 第三步：绕过HTTPS限制（关键！）
教务处老师不会买域名、不会配SSL。解决方案：
countdown.html上传至GitHub Pages（免费、自带HTTPS）https://xxx.github.io/repo/countdown.html，太长且难记sourl.cn/gk2024✅ 验证：在微信中打开短链 → 查看地址栏 → 确认是https://开头 → 可安全嵌入公众号菜单
---
📲 第四步：嵌入公众号菜单（教务处老师30秒操作）
sourl.cn/gk2024 → 保存⚠️ 注意：不要选「跳转小程序」或「下发消息」，必须选「跳转网页」
---
🎨 第五步：让海报带学校LOGO（接单增值点）
原生html2canvas无法跨域加载图片。解决方案：
在Prompt末尾加：
在页面顶部加一个隐藏的<img id="school-logo" src="data:image/png;base64,iVBORw0KGgo..." style="display:none">，base64字符串由logo参数提供（若无则留空）
教务处提供学校LOGO → 用在线工具转base64 → 填入URL参数：sourl.cn/gk2024?logo=base64xxx
Claude Code生成的JS会自动读取该参数并渲染。
---
💰 后续变现：3种轻量升级
| 升级方式 | 客户价值 | 报价参考 |
|----------|----------|----------|
| 增加「查分通道」按钮（跳转各省教育考试院官网） | 解决家长找不到入口痛点 | +200元 |
| 每日推送「查分准备清单」（纯前端localStorage缓存，不发通知） | 提升日活 | +300元 |
| 生成带校名的专属短链（如 sourl.cn/beijing101-gk） | 品牌专属感 | +150元 |
目前已有7所中学采购，平均交付时间：22分钟（改3处参数+发短链）。
技术不重要，重要的是：让老师觉得“这事我明天就能干成”。
（源码及参数说明文档：[woshird.com/docs/gaokao-embed](https://woshird.com/docs/gaokao-embed)）