探讨一个针对文本内容设置标题定位的业务场景。
管理后台录入/编辑一段md或富文本协议,小程序端进行展示协议,且在小程序实现标题侧边栏,能快速定位至对应的内容。如图所示
管理后台录入时,录入以markdown格式或富文本格式。
由于项目在早期已进入开发,当时对markdown的转化工具兼容性较低,所以选择采取以富文本的方式进行保存。
录入后,检索出对应的标题,将标题赋予对应标识,产出 标题列表。
小程序的实现方式有多种,先讲比较常用的两种方式:
采用微信小程序创建 wxParse —— 微信小程序富文本解析组件,支持Html及markdown转wxml可视化。
优点
对富文本支持程度很高,样式上可以按需调整 易定制化,对于图片、链接等,可根据不同需要来控制其点击效果缺点
解析时间随着元素的数量而不同。对html元素都进行解析,如果遇到一些表格类型,就会有特别多 、 标签,解析速度非常缓慢,导致等待时间很长,用户体验不好。但如果采用方式二,就可以避开对内容的解析,不需要再控制解析时间。文本的内容就全部放到一个h5网页来实现,在小程序端就通过 web-view 组件来展示这个网页内容。
但对于标题的定位跳转,也可以有不同实现方式:
通过触发点击带锚点的链接,浏览器前进后退可能导致hash的变化。点击返回的时候,返回的不是上一页面,而是上一个定位的位置。详情可查看《理解浏览器历史记录》
由于用 标签做标题跳转的锚点的方式,对"返回"按钮不友好,所以采用另一种方式,用 js 模仿 标签跳转。