需求背景：
问答式H5以【知识问答】和【商品SKU推荐】为核心，由运营侧同学按不同的PGC内容（剧本）形成多个H5页面，进行规定范围内的问答，实现PGC内容的测试；
典型用户：
90后女性用户
Story详细描述：
1、整体概况：从微信体系内的richbox缩略样式->H5的主界面与内容素材，前端的可存在的展现样式大致如下：
2、PGC内容的Richbox缩略样式
•运营侧会产生多个H5，并以不同面膜维度的主题内容存在，前端需支持不同标题、描述、图片的配置展示，前端无开发工作；
•交互逻辑：
-点击后需实现微信接口的第三方登录授权，获取头像与昵称，进入H5主页面。
3、H5主页面样式，整体布局分为顶部tittle，小蜜头像，用户头像，聊天内容气泡，按钮点击区域；
•交互逻辑：
-获取用户头像成功，展现用户头像及昵称
-获取用户头像失败，非微信体系下传播时（浏览器打开），则不显示头像及昵称
-Button有两种展现位置
•位于页面底端，点选后上滑成为用户对话气泡
•位于小蜜对话气泡中，点选后出现相关内容信息
4、H5内的富媒体样式，目前确认包含 文本、图片、视频、商品、richbox（图文），各自的UI样式大致如下：
1）文字，包含两种样式，即纯文本方式，文本下方含【按钮】形式
•交互逻辑：
-纯文本方式，与常规聊天样式一致，支持自有文字表情的展现；
-含按钮方式，点击后用户侧不发出内容回复，直接继续内容的展现
2）图片，分为单个和小组形式展现
•交互逻辑：
-单个方式，一张图片为一个独立体；
-组图出现，多个图片横向排列，可左右滑动进行查看，点选图片可放大或展现产品基础信息
3）视频
•交互逻辑：
-仅提供一种展现形式，点击后进入全屏播放模式，需支持用户的手动拖动调整进度
4）商品sku，商品展现样式，存在缩略样式和点击后的商品详情页，详情如下：
•交互逻辑：
-商品缩略样式图：展现形式例如下图，下方小图为产品图片，可左右滑动进行点选，与组图样式保持一致，点选后产品的基础信息可在上方显示，点击基础信息区域可加入商品详情页
-商品详情页：展现商品基本信息和第三方购买平台，通过”立即购买”可进入购买渠道
5）Richbox（图文），用于引用第三方的图文消息，样式与公众号内的图文消息保持一致即可；
6）语音，因目前使用的场景尚未确认，暂时hold
网友评论