Ruan Blog - 阮家森的博客 Ruan Blog - 阮家森的博客

小程序组件 rich-text 组件 直接调用字符串富文本方法

in 微信小程序read (101) 站长Ruan 文章转载请注明来源!

根据官方文档的使用说明显示,rich-text现支持两种节点,通过type来区分,分别是元素节点和文本节点,默认是元素节点,在富文本区域里显示的HTML节点。
元素接点使用场景应该不多,大部分人都只直接后端接口获取副文本的HTML字符串来直接转义。但是,经常出现并没有转义的情况,这是因为通过后台返回的数据是一个网页转义字符,直接使用rich-text的话是无法正常解析的,所以需要对获取的数据进行转义,再放入nodes中即可正常显示。

//小程序里的转义方法
escape2Html: function (str) {
    var arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' };
    return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) { return arrEntities[t]; });
},
gethtml:function(){
  var t = this;
  ...
  success(res){
    //调用在需要的地方直接调用即可。如:this.escape2Html(html)
    res.html = t.escape2Html(res.html)
    t.setDate({
      html = res.html
    })
  }
...
}
//然后在wxml中使用rich-text控件进行显示即可
<view class='content'>
  <rich-text nodes="{{html}}"></rich-text>
</view>
文章二维码

扫描二维码,在手机上阅读!

微信小程序
最后由Ruan修改于2019-09-15 23:15

此处评论已关闭

PREVIOUS NEXT
雷姆
拉姆