H5 微信朋友圈部署

概述

创建电商H5推广单页并部署到GitHub Pages，用于微信朋友圈分享。涵盖页面创建、GitHub仓库搭建、Pages部署、微信兼容性处理的全流程。

使用场景

• 用户需要做一个H5单页推广链接发朋友圈
• 需要部署静态页面到GitHub Pages
• 微信打开链接报错需要排查
• 需要修改已有H5页面内容并重新部署

工作流程

第一步：确认需求

向用户确认以下信息：

1. 页面用途（淘宝店铺推广/微信私域引流/品牌展示等）
2. 需要展示的核心内容（CTA按钮跳转链接、微信联系方式、产品卖点等）
3. 设计风格偏好（暗黑奢华/简约清新/品牌色等）

第二步：创建H5单页

使用 assets/template.html 作为基础模板，包含以下核心模块：

• CTA按钮: 醒目的大按钮引导用户点击跳转（淘宝店铺/微信等）
• 社交证明: 展示购买记录、用户评价等信任背书元素
• 联系方式: 微信名片卡片，支持一键复制微信号
• 产品卖点卡片: 3-4个核心卖点展示
• Toast提示: 操作反馈（复制成功等）

关键CSS注意事项：

• 中文字符换行需设置 word-break: keep-all; overflow-wrap: anywhere; 防止单字断行
• 按钮必须使用 \x3Cbutton> 标签而非 \x3Ca href="#">，确保微信内置浏览器可点击
• 使用 -webkit-appearance: none; 重置微信浏览器默认样式

第三步：部署到GitHub Pages

3.1 准备工作

如果用户没有GitHub账号，需协助注册：

• 访问 github.com 注册
• 验证邮箱（QQ邮箱可能需要用外部浏览器打开验证链接）

3.2 创建仓库并推送

# 在页面目录初始化git
cd \x3C页面目录>
git init
git add index.html
git commit -m "Initial commit"

# 创建GitHub仓库（通过gh CLI或手动）
gh repo create \x3Crepo-name> --public --push --source .

3.3 启用GitHub Pages

在GitHub仓库页面：

1. Settings → Pages
2. Source: Deploy from a branch
3. Branch: main → / (root) → Save
4. 等待部署完成（页面顶部会显示部署状态）

第四步：微信兼容性处理 ⚠️ 关键

DNS传播延迟

GitHub Pages首次部署后，DNS生效需要 5-30分钟。部署完成后不要立即测试，等待一段时间再打开。

部署完成≠立即可访问！

微信安全提示

微信内置浏览器对 github.io 等非备案域名会弹出安全警告页面。

解决方法: 用户点击页面上的「恢复访问」或「继续访问」按钮即可正常浏览。

这不是部署问题，是微信的正常安全机制。

不同设备/账号的差异

不同微信账号的DNS缓存刷新时间不同，可能出现：

• 自己手机能打开，转发给别人打不开 → 等待几分钟让对方重试
• 同一个WiFi能打开，移动网络打不开 → DNS同步问题，等待即可

第五步：验证部署

# 验证页面可访问（返回HTTP 200）
curl -I https://\x3Cusername>.github.io/\x3Crepo-name>/

# 在手机浏览器先测试，确认没问题再用微信打开

第六步：分享到朋友圈

1. 复制 GitHub Pages URL：https://\x3Cusername>.github.io/\x3Crepo-name>/
2. 微信中粘贴链接发送
3. 点击链接→出现安全提示→点击「恢复访问」
4. 确认页面正常显示后即可分享到朋友圈

常见问题

模板资源

• assets/template.html — 完整的H5单页模板（暗黑奢华风格，含CTA按钮、社交证明、微信名片、产品卖点卡片、Toast提示系统）