面向智能座舱的儿童绘本场景。客户端是安卓车机壳，只嵌入一部分 H5 页面，绘本的图文、翻页和播放由前端渲染。业务上要同时覆盖两类使用：一类是在线创作，用户通过车机语音生成故事、角色形象和分页内容，页面需要跟着端侧数据实时展示；另一类是离线阅读，车机网络不稳定，已下载到本地的绘本仍要能翻页、播旁白并记住读到哪一页。如果这些都做在原生壳里，每次换书、改交互都要跟客户端一起发版，内容更新慢。立项就是把阅读和创作预览做成可嵌入的 H5，端侧负责语音、下载和播控，前端负责取数和渲染，解决车机绘本更新依赖发版、生成过程中不能边出页边看，以及弱网下阅读中断的问题。
项目包含两套前端。admin-micro-child-static 是在线绘本 H5，嵌入车机后有四块能力。一是绘本阅读：按绘本编号拉取详情，展示分页图文和旁白，支持播放暂停、上一页下一页、点击和滑动翻页、互动选项跳转、亮度与息屏、按历史阅读位置续读，也可把离线资源交给端侧保存到本地。二是在线创作预览：接收端侧逐段下发的总页数、正文、图片和语音，页面按生成状态增量拼书，第一页就绪即可开读，未完成的下一页不允许翻过去；快捷模式下奇数页展示文字、偶数页展示图片。三是对话预览：展示故事摘要和角色形象，可切换角色、播放摘要，并确认生成或返回修改，同时处理风控和生成失败。四是后台预览：同一套阅读器给管理端查看，不走车机播控。static-h5-local-storybook 是离线阅读器，用本地文件协议打开，绘本数据、图片和音频与代码分离，替换资源即可换书，无需重新发版。它同样支持拟真翻页、自动或手动播放、互动选项、息屏亮度、续读，并响应车机的播放、暂停、翻页和退出。
我负责上述两套车机绘本 H5 的前端开发，包括页面、阅读状态和与安卓壳的通信。技术栈为 React 18、TypeScript、Ice.js，样式用 Less，组件使用 Ant Design，页面富文本经 DOMPurify 清洗后再渲染。阅读状态集中在 useBookReader：DigitalBookReader 负责翻页快照和动画，AudioSequencePlayer 按顺序播放旁白与角色音频，并预加载相邻页图片。与车机通过 DSBridge 通信，H5 调用 Js2JavaApi，端侧回调统一入口后按动作分发播放、暂停、翻页、存本地、退出和生成结果。在线阅读页用接口拉取绘本详情，创作页和对话页不自己轮询，而是接收端侧推送的生成结果再渲染，翻页时把阅读进度回传。离线页把绘本数据挂到本地脚本，避开文件协议下不能直接请求本地 JSON 的限制。亮点是在线边生成边阅读，以及离线换书不发版。难点是车机 WebView 尺寸小、翻页动画要和端侧语音打断对齐，以及端侧事件回调容易拿到过期的页面状态。
评论