【H5需求文档】问答式前端

需求背景：

问答式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