2020-10-13 小程序富文本渲染

工作&学习笔记（随笔，主要是方便自己以后查看）

小程序中渲染富文本

官方原生组件 :

<rich-text nodes="{{data}}"></rich-text>

API链接:https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

富文本中的视频不能渲染

　　原生rich-text是不支持video等视频标签的，这个问题有挺多开发人员反馈的，但是目前依然是未支持的状态

nodes 不推荐使用 String 类型

　　nodes装载的数据可以支持array以及string两种，但是string类型渲染会导致性能下降。所以我们尽量使用array类型

如果使用了不受信任的html节点，该节点会被删除

　　这里如何理解“不受信任”呢？ 其实可以理解为不被支持，也就是说rich-text虽然支持自带html标签的数据，但是并不是所有标签都支持
具体支持的标签可以参考官方文档

img标签仅支持网络图片

　　富文本数据中的img标签，src的链接必须是网络链接。也就是说 './'、'../' 等类似引用方式是不支持的
因此我们需要对富文本数据中img的路径进行转化，转化为线上路径
例如使用replace进行匹配替换
 

 

 

轻巧的Parser组件
　　作为一个30多kb大小的富文本渲染组件，parser同样也能完成丰富的富文本渲染。
该插件对rich-text进行了二次封装，同时还解决了wxParser中的一些缺陷(无法解析表格，一些组件显示格式不正确等)
附上码云地址： https://gitee.com/zhaowx_admin/Parser
作者不仅留下了好的插件，同时也留下了好的文档，开源免费可分享，本文档动态更新，建议加星收藏
具体用法：
　　

使用方法

1. 下载Parser文件夹至小程序目录
   

2. 在需要引用的页面的json文件中添加

   {
     "usingComponents": {
       "Parser":"/Parser/index"
     }
   }

3. 在需要引用的页面的wxml文件中添加

   <Parser html="{{html}}" />

4. 在需要引用的页面的js文件中添加

   onLoad:function(){
     this.setData({
       html:'your html'
     })
   }

• 整个项目是示例小程序的源码（原生框架），可以直接体验

后端解析

  本插件提供了一个配套的后端node.js支持包，可以提供更加强大的功能，如匹配多层的style，代码高亮，直接打开网址，解析markdown等，其返回值可以直接作为本组件的html属性的值；且在后端提前完成解析后可以节省解析时间，提高性能。
注意：该包需要node.js v7.6.0以上运行环境，无法直接在小程序前端使用，建议部署在服务器或云函数上
安装方法：

npm install parser-wxapp

　　2. 引入parser组件

　　3.在wxml中使用

<parser class="article" html="{{ data }}" />

参考链接:https://www.cnblogs.com/edgeQAQ/p/12523024.html