we-rich 小程序渲染富文本js库

2019-05-04 23:46 来源:未知

一、使用文档自带的原生API  rich-text, nodes属性直接绑定需要渲染的html内容即可,文档参见这里:https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

最近项目需要, 把公众号的文章直接在小程序显示, 页面除了文章内容以外,还有其他组件.

二、使用WxParseData插件,github地址:https://github.com/icindy/wxParse

小程序中渲染html, 解决方案有三个

 

  1. 使用wxParse把html转化成小程序标签
  2. 使用web-view组件
  3. 使用rich-text组件

使用原生rich-text的缺点:不能修改默认渲染的标签样式,比如图片宽度,p标签行高等,渲染的html文本什么样就是什么样,

第一个方案是由于小程序还没有更新2,3的功能时的一个临时解决办法.
而使用web-view控件最大问题只能整屏显示.

使用方法二插件,会解析成小程序标签,并且他可以配置图片的边距等,但是<br/>标签好像不能识别。

于是翻阅rich-text控件的文档说明.也是坑满满的.

rich-text的控件使用很简单, 只需要给nodes属性赋值要渲染的html节点数组或者直接是html代码即可.

一开始想偷懒, 直接在nodes重赋值html代码. 发现基本无法使用. 因为rich-text不支持的标签很多, 遇到不支持的标签(比如section)会忽略解析.导致很多的html内容都会莫名消失.

TAG标签:
版权声明:本文由美洲杯赌球发布于计算机教程,转载请注明出处:we-rich 小程序渲染富文本js库