微页面 HTML 组件编写规则
概述
本章节用于说明微页面中自定义布局和 HTML 内容的使用边界。普通运营人员优先使用系统提供的图片、文字、视频、表单、按钮和布局组件；只有在现有组件无法满足页面展示或交互要求时，才使用自定义 HTML，并由具备开发能力的人员协助编写和测试。
适用场景
- 需要更灵活的图文排版或特殊展示效果；
- 需要在页面中加入符合品牌规范的自定义区块；
- 需要通过外部页面、接口或自定义函数完成系统之外的交互。
如果只是制作活动报名、资料下载、产品介绍或问卷页面，优先使用系统组件，不必编写 HTML。
先判断应该使用哪种方式
| 需求 | 建议方式 | 说明 |
|---|---|---|
| 展示文字、图片、视频、表单和按钮 | 使用系统组件 | 运营人员可以直接编辑，维护成本最低。 |
| 需要更灵活的图文排版 | 使用自定义布局或 HTML 内容 | 适合有明确页面设计要求的场景。 |
| 打开官网、外部活动页或商城页面 | 使用“跳转网页地址” | 不要把整个外部网页代码复制到微页面正文中。 |
| 下载、试用、咨询前先填写信息或验证身份 | 使用 CTA 组件 | CTA 负责引导、留资或验证，完成后再执行下一步动作。 |
| 页面需要写入 CRM 或根据返回结果执行逻辑 | 使用接口或自定义函数 | 由管理员和开发人员确认接口、字段和安全配置。 |
| 官网等外部系统复用留资流程 | 使用 CTA SDK | 由开发人员接入，普通运营人员无需直接编写 SDK 代码。 |
HTML 内容编写规则
- 不要直接粘贴完整网页：不要在普通内容区直接放置完整的
<html>、<head>、<body>页面，或把第三方表单、脚本整体复制进来。 - 只编写页面需要的区块：HTML 内容应服务于当前微页面中的一个展示区块，避免覆盖页面整体结构、导航或系统按钮。
- 优先适配手机端：避免固定宽度、过小字号和横向滚动；按钮和表单要便于触屏点击。
- 兼顾 PC 端：如果页面会在电脑端打开，应同时检查文字换行、图片比例、卡片布局和按钮位置。
- 使用安全的外部资源：图片、字体、视频和链接应使用可公开访问的 HTTPS 地址，避免引用本地电脑路径或不明来源资源。
- 不要绕过安全限制：需要安全域名、白名单、跨域或接口配置时，提前交给管理员或开发人员处理。
- 避免未经审核的脚本：不在运营内容中放置未经确认的统计脚本、弹窗脚本、第三方表单代码或会修改系统页面行为的代码。
- 保持内容可维护：代码中使用清晰的区块名称，避免把活动名称、日期、链接和图片地址散落在难以修改的代码中。
发布前检查
完成 HTML 内容后，至少检查以下项目：
- 页面在手机端打开时没有横向滚动；
- 图片、字体、视频和外部链接能够正常加载；
- 文字、按钮和表单没有被遮挡；
- 点击按钮、图片和链接后能够进入正确页面；
- 如配置了表单或 CTA，未留资、已留资和提交失败三种情况都已测试；
- 如涉及 CRM 数据写入，测试数据已经正确写入目标对象；
- 外部链接、二维码和接口更新后已重新预览和测试。
[!WARNING]
HTML 内容一旦引用外部资源或接口，页面能否正常显示还取决于外部地址、HTTPS、安全域名、白名单和接口服务是否可用。不要只在编辑器中看到代码保存成功，就直接用于正式推广。
运营人员与开发人员的分工
- 运营人员：明确页面目标、准备文案和素材、说明需要收集的信息、验收页面效果和业务结果。
- 管理员：确认内容权限、安全域名、白名单、表单对象和字段等系统配置。
- 开发人员：编写或调整 HTML、接口、自定义函数、CTA SDK 及外部系统回传逻辑。
相关内容：