探討一個針對文字內容設定標題定位的業務場景。
業務場景
管理後臺錄入/編輯一段md或富文字協議，小程式端進行展示協議，且在小程式實現標題側邊欄，能快速定位至對應的內容。如圖所示
管理後臺：錄入內容實現方式
1. 產出 長文字
管理後臺錄入時，錄入以markdown格式或富文字格式。
由於專案在早期已進入開發，當時對markdown的轉化工具相容性較低，所以選擇採取以富文字的方式進行儲存。
2. 產出 標題列表
錄入後，檢索出對應的標題，將標題賦予對應標識，產出 標題列表。
客戶端：小程式實現方式
小程式的實現方式有多種，先講比較常用的兩種方式：
方式一：wxParse + <scrollView>
採用微信小程式建立 wxParse —— 微信小程式富文字解析元件，支援Html及markdown轉wxml視覺化。
-
優點
- 對富文字支援程度很高，樣式上可以按需調整
- 易定製化，對於圖片、連結等，可根據不同需要來控制其點選效果
-
缺點
- 解析時間隨著元素的數量而不同。對html元素都進行解析，如果遇到一些表格型別，就會有特別多
<tr>、<td>標籤，解析速度非常緩慢，導致等待時間很長，使用者體驗不好。但如果採用方式二，就可以避開對內容的解析，不需要再控制解析時間。
- 解析時間隨著元素的數量而不同。對html元素都進行解析，如果遇到一些表格型別，就會有特別多
方式二：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