小程序端實現文本展現以及標題定位

探討一個針對文本內容設置標題定位的業務場景。

業務場景

管理後臺錄入/編輯一段md或富文本協議，小程序端進行展現協議，且在小程序實現標題側邊欄，能快速定位至對應的內容。如圖所示

管理後臺：錄入內容實現方式

1. 產出 長文本

管理後臺錄入時，錄入以markdown格式或富文本格式。

因爲項目在早期已進入開發，當時對markdown的轉化工具兼容性較低，因此選擇採起以富文本的方式進行保存。

2. 產出 標題列表

錄入後，檢索出對應的標題，將標題賦予對應標識，產出 標題列表。

客戶端：小程序實現方式

小程序的實現方式有多種，先講比較經常使用的兩種方式：

方式一：wxParse + <scrollView>

採用微信小程序建立 wxParse —— 微信小程序富文本解析組件，支持Html及markdown轉wxml可視化。

• 優勢

  • 對富文本支持程度很高，樣式上能夠按需調整
  • 易定製化，對於圖片、連接等，可根據不一樣須要來控制其點擊效果

• 缺點

  • 解析時間隨着元素的數量而不一樣。對html元素都進行解析，若是遇到一些表格類型，就會有特別多<tr> 、<td> 標籤，解析速度很是緩慢，致使等待時間很長，用戶體驗很差。但若是採用方式二，就能夠避開對內容的解析，不須要再控制解析時間。

方式二：web-view + 網頁展現

文本的內容就所有放到一個h5網頁來實現，在小程序端就經過 web-view 組件來展現這個網頁內容。

但對於標題的定位跳轉，也能夠有不一樣實現方式：

<a> 標籤作標題跳轉的錨點

• 優勢

  • 富文本展現，內容不須要不少調整
  • 設定錨點很是簡單，跳轉容易

• 缺點

  • 經過觸發點擊帶錨點的連接，瀏覽器前進後退可能致使hash的變化。點擊返回的時候，返回的不是上一頁面，而是上一個定位的位置。詳情可查看《理解瀏覽器歷史記錄》

    

因爲用<a> 標籤作標題跳轉的錨點的方式，對"返回"按鈕不友好，因此採用另外一種方式，用 js 模仿 <a> 標籤跳轉。

js 控制滾動，仿 <a> 標籤跳轉

• 優勢

  • 富文本展現，內容不須要不少調整
  • 設定錨點很是簡單，跳轉容易
  • 能返回上一頁面

• 缺點

  • 須要處理那些非業務域名下的連接跳轉，不然會彈出非法域名的提示，對用戶不友好。
  • 微信其餘組件的使用受到限制，例如點擊圖片預覽等，須要加jssdk配置

  不過上述的兩個缺點均可以經過網頁進行解決，剩下的是開發便捷性的問題。

總結

上面的實現方式僅僅是富文本的方式，現在對 markdown 格式的應用和轉化的支持性都有所提升，因此針對 markdown 格式的文本，也能夠作相似的探討。若是你有想法能夠和咱們一塊兒交流，而且咱們也在招聘 web前端開發工程師 ，若是有興趣也能夠加入咱們喲O(∩_∩)O ，瞭解更多或者投遞簡歷到郵箱 web@talkmoney.cn。

做者簡介：土撥鼠，蘆葦科技web前端開發工程師，表明做品：飛花亭小程序、續航基因、YY表情紅包、YY疊方塊直播競賽小遊戲。擅長網站建設、公衆號開發、微信小程序開發、小遊戲、公衆號開發，專一於前端框架、服務端渲染、SEO技術、交互設計、圖像繪製、數據分析等研究，有興趣的小夥伴來撩撩咱們~ web@talkmoney.cn