需求背景：
問(wèn)答式H5以【知識(shí)問(wèn)答】和【商品SKU推薦】為核心，由運(yùn)營(yíng)側(cè)同學(xué)按不同的PGC內(nèi)容（劇本）形成多個(gè)H5頁(yè)面，進(jìn)行規(guī)定范圍內(nèi)的問(wèn)答，實(shí)現(xiàn)PGC內(nèi)容的測(cè)試；
典型用戶：
90后女性用戶
Story詳細(xì)描述：
1、整體概況：從微信體系內(nèi)的richbox縮略樣式->H5的主界面與內(nèi)容素材，前端的可存在的展現(xiàn)樣式大致如下：
2、PGC內(nèi)容的Richbox縮略樣式
?運(yùn)營(yíng)側(cè)會(huì)產(chǎn)生多個(gè)H5，并以不同面膜維度的主題內(nèi)容存在，前端需支持不同標(biāo)題、描述、圖片的配置展示，前端無(wú)開(kāi)發(fā)工作；
?交互邏輯：
-點(diǎn)擊后需實(shí)現(xiàn)微信接口的第三方登錄授權(quán)，獲取頭像與昵稱，進(jìn)入H5主頁(yè)面。
3、H5主頁(yè)面樣式，整體布局分為頂部tittle，小蜜頭像，用戶頭像，聊天內(nèi)容氣泡，按鈕點(diǎn)擊區(qū)域；
?交互邏輯：
-獲取用戶頭像成功，展現(xiàn)用戶頭像及昵稱
-獲取用戶頭像失敗，非微信體系下傳播時(shí)（瀏覽器打開(kāi)），則不顯示頭像及昵稱
-Button有兩種展現(xiàn)位置
?位于頁(yè)面底端，點(diǎn)選后上滑成為用戶對(duì)話氣泡
?位于小蜜對(duì)話氣泡中，點(diǎn)選后出現(xiàn)相關(guān)內(nèi)容信息
4、H5內(nèi)的富媒體樣式，目前確認(rèn)包含 文本、圖片、視頻、商品、richbox（圖文），各自的UI樣式大致如下：
1）文字，包含兩種樣式，即純文本方式，文本下方含【按鈕】形式
?交互邏輯：
-純文本方式，與常規(guī)聊天樣式一致，支持自有文字表情的展現(xiàn)；
-含按鈕方式，點(diǎn)擊后用戶側(cè)不發(fā)出內(nèi)容回復(fù)，直接繼續(xù)內(nèi)容的展現(xiàn)
2）圖片，分為單個(gè)和小組形式展現(xiàn)
?交互邏輯：
-單個(gè)方式，一張圖片為一個(gè)獨(dú)立體；
-組圖出現(xiàn)，多個(gè)圖片橫向排列，可左右滑動(dòng)進(jìn)行查看，點(diǎn)選圖片可放大或展現(xiàn)產(chǎn)品基礎(chǔ)信息
3）視頻
?交互邏輯：
-僅提供一種展現(xiàn)形式，點(diǎn)擊后進(jìn)入全屏播放模式，需支持用戶的手動(dòng)拖動(dòng)調(diào)整進(jìn)度
4）商品sku，商品展現(xiàn)樣式，存在縮略樣式和點(diǎn)擊后的商品詳情頁(yè)，詳情如下：
?交互邏輯：
-商品縮略樣式圖：展現(xiàn)形式例如下圖，下方小圖為產(chǎn)品圖片，可左右滑動(dòng)進(jìn)行點(diǎn)選，與組圖樣式保持一致，點(diǎn)選后產(chǎn)品的基礎(chǔ)信息可在上方顯示，點(diǎn)擊基礎(chǔ)信息區(qū)域可加入商品詳情頁(yè)
-商品詳情頁(yè)：展現(xiàn)商品基本信息和第三方購(gòu)買平臺(tái)，通過(guò)”立即購(gòu)買”可進(jìn)入購(gòu)買渠道
5）Richbox（圖文），用于引用第三方的圖文消息，樣式與公眾號(hào)內(nèi)的圖文消息保持一致即可；
6）語(yǔ)音，因目前使用的場(chǎng)景尚未確認(rèn)，暫時(shí)hold
