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

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

業務場景

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

協議詳情(示例)

標題菜單,快速定位內容

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

1. 產出 長文本

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

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

2. 產出 標題列表

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

客戶端:小程序實現方式

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

方式一: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

相關文章
相關標籤/搜索