微信小程序从 0 到 1 上线指南（含 H5 webview 快速验证）
目标读者：零基础，想把一个 H5 页面（或完整业务）通过小程序跑起来并发布上线的人。
全文按四个阶段编排：申请 → 备案 → 开发 → 部署，每个阶段独立成章，可按需跳读。
〇、阶段总览：哪些事在哪个阶段做
| 阶段 | 要做的事 | 产出 | 可否并行 |
|---|---|---|---|
| 一、申请 | 注册小程序账号、主体认证、拿 AppID/AppSecret | AppID + AppSecret | 第 1 天完成 |
| 二、备案 | 买域名、买服务器、提交 ICP 备案、配 HTTPS | ICP 备案号 + 可访问的 HTTPS 站点 | 与开发并行，尽早启动 |
| 三、开发 | 下载开发者工具、写 web-view 壳、免备案真机调试 | 可真机预览的开发版/体验版 | 与备案并行 |
| 四、部署 | H5 上服务器、小程序后台配域名+校验文件、提审发布 | 线上小程序 | 备案通过后当天可完成 |
开发阶段 vs 部署阶段的事务划分（重要）
【开发阶段做】（不需要域名备案完成）
├─ 下载安装微信开发者工具
├─ 创建小程序项目、编写 web-view 壳代码
├─ 勾选「不校验合法域名」→ 用任意地址（含 http、IP、本地）调试 H5
├─ 真机预览（开调试模式）给团队体验
【部署阶段做】（备案必须已完成）
├─ H5 静态文件上传服务器，Nginx + HTTPS 对外提供服务
├─ 小程序后台配置 request 合法域名
├─ 小程序后台配置业务域名 + 上传校验文件到服务器根目录
├─ 关闭「不校验合法域名」后全功能真机回归
└─ 提交审核 → 发布上线
三条硬性前提（先自查，决定路线）
- 个人主体不能使用 web-view。
<web-view>只对企业/个体工商户等非个人主体开放。个人主体只能原生开发；想加载 H5 必须注册个体工商户或企业。 - web-view 的业务域名必须备案 + HTTPS + 校验文件，三者缺一不可，且不支持 IP、localhost。
- 开发/体验阶段可以不备案：勾选「不校验合法域名」即可用任意地址调试，第 1 天就能真机看到 H5。备案只卡"发布上线"，不卡"开发验证"。
一、申请阶段：注册小程序账号并获取 AppID
1.1 准备材料
个人主体：
- 一个未绑定过公众平台的邮箱
- 本人身份证、手机号、微信（扫码验证）
企业主体（要用 web-view 必选）：
- 未绑定过的邮箱
- 营业执照（个体工商户执照也可以）
- 法人身份证 + 手机号
- 对公账户（个体户可用法人银行卡）
- 300 元微信认证费（企业主体提审前必须完成认证）
1.2 注册步骤
- 打开
https://mp.weixin.qq.com→ 右上角「立即注册」→ 选「小程序」 - 填邮箱 → 邮箱激活
- 选主体类型：要 web-view 必须选企业/个体工商户（个人主体无法后续升级，只能重新注册）
- 登记主体信息：营业执照、对公打款验证或法人微信验证
- 登记管理员信息并扫码绑定管理员微信
- （企业主体）完成微信认证：账号设置 → 微信认证 → 交 300 元 → 1~3 个工作日
1.3 获取 AppID 和 AppSecret
- 登录
mp.weixin.qq.com→「开发」→「开发管理」→「开发设置」 - AppID：直接可见，形如
wx1234567890abcdef - AppSecret：点「生成」获得，只显示一次，立刻妥善保存
安全提示：AppSecret 绝不能写进前端代码或提交到仓库，泄露后立刻在后台重置。
二、备案阶段：域名、服务器、ICP 备案、HTTPS
备案是全流程唯一不可压缩的等待项（1~3 周），申请阶段完成后当天就应提交备案。
2.1 购买域名
- 阿里云/腾讯云/华为云等注册商购买，
.com/.cn均可 .cn及国内注册商域名要求实名认证（上传身份证，1 天内通过）- 域名建议短、与业务相关，如
aircloud-demo.cn
2.2 购买服务器（备案的前提）
- 备案必须挂靠国内云服务器（阿里云/腾讯云轻量服务器或 ECS 均可，最低配 2 核 2G 足够静态 H5）
- 境外服务器（香港/海外）不需要备案，但无法用于业务域名——微信校验备案号，web-view 路线必须国内备案
- 注意：域名在哪家云商备案，就应使用哪家云商的服务器（备案信息与云商绑定）
2.3 ICP 备案流程（以腾讯云为例，阿里云类似）
- 云厂商控制台 →「网站备案」→ 开始备案
- 校验备案类型：填域名 + 服务器实例，系统识别首次备案
- 填写主体信息：营业执照、法人/负责人信息
- 填写网站信息：
- 网站名称：不能带"平台/中心/商城"等敏感词
- 首页 URL：
https://你的域名 - 备注写清用途，如"展示物联网设备监控数据的 H5 页面，通过小程序 web-view 访问"
- 微信扫码人脸核验
- 云厂商初审（1~2 个工作日，可能电话核实）→ 提交管局审核（各省 1~20 个工作日，多数约 1 周）
- 通过后获得 ICP 备案号（如"粤ICP备2026000001号-1"）
- 备案号必须挂在网站页脚并链接到
https://beian.miit.gov.cn
备案期间（提交管局后）域名必须保持不可访问（云厂商强制阻断），通过后才能解析开站。
2.4 域名解析与 HTTPS 证书（备案通过后做，也可提前准备好证书）
- 域名控制台添加 A 记录指向服务器公网 IP
- 申请 HTTPS 证书：推荐云厂商免费 DV 证书（腾讯云/阿里云每年 20 张）或 Let's Encrypt
- 部署证书见 4.1 Nginx 配置
- 验证：浏览器访问
https://你的域名出现锁标志
三、开发阶段：开发者工具、web-view 壳、免备案调试
3.1 下载安装微信开发者工具
下载地址：
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
- 选「稳定版 Stable Build」，支持 Windows / macOS
- 安装后用管理员微信扫码登录
- 建议同时收藏官方文档入口：
https://developers.weixin.qq.com/miniprogram/dev/framework/
3.2 配套附件说明（本项目 rules 目录与接口文档）
附带：案例接口文档以及生成*.md生成页面规则
H5 业务（登录、项目/设备查询、历史数据）全部按上述规则与接口文档开发迭代，小程序侧只做 web-view 壳，业务迭代不依赖小程序发版。
3.3 创建小程序项目
- 开发者工具 → 新建项目 → 目录选空文件夹
- AppID 填申请阶段拿到的（不要用测试号——测试号功能不全且不能发布）
- 后端服务「不使用云服务」，模板选「JavaScript 基础模板」
- 生成的目录结构：
miniprogram/
├── app.js # 小程序入口
├── app.json # 全局配置（页面路由、tabbar、窗口样式）
├── app.wxss # 全局样式
└── pages/
└── index/ # 每个页面 = 4 个同名文件（js/json/wxml/wxss）
3.4 web-view 壳最小实现（约 10 行代码）
app.json
{
"pages": ["pages/index/index"],
"window": {
"navigationBarTitleText": "AirCloud 设备管理",
"navigationBarBackgroundColor": "#1E6FFF",
"navigationBarTextStyle": "white"
}
}
pages/index/index.wxml
<web-view src="https://aircloud-demo.cn/index.html"></web-view>
pages/index/index.js
Page({
onLoad() {
// 可选：H5 需引入 https://res.wx.qq.com/open/js/jweixin-1.3.2.js
// 才能调用 wx.miniProgram.navigateTo 跳回小程序页面
}
});
web-view 自动占满整页，无需任何布局代码。
web-view 内 H5 的通信限制： - H5 里
<a href>跳转仍留在 web-view 内部 - H5 跳回小程序页面用 JS-SDK 的wx.miniProgram.navigateTo- web-view 内无法调用小程序原生 API（支付、扫码等需跳回小程序）
3.5 开发阶段免备案调试（关键技巧）
开发者工具右上角「详情」→「本地设置」→ 勾选：
- ✅ 不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书
勾选后开发版可加载任意 http/https 地址（未备案、自签证书、本地 IP、局域网地址均可）。
真机预览同样有效：预览二维码 → 真机右上角胶囊 →「打开调试」→ 重进后不校验域名。
这意味着：备案还没下来时（第二阶段漫长等待期），开发阶段照样全功能联调 H5，这是最重要的快速验证手段。
3.6 真机预览与体验版
- 预览：工具栏「预览」→ 二维码 → 管理员/项目成员扫码真机运行
- 上传：工具栏「上传」→ 填版本号 + 备注 → 代码进微信后台版本库
- 体验版：后台「管理」→「版本管理」→「开发版本」→ 选为体验版 → 生成体验二维码
- 体验成员：后台「成员管理」→「体验成员」→ 最多 15 人
体验版约 30 天不发布会被清理，重新上传即可。
四、部署阶段：H5 上线、域名配置、提审发布
前置条件：ICP 备案已通过。本章所有操作当天可完成。
4.1 H5 部署到服务器
把 H5 静态文件（本项目平铺结构直接整目录）上传到服务器，Nginx 配置：
server {
listen 443 ssl;
server_name aircloud-demo.cn;
ssl_certificate /etc/nginx/ssl/aircloud-demo.cn.pem;
ssl_certificate_key /etc/nginx/ssl/aircloud-demo.cn.key;
root /var/www/aircloud; # H5 静态文件根目录
index index.html;
location / {
try_files $uri $uri/ =404;
}
}
server {
listen 80;
server_name aircloud-demo.cn;
return 301 https://$host$request_uri; # 强制 HTTPS
}
验证：浏览器 https://aircloud-demo.cn 打开 H5 且证书有效。
4.2 小程序后台配置域名（含校验文件）
| 配置项 | 用途 | 要求 |
|---|---|---|
| request 合法域名 | wx.request 的 HTTPS 请求 |
HTTPS + 备案 |
| socket/upload/download 域名 | WebSocket、文件传输 | wss/HTTPS + 备案 |
| 业务域名 | <web-view> 能打开的页面 |
HTTPS + 备案 + 所有权校验文件 |
配置 request 合法域名：
mp.weixin.qq.com→「开发」→「开发管理」→「开发设置」→「服务器域名」→「修改」- 填
https://你的域名（不带路径，端口 443）
配置业务域名（web-view 专用）：
- 「开发设置」→「业务域名」→「修改」→ 填入域名
- 下载校验文件（形如
RWJchpoFsZ.txt） - 把校验文件放到该域名服务器根目录，必须可直接访问：
https://aircloud-demo.cn/RWJchpoFsZ.txt ← 内容原样返回
- 回后台点「保存」，微信服务器实时抓取校验，通过即生效
校验文件常见失败原因：
- 文件放错路径（必须根目录，URL 不能带跳转）
- 服务器防爬/CDN 拦截了微信抓取 UA
- 域名未备案 / 备案被注销
- 用了 http 而非 https
4.3 三种资源现状的应对方案
情况 A：只有域名，没有服务器
| 步骤 | 说明 |
|---|---|
| 1. 仍需购买云资源 | 域名备案必须挂靠国内云服务器（或云厂商备案服务码），只有域名无法完成备案 |
| 2. 两条路 | ① 买最低配轻量服务器（约几十元/月），备案 + 托管 H5 一步到位（推荐）；② 用云厂商静态托管（腾讯云 COS / 阿里云 OSS + CDN）绑定自定义域名，同样要求域名先备案，备案仍需购买满足条件的云资源 |
| 3. 特殊通道 | 微信云开发「静态网站托管」默认域名（xxx.tcloudbaseapp.com）属微信官方域名，免备案免服务器即可被小程序访问，适合快速上线（是否可直接用于 web-view 以官方文档最新说明为准；绑定自定义域名仍需备案） |
情况 B：只有服务器，没有域名
| 步骤 | 说明 |
|---|---|
| 1. 必须买域名 | 小程序业务域名/request 域名不支持 IP 和 localhost，没有域名就无法配置 |
| 2. 开发不受阻 | 开发阶段勾「不校验合法域名」可直接用 http://服务器IP 调试，先开发后买域名完全可行 |
| 3. 发布前补齐 | 买域名 → 实名 → 备案（挂靠现有服务器）→ 解析 → HTTPS → 后台配置，流程同第二章 |
情况 C：什么都没有（域名、服务器都还没买）
第 1 天（三件事并行）：
├─ 注册小程序账号，拿 AppID（申请阶段）
├─ 买域名 + 买服务器，当天提交 ICP 备案（备案阶段）
└─ 下载开发者工具，写 web-view 壳，用「不校验合法域名」+ IP/临时地址调试（开发阶段）
第 2~21 天（备案等待期）：
└─ 按 rules 规则 + 接口文档迭代 H5，体验版给团队测试
备案通过后（当天）：
└─ 解析域名 → HTTPS → H5 上服务器 → 后台配域名 + 校验文件 → 提审（部署阶段）
审核 1~7 天 → 发布上线
4.4 提审发布
提审前自查清单：
- [ ] 企业主体已完成微信认证（个人主体跳过）
- [ ] 服务器域名、业务域名全部配置生效
- [ ] 校验文件可在浏览器直接打开
- [ ] HTTPS 证书有效（剩余 > 1 个月）
- [ ] 关闭「不校验合法域名」后真机全功能回归（必做，否则提审必挂）
- [ ] 无"测试/TODO/占位"内容，无诱导分享、无虚拟支付
- [ ] 类目与实际内容一致（设备管理选"工具 > 信息查询"或"IT科技 > 硬件与设备"）
提交流程：
- 工具栏「上传」最新代码
- 后台「版本管理」→「开发版本」→「提交审核」
- 填页面信息、web-view 页如实填写业务域名及用途并附域名内容截图、选类目
- 首次提审通常 1~7 天（含人工复审），后续几小时到 2 天
- 通过后「审核版本」→「发布」→ 全量或灰度
- 用户微信搜索小程序名称即可使用
常见驳回原因：
| 驳回理由 | 应对 |
|---|---|
| web-view 内容与类目不符 | 修改类目，或让 H5 内容与类目一致 |
| 页面空白/无法加载 | 域名未配置/证书问题，查 4.2 |
| 诱导分享/关注 | 去掉 H5 里分享引导、公众号二维码 |
| 存在测试内容 | 清理 TODO、假数据、占位文案 |
| 个人主体使用 web-view | 无法申诉，换企业主体重新注册 |
五、其他小程序平台差异速查
| 事项 | 微信 | 支付宝 | 抖音 |
|---|---|---|---|
| 注册入口 | mp.weixin.qq.com | open.alipay.com | developer.open-douyin.com |
| web-view 组件 | ✅（非个人主体+备案域名） | ✅（要求类似） | ✅（要求类似） |
| 校验文件机制 | 有（业务域名） | 有（H5 域名配置） | 有（web-view 域名） |
| 认证费 | 企业 300/年 | 免费 | 企业 300/年 |
| 备案要求 | 是 | 是 | 是 |
多端发布同一 H5 建议用 Taro / uni-app 一次开发多端编译，壳层（web-view）各平台仍需分别配域名。
六、总时间线参考（web-view 壳方案）
第 1 天 申请：注册小程序拿 AppID
备案：买域名服务器、提交备案
开发：下载工具、写 web-view 壳、勾「不校验域名」真机看到 H5
第 2~21 天 备案等待期：迭代 H5、体验版测试（开发）
备案通过当天 部署：HTTPS → H5 上服务器 → 后台配域名+校验文件
随后 提审 1~7 天 → 发布上线
第 1 天同时启动申请、备案、开发三件事，是整体最快的关键。
七、附录：校验文件与域名问题排查命令
# 1. 校验文件是否可访问且内容正确（应在服务器根目录）
curl -v https://aircloud-demo.cn/RWJchpoFsZ.txt
# 2. 检查 HTTPS 证书有效期与链完整性
curl -vI https://aircloud-demo.cn 2>&1 | grep -E "expire|subject|issuer"
# 3. 确认 HTTP 强制跳转 301（web-view 要求 https 直达）
curl -I http://aircloud-demo.cn
# 4. 确认服务器没有拦截微信抓取 UA
curl -A "Mozilla/5.0 (iPhone; CPU iPhone OS 16_0) MicroMessenger/8.0" \
https://aircloud-demo.cn/RWJchpoFsZ.txt
排查顺序：文件存在 → 证书有效 → 备案号有效 → 后台重新保存触发微信重新抓取。