Files
cmr-mini/doc/experience/H5增强与内容扩展层方案.md

10 KiB
Raw Permalink Blame History

H5 增强与内容扩展层方案

文档版本v1.0 最后更新2026-04-05 12:33:59

本文档用于明确当前项目中,如何通过 H5 增强层 承接高变化、高定制的内容与互动需求,同时保证主系统继续保持本地闭环、可降级、可独立管理。

核心结论:

H5 可以做增强体验,但应作为独立内容扩展层存在;主系统继续持有打点、状态机、结果兜底与核心游戏闭环。


1. 目标

本文档重点解决以下问题:

  • 如何让 H5 承接详情页、互动任务页、品牌页、增强结果页
  • 如何让 H5 与主系统解耦,而不是深度嵌入主流程
  • 如何让 H5 页面能够独立开发、独立发布、独立回滚、独立管理
  • 如何保证 H5 不可用时,比赛主流程仍然稳定可用

适用场景:

  • 打点后的详情说明页
  • 打点后的互动任务页
  • 拍照、录音、留言、作品提交等扩展页
  • 品牌化结果页与活动包装页

不适用场景:

  • 地图主界面
  • 打点判定
  • 比赛开始 / 进行中 / 结束状态推进
  • 高频实时 telemetry 主链路

2. 设计原则

2.1 主系统本地闭环

必须继续由小程序 / 原生层负责:

  • 地图与定位
  • 打点判定
  • 核心状态机
  • 最小内容卡
  • 最小结果页
  • 本地缓存与断网兜底

2.2 H5 只做增强,不做状态拥有者

H5 适合负责:

  • 富图文详情
  • 互动任务
  • 品牌包装
  • 表单与作品提交
  • 增强结果页

H5 不直接决定:

  • 是否打点成功
  • 是否比赛结束
  • 是否跳点成功
  • 是否修改核心规则状态

2.3 H5 必须独立存在

H5 页面不应作为“主系统页面的一部分代码”长期散落在业务仓里,而应逐步具备以下能力:

  • 独立页面目录与版本
  • 独立静态资源发布
  • 独立主题与资源管理
  • 独立入口配置
  • 独立回滚

2.4 契约优先于页面实现

主系统与 H5 之间优先约定:

  • 页面入口模型
  • Bridge 协议版本
  • 页面能力白名单
  • 结果回传结构
  • fallback 行为

而不是先做大量页面,再反向补协议。

2.5 所有增强能力都必须可降级

若 H5 打不开、Bridge 不可用、内容面 API 失败,系统应自动降级为:

  • 仍显示原生内容卡
  • 仍可继续比赛
  • 仍可查看原生结果页
  • 不阻断地图主流程

3. 推荐分层

建议当前项目的体验承载层按四层理解:

3.1 核心游戏层

负责:

  • 打点
  • 地图
  • GPS
  • HUD
  • 规则引擎
  • 结果结算

这一层不依赖 H5 才能成立。

3.2 原生兜底体验层

负责:

  • 最小内容卡
  • 最小结果页
  • 必要 CTA
  • H5 失败时的替代展示

3.3 H5 内容扩展层

负责:

  • 详情页
  • 互动任务页
  • 品牌活动页
  • 增强结果页

这一层通过原生 CTA 进入,不再承担局部弹窗职责。

3.4 内容管理与发布层

负责:

  • H5 页面入口管理
  • 页面版本管理
  • Bridge 白名单管理
  • 主题与资源管理
  • fallback 策略
  • 页面发布与回滚

这一层建议长期从玩法主配置中拆出来,形成独立内容体验管理能力。


4. 推荐页面类型

建议第一阶段只正式支持以下几类 H5 页面:

4.1 内容详情页

用于:

  • 打点后的补充说明
  • 景点 / 点位图文介绍
  • 活动详情说明

特点:

  • 展示为主
  • 交互较轻
  • 可由原生内容卡 CTA 进入

4.2 互动任务页

用于:

  • 拍照打卡
  • 语音留言
  • 问答互动
  • 收集式任务
  • 轻量小游戏互动

特点:

  • 需要 Bridge 能力
  • 需要任务结果回传
  • 需要原生 fallback

4.3 增强结果页

用于:

  • 品牌化成绩包装
  • 徽章 / 分享 / 排名增强
  • 作品提交后展示

特点:

  • 原生结果页始终保底
  • H5 只做增强版入口

4.4 活动包装页

用于:

  • 活动专题
  • 客户品牌包装
  • 招募 / 说明 / 规则展示

特点:

  • 可独立于局内主链存在
  • 更接近内容页,而非玩法页

5. 推荐运行链路

对于“打点后增强体验”,建议统一为:

完成打点
-> 原生判定成功
-> 原生内容卡 / 原生短反馈
-> 用户点击 CTA
-> 打开整页 H5 详情页 / 任务页
-> H5 获取上下文并完成互动
-> H5 submitResult 回传结果
-> 原生决定后续反馈 / 结果展示

对于“活动浏览链路”,建议统一为:

活动列表
-> 活动详情页
-> 准备页
-> 地图主链
-> 原生结果页
-> 可选进入 H5 增强结果页

关键点:

  • H5 总是在主系统之后进入,而不是反向驱动主系统
  • 打点成功必须先由原生确认
  • 结果页必须始终有原生版本兜底

6. 推荐配置挂接方式

当前项目建议继续沿用现有配置口径:

  • playfield.controlOverrides.<key>.autoPopup
  • playfield.controlOverrides.<key>.contentExperience
  • playfield.controlOverrides.<key>.clickExperience

推荐理解:

  • autoPopup 控制打点完成后是否先弹原生内容卡
  • contentExperience 控制打点成功后的扩展体验入口
  • clickExperience 控制点击点位时的补充内容入口

建议最小配置示例:

{
  "playfield": {
    "controlOverrides": {
      "control-3": {
        "autoPopup": true,
        "contentExperience": {
          "type": "h5",
          "url": "https://example.com/h5/tasks/control-3",
          "bridge": "content-v1",
          "presentation": "fullscreen"
        }
      }
    }
  }
}

建议继续坚持:

  • 不让 H5 直接顶替原生即时内容弹窗
  • H5 默认按整页 / 全屏容器打开
  • 配置只声明入口,不让页面内部细节反向污染玩法主配置

7. 推荐 Bridge 最小契约

H5 与主系统之间建议继续保持最小协议:

7.1 原生注入上下文

最少应包含:

  • eventId
  • sessionId
  • sessionStatus
  • controlId
  • bridgeVersion
  • mode
  • title
  • theme

7.2 H5 可请求的最小能力

第一阶段建议只开放:

  • getGameContext
  • close
  • takePhoto
  • recordAudio
  • submitResult

7.3 H5 回传结果的最小结构

建议最少包含:

  • taskId
  • status
  • payload

示例:

{
  "id": "req-002",
  "channel": "request",
  "type": "submitResult",
  "payload": {
    "taskId": "task-photo-control-3",
    "status": "completed",
    "payload": {
      "assetId": "img-001"
    }
  }
}

7.4 协议边界

Bridge 只做:

  • 上下文读取
  • 能力请求
  • 结果回传

Bridge 不做:

  • 比赛核心状态修改
  • 打点成功与否判定
  • 比赛结束判定
  • 地图主循环控制

8. 推荐独立管理方式

若希望 H5 真正可扩展、可维护,建议长期形成独立内容体验管理能力。

8.1 管理对象

建议至少管理以下对象:

  • 页面入口对象
  • 页面版本对象
  • 页面主题对象
  • 页面资源对象
  • Bridge 能力白名单
  • fallback 策略

8.2 与活动对象的关系

建议活动只绑定“已发布的体验对象摘要”,而不直接持有散装页面地址。

推荐关系:

Event
-> EventRelease
-> currentPresentation
-> currentContentBundle
-> runtime
-> H5 页面入口摘要 / 任务入口摘要

8.3 与后台的分工

建议在后台中单列“内容体验中心”,负责:

  • 原生模板
  • 原生 DSL
  • H5 页面入口
  • Bridge 能力
  • 主题配置
  • 资源配置
  • fallback 策略

而不是让玩法后台直接承接所有 H5 页面细节。


9. 推荐发布与部署方式

H5 增强层建议按“独立静态发布物”管理。

9.1 页面交付形态

建议:

  • H5 页面资源走静态发布物
  • 上传 OSS / CDN
  • 由主系统根据已发布入口打开

9.2 版本策略

建议每个 H5 页面具备:

  • 页面编码 pageCode
  • 页面版本 version
  • 协议版本 bridgeVersion
  • 状态 draft / published / archived

9.3 回滚策略

建议 H5 页面支持:

  • 单页回滚
  • 活动级解绑
  • fallback 到原生页

这样可以做到:

  • 内容改版不必改主系统发版
  • 某个 H5 页出问题时可快速下线
  • 玩法主链不受拖累

10. 推荐 fallback 策略

建议从一开始就明确这几类降级行为:

10.1 H5 页面打不开

  • 回退到原生内容卡
  • 允许继续比赛

10.2 Bridge 不可用

  • 禁用扩展能力按钮
  • 保留基础图文展示

10.3 内容面 API 异常

  • 允许 H5 本地完成基础展示
  • 结果回传失败时提示稍后重试或改走原生兜底

10.4 增强结果页不可用

  • 保底显示原生结果页
  • 不影响本局成绩结算与查看

11. 对当前项目的建议落地顺序

建议按以下顺序推进,而不是一开始就大规模铺 H5 页:

第一阶段:定住边界

  • 固定“原生内容卡 + H5 整页任务页”口径
  • 固定 content-v1 / result-v1
  • 固定 fallback 规则

第二阶段:跑通最小闭环

  • 先跑通一个内容详情页
  • 再跑通一个互动任务页
  • 再跑通一个增强结果页入口

第三阶段:独立化管理

  • 抽出 H5 页面入口管理
  • 抽出 Bridge 白名单管理
  • 抽出页面版本与发布记录

第四阶段:产品化扩展

  • 再接拍照任务
  • 再接留言任务
  • 再接作品提交
  • 再接品牌专题与增强结果页

12. 当前阶段不建议做的事

  • 不建议继续尝试局部 H5 弹窗
  • 不建议让 H5 直接参与打点判定
  • 不建议让 H5 持有比赛主状态
  • 不建议把 H5 页面地址直接散落在多个业务字段里长期维护
  • 不建议把页面内部所有细节都硬塞进玩法主配置
  • 不建议在没有 fallback 的前提下把结果页完全交给 H5

13. 与现有文档的关系

本方案是对以下文档的补充收口:

  • 混合体验架构方案
  • 原生与 H5 Bridge 规范
  • 主流程与增强能力边界说明
  • API 与发布物边界约定
  • 后台管理系统建设建议

定位上:

  • 混合体验架构方案 负责总体分层
  • Bridge 规范 负责通信契约
  • 本文负责回答“H5 如何作为独立增强层长期存在并管理”

14. 一句话结论

最适合当前项目的 H5 方案,不是把 H5 做成主系统的一部分,而是:

主系统持有核心闭环H5 作为独立内容扩展层存在,通过稳定入口、稳定 Bridge、独立发布和明确 fallback 承接高变化体验。