美文网首页
小程序rich-text接收富文本不起作用

小程序rich-text接收富文本不起作用

作者: 雅雅的前端工作学习 | 来源:发表于2020-07-10 14:37 被阅读0次

    后台传来的富文本有些并不能被rich-text识别以及良好的展现,比如图片大小问题,我们后台传来的含有很多<u>标签,尽管官方文档显示小程序支持,但实践中并不可以,只好通过方法将其删除,还有<被转义成&lt这些。我们需要将其换成普通字符供rich-text识别:

    Page({
    //html转义方法
       escape2Html(str) {
        var arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' };
        return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) { return arrEntities[t]; }).replace(/<section/g, '<div').replace(/<img/gi, '<img style="max-width:100%;height:auto" ').replace(/<u>/g,'').replace(/<u style="">/g,'').replace(/<\/u>/g,'');
      },
      onLoad: function (options) {
          var that=this;
          //封装好的request方法
          api('接口地址',Data).then(res=>{
          if(res.data.code==1) {
            //将数据进行转义,变成rich-text认识的样子
            var introduce= that.escape2Html(res.data.data.introduce)
            that.setData({
              introduce:introduce,
            })
          }else {
            wx.showModal({
              title: '提示',
              content: res.data.msg
            })
          }
        })
      })
    })
    

    wxml中:

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

    相关文章

      网友评论

          本文标题:小程序rich-text接收富文本不起作用

          本文链接:https://www.haomeiwen.com/subject/hncmcktx.html