评论

WxParse解析富文本

微信小程序解析富文本问题

WxParse是专门解析后台返给我们的HTML数据的,也叫做小程序的HTML解析器

这种方式可以解析 html/markdown 两种脚本,功能很强大

缺点:在解析富文本过程中,多次调用小程序的setData()方法,对性能有一定影响。

GitHub地址:https://github.com/icindy/wxParse

解压出来后,直接复制到小程序项目的根级目录

WXML:
      //引入
      <import src="/wxParse/wxParse.wxml"/>
      //article为JS里WxParsewxParse第一个参数
      <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
  
JS:
    //引入
    const WxParse = require('../../wxParse/wxParse.js');
    onLoad: function (options) {
      //第一个参数将成为WXML展示的数据名称
      //第三个参数是要展示的数据
      WxParsewxParse('article', 'html', this.data.articleHtml, this, 5);
    },

WXSS:
     //引入
     @import "/wxParse/wxParse.wxss";


另一种解析富文本的方法,rich-text为小程序自带富文本组件,直接使用即可

rich-text富文本组件是小程序1.4.0版本后推出来的,可以通过js脚本把html解析成一定格式的nodes,然后在 rich-text 中显示。

缺点:只能解析html内容,需要做兼容处理

WXML:
    //articleHtml是JS数据
    <rich-text nodes="{{articleHtml}}"></rich-text>
最后一次编辑于  2022-03-11  
点赞 0
收藏
评论

1 个评论

登录 后发表内容