需求背景：
問答式H5以【知識問答】和【商品SKU推薦】為核心，由運營側同學按不同的PGC內容（劇本）形成多個H5頁面，進行規(guī)定范圍內的問答，實現(xiàn)PGC內容的測試；
典型用戶：
90后女性用戶
Story詳細描述：
1窄刘、整體概況：從微信體系內的richbox縮略樣式->H5的主界面與內容素材，前端的可存在的展現(xiàn)樣式大致如下：
2舷胜、PGC內容的Richbox縮略樣式
?運營側會產(chǎn)生多個H5娩践，并以不同面膜維度的主題內容存在，前端需支持不同標題、描述翻伺、圖片的配置展示材泄，前端無開發(fā)工作；
?交互邏輯：
-點擊后需實現(xiàn)微信接口的第三方登錄授權穆趴，獲取頭像與昵稱脸爱，進入H5主頁面。
3未妹、H5主頁面樣式簿废，整體布局分為頂部tittle，小蜜頭像络它，用戶頭像族檬，聊天內容氣泡，按鈕點擊區(qū)域化戳；
?交互邏輯：
-獲取用戶頭像成功单料，展現(xiàn)用戶頭像及昵稱
-獲取用戶頭像失敗，非微信體系下傳播時（瀏覽器打開）点楼，則不顯示頭像及昵稱
-Button有兩種展現(xiàn)位置
?位于頁面底端扫尖，點選后上滑成為用戶對話氣泡
?位于小蜜對話氣泡中，點選后出現(xiàn)相關內容信息
4掠廓、H5內的富媒體樣式换怖，目前確認包含 文本、圖片蟀瞧、視頻沉颂、商品、richbox（圖文）悦污，各自的UI樣式大致如下：
1）文字铸屉，包含兩種樣式，即純文本方式切端，文本下方含【按鈕】形式
?交互邏輯：
-純文本方式彻坛，與常規(guī)聊天樣式一致，支持自有文字表情的展現(xiàn)踏枣；
-含按鈕方式小压，點擊后用戶側不發(fā)出內容回復，直接繼續(xù)內容的展現(xiàn)
2）圖片椰于，分為單個和小組形式展現(xiàn)
?交互邏輯：
-單個方式，一張圖片為一個獨立體仪搔；
-組圖出現(xiàn)瘾婿，多個圖片橫向排列，可左右滑動進行查看，點選圖片可放大或展現(xiàn)產(chǎn)品基礎信息
3）視頻
?交互邏輯：
-僅提供一種展現(xiàn)形式偏陪，點擊后進入全屏播放模式抢呆，需支持用戶的手動拖動調整進度
4）商品sku，商品展現(xiàn)樣式笛谦，存在縮略樣式和點擊后的商品詳情頁抱虐，詳情如下：
?交互邏輯：
-商品縮略樣式圖：展現(xiàn)形式例如下圖，下方小圖為產(chǎn)品圖片饥脑，可左右滑動進行點選恳邀，與組圖樣式保持一致，點選后產(chǎn)品的基礎信息可在上方顯示灶轰，點擊基礎信息區(qū)域可加入商品詳情頁
-商品詳情頁：展現(xiàn)商品基本信息和第三方購買平臺谣沸，通過”立即購買”可進入購買渠道
5）Richbox（圖文），用于引用第三方的圖文消息笋颤，樣式與公眾號內的圖文消息保持一致即可乳附；
6）語音，因目前使用的場景尚未確認伴澄，暫時hold
