H5微信朋友圈部署

Other

H5单页部署到GitHub Pages并分享到微信朋友圈的完整工作流。 This skill should be used when the user wants to create a single-page H5 landing page, deploy it for WeChat Moments (朋友圈) sharing, or troubleshoot WeChat/H5 deployment issues. Triggers: H5页面, 部署, GitHub Pages, 微信朋友圈, 链接打不开, 恢复访问, landing page deployment.

Install

openclaw skills install h5-wechat-deploy

H5 微信朋友圈部署

概述

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

使用场景

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

工作流程

第一步：确认需求

向用户确认以下信息：

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

第二步：创建H5单页

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

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

关键CSS注意事项：

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

第三步：部署到GitHub Pages

3.1 准备工作

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

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

3.2 创建仓库并推送

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

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

3.3 启用GitHub Pages

在GitHub仓库页面：

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

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

DNS传播延迟

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

部署完成≠立即可访问！

微信安全提示

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

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

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

不同设备/账号的差异

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

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

第五步：验证部署

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

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

第六步：分享到朋友圈

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

常见问题

问题	原因	解决方案
部署后立即打不开	DNS未生效	等待5-30分钟
微信显示"无法打开"	安全拦截	点击「恢复访问」
转发给朋友打不开	DNS缓存不同步	等待几分钟重试
按钮点不了	用了`<a href="#">`	改用`<button>`标签
中文断行奇怪	未设置word-break	添加`word-break: keep-all`

模板资源

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