探討一個針對文本內容設置標題定位的業務場景。html
管理後臺錄入/編輯一段md或富文本協議,小程序端進行展現協議,且在小程序實現標題側邊欄,能快速定位至對應的內容。如圖所示前端
長文本
管理後臺錄入時,錄入以markdown格式或富文本格式。git
因爲項目在早期已進入開發,當時對markdown的轉化工具兼容性較低,因此選擇採起以富文本的方式進行保存。github
標題列表
錄入後,檢索出對應的標題,將標題賦予對應標識,產出 標題列表
。web
小程序的實現方式有多種,先講比較經常使用的兩種方式:小程序
<scrollView>
採用微信小程序建立 wxParse —— 微信小程序富文本解析組件,支持Html及markdown轉wxml可視化。微信小程序
優勢瀏覽器
缺點前端框架
<tr>
、<td>
標籤,解析速度很是緩慢,致使等待時間很長,用戶體驗很差。但若是採用方式二,就能夠避開對內容的解析,不須要再控制解析時間。文本的內容就所有放到一個h5網頁來實現,在小程序端就經過 web-view
組件來展現這個網頁內容。微信
但對於標題的定位跳轉,也能夠有不一樣實現方式:
<a>
標籤作標題跳轉的錨點優勢
缺點
經過觸發點擊帶錨點的連接,瀏覽器前進後退可能致使hash的變化。點擊返回的時候,返回的不是上一頁面,而是上一個定位的位置。詳情可查看《理解瀏覽器歷史記錄》
因爲用<a>
標籤作標題跳轉的錨點的方式,對"返回"按鈕不友好,因此採用另外一種方式,用 js 模仿 <a>
標籤跳轉。
<a>
標籤跳轉優勢
缺點
不過上述的兩個缺點均可以經過網頁進行解決,剩下的是開發便捷性的問題。
上面的實現方式僅僅是富文本的方式,現在對 markdown
格式的應用和轉化的支持性都有所提升,因此針對 markdown
格式的文本,也能夠作相似的探討。若是你有想法能夠和咱們一塊兒交流,而且咱們也在招聘 web前端開發工程師 ,若是有興趣也能夠加入咱們喲O(∩_∩)O ,瞭解更多或者投遞簡歷到郵箱 web@talkmoney.cn。
做者簡介:土撥鼠,蘆葦科技web前端開發工程師,表明做品:飛花亭小程序、續航基因、YY表情紅包、YY疊方塊直播競賽小遊戲。擅長網站建設、公衆號開發、微信小程序開發、小遊戲、公衆號開發,專一於前端框架、服務端渲染、SEO技術、交互設計、圖像繪製、數據分析等研究,有興趣的小夥伴來撩撩咱們~ web@talkmoney.cn