探讨一个针对文本内容设置标题定位的业务场景。

业务场景

管理后台录入/编辑一段md或富文本协议,小程序端进行展示协议,且在小程序实现标题侧边栏,能快速定位至对应的内容。如图所示

协议详情(示例)

标题菜单,快速定位内容

管理后台:录入内容实现方式

1. 产出 长文本

管理后台录入时,录入以markdown格式或富文本格式。

由于项目在早期已进入开发,当时对markdown的转化工具兼容性较低,所以选择采取以富文本的方式进行保存。

2. 产出 标题列表

录入后,检索出对应的标题,将标题赋予对应标识,产出 标题列表

客户端:小程序实现方式

小程序的实现方式有多种,先讲比较常用的两种方式:

方式一:wxParse + <scrollView>

采用微信小程序创建 wxParse —— 微信小程序富文本解析组件,支持Html及markdown转wxml可视化。

方式二:web-view + 网页展示

文本的内容就全部放到一个h5网页来实现,在小程序端就通过 web-view 组件来展示这个网页内容。

但对于标题的定位跳转,也可以有不同实现方式:

<a> 标签做标题跳转的锚点

由于用<a> 标签做标题跳转的锚点的方式,对"返回"按钮不友好,所以采用另一种方式,用 js 模仿 <a> 标签跳转。

js 控制滚动,仿 <a> 标签跳转

总结

上面的实现方式仅仅是富文本的方式,如今对 markdown 格式的应用和转化的支持性都有所提高,所以针对 markdown 格式的文本,也可以做类似的探讨。如果你有想法可以和我们一起交流,并且我们也在招聘 web前端开发工程师 ,如果有兴趣也可以加入我们哟O(∩_∩)O ,了解更多或者投递简历到邮箱 web@talkmoney.cn

作者简介:土拨鼠,芦苇科技web前端开发工程师,代表作品:飞花亭小程序、续航基因、YY表情红包、YY叠方块直播竞赛小游戏。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发,专注于前端框架、服务端渲染、SEO技术、交互设计、图像绘制、数据分析等研究,有兴趣的小伙伴来撩撩我们~ web@talkmoney.cn