准备工作
1. 开通必要的账号权限
首先要确保你有以下两个已实名认证的账号,必须全部完成才可以继续操作:
- 微信视频号:账号类型为个人或企业均可,企业号功能更全但个人号足够做基础挂载
- 腾讯云开发(CloudBase)免费版:直接访问 https://console.cloud.tencent.com/tcb 注册并实名认证,点击「免费开通」即可领取每月5GB云存储、500次/日数据库读请求、100次/日数据库写请求的额度
2. 准备静态商品页素材
你需要准备3种必须的素材,放在一个新建的名为`mall-video-static`的文件夹里:
- 静态商品页HTML文件:可以自己写简单的,也可以用后面给的完整模板
- 商品展示图片:尺寸建议1080×1920或750×1334,命名为`product.jpg`
- 商品支付/咨询链接二维码图片:命名为`qrcode.png`,支持微信、支付宝、企业微信等二维码
静态商品页模板编写
打开`mall-video-static`文件夹,新建一个名为`index.html`的文件,复制下面的完整代码直接保存,不需要修改任何技术细节:
```html
我的爆款商品
99
199
【限时福利】爆款纯棉T恤男女同款透气吸汗不褪色 S-3XL全尺码
长按识别二维码立即购买
微信扫码直接跳转,安全放心
```
如果你想修改商品信息,只需要修改以下3处文字或路径:
1. 第32行的`99`改成你的实际售价
2. 第33行的`199`改成你的原价
3. 第35行的商品标题改成你自己的内容
4. 如果图片命名不是`product.jpg`和`qrcode.png`,把第30行和第40行的`./product.jpg`、`./qrcode.png`改成对应的文件名即可
腾讯云开发静态托管部署
1. 创建云开发环境
1. 登录腾讯云开发控制台 https://console.cloud.tencent.com/tcb
2. 点击左侧「环境」→「新建环境」
3. 环境名称填写`mall-video-env`(也可以自定义),基础环境选择「按量付费」(免费额度内不会产生费用),环境类型选择「Web应用」
4. 点击「立即开通」,等待1-2分钟环境创建完成
2. 开启静态托管服务
1. 环境创建完成后,点击左侧「云托管/静态托管」→ 选择刚创建的`mall-video-env`环境
2. 点击「开始使用」→ 选择「按量计费」(免费额度内不会产生费用)→ 点击「开通静态托管」
3. 等待30秒左右静态托管服务开通成功
3. 上传并部署静态文件
1. 静态托管开通后,点击左侧「文件管理」
2. 点击「上传文件夹」→ 选择之前准备好的`mall-video-static`文件夹 → 点击「确定上传」
3. 上传完成后,点击左侧「设置」→ 找到「基础配置」下的「默认域名」,复制这个域名(格式类似`https://xxx.tcb.qcloud.la`)
4. 在浏览器地址栏粘贴这个域名,检查静态商品页是否正常显示
微信视频号挂载配置
1. 确认视频号权限
1. 打开微信APP → 点击「发现」→「视频号」→ 点击右上角小人头图标进入个人中心
2. 点击「创作者中心」→ 查看是否有「商品橱窗」或「扩展链接」入口:
- 如果有「扩展链接」入口,直接进入下一步
- 如果没有,需要先完成「视频号认证」(个人认证需要粉丝≥1000,企业认证需要上传营业执照)
2. 添加扩展链接权限(首次操作)
如果没有扩展链接权限,完成认证后:
1. 点击「创作者中心」→「创作者服务」→「扩展链接」
2. 点击「申请开通」→ 阅读并同意协议 → 点击「提交申请」,通常1-2小时内会审核通过
3. 上传视频并挂载链接
1. 点击视频号个人中心右上角「发布视频」→ 选择提前录制好的15-60秒商品介绍短视频 → 编辑封面、标题、话题
2. 下滑到「添加位置/扩展链接」→ 点击「扩展链接」
3. 粘贴之前复制的腾讯云开发静态托管默认域名 → 点击「确定」
4. 点击「发表」,视频发布成功后,观众点击视频左下角的「链接」按钮即可直接跳转到你的静态商品页
避坑指南
1. 腾讯云开发域名被微信拦截?
- 静态托管开通后,默认域名可能需要等待1-2天微信白名单审核,如果被拦截,可以在「设置」→「自定义域名」里绑定自己的已备案域名
2. 视频号扩展链接无法添加HTTPS以外的链接?
- 腾讯云开发默认域名已经是HTTPS协议,不需要额外配置
3. 静态图片无法显示?
- 检查上传的文件夹结构是否正确,必须是`mall-video-static`文件夹里直接放`index.html`、`product.jpg`、`qrcode.png`,不能有子文件夹
- 检查图片文件名是否和HTML里的一致,区分大小写
4. 免费额度用完怎么办?
- 每月免费额度完全足够个人小范围推广使用,如果不够,可以在腾讯云开发控制台升级套餐,但不要盲目升级,先看免费额度的使用情况(左侧「环境」→「资源监控」)