微信小程序text标签-微信小程序rich-text富文本的解析显示-小程序标签-即速应用

微信小程序text标签-微信小程序rich-text富文本的解析显示-小程序标签

浏览量：4405 时间：2020-03-20 来源：moTzxx

♘背景最近在开发学习Uniapp的过程中遇到了富文本的显示，对比了微信小程序中生成的代码，才发现原来微信官方早就开发了rich-text标签，可以很方便的拿来使用所以，在此对小程序rich-text的使用方法进行一点整理♘使用技巧❶.首先，是wxml页面元素的最简单使用rich-textnodes="{{article_content}}"/rich-text❷.js通常的处理逻辑为：
1.根据文章ID，网络请求其文章内容；然后将"html"格式的代码进行转化；最后赋值于article_content变量.
2.其实核心的处理代码就是下面这句：
/***此代码段处理目的为，匹配富文本代码中的img标签，并将其图片的宽度修改为适应屏幕*max-width:100%---图片宽度加以限制，避免超出屏幕*height:auto---高度自适应*display:block---此代码，可以去掉图片之间的空白间隔，个人觉得好用*/article_content=article_content.replace(/img/gi,'imgstyle="max-width:100%;height:auto;float:left;display:block"');
3.一般而言，我们使用的富文本编辑器（比如：UEditor），生成的HTML节点及属性大多数都可以进行解析测试中，发现对section标签不支持可参考文章：小程序rich-text不支持section标签的情况
那么前面的代码片段，可对应修改为：article_content=article_content.replace(/img/gi,'imgstyle="max-width:100%;height:auto;float:left;display:block"').replace(/section/g,'div').replace(//section/g,'div');❸.效果展示
4.
☠附录
5.官方文档，详情请参考：小程序rich-text
6.在这之前，我使用的是wxParse解析富文本最大的缺点就是代码配置多，并且无疑多出了一部分源码资源
7.推荐学习：RegExp对象笔记整理|正则基础