微信小程序 rich-text 富文本的解析显示
微信小程序 rich-text 富文本的解析显示
泥豆芽儿 MT
发布于 2019-02-25 10:04:46
发布于 2019-02-25 10:04:46
♘ 背景
- 最近在开发学习
Uniapp的过程中遇到了富文本的显示，对比了微信小程序中生成的代码，才发现原来微信官方早就开发了<rich-text>标签，可以很方便的拿来使用 - 所以，在此对 小程序 rich-text 的使用方法进行一点整理
♘ 使用技巧
❶ . 首先，是 wxml 页面元素的最简单使用
<rich-text nodes="{{article_content}}"></rich-text>❷. js 通常的处理逻辑为：
- 根据
文章 ID，网络请求其文章内容；然后将"html"格式的代码进行转化；最后赋值于article_content变量.
- 其实核心的处理代码就是下面这句：
/**
* 此代码段处理目的为，匹配富文本代码中的 <img> 标签，并将其图片的宽度修改为适应屏幕
* max-width:100% --- 图片宽度加以限制，避免超出屏幕
* height:auto --- 高度自适应
* display:block --- 此代码，可以去掉图片之间的空白间隔，个人觉得好用
*/
article_content = article_content.replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block" ');一般而言，我们使用的富文本编辑器（比如：UEditor），生成的
HTML节点及属性大多数都可以进行解析 测试中，发现对<section>标签不支持 可参考文章： 小程序 rich-text 不支持 section 标签的情况
- 那么前面的代码片段，可对应修改为：
article_content = article_content.replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block" ')
.replace(/<section/g, '<div')
.replace(/\/section>/g, '\div>');❸. 效果展示
☠ 附录
- 官方文档，详情请参考： 小程序 rich-text
- 在这之前，我使用的是 wxParse解析富文本 最大的缺点就是代码配置多，并且无疑多出了一部分源码资源
- 推荐学习：RegExp对象笔记整理|正则基础
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019年01月07日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读