微信小程序显示富文本解析，展示在页面以及图片超出处理效果图

最新推荐文章于 2024-09-06 02:43:47 发布

張張yyy

最新推荐文章于 2024-09-06 02:43:47 发布

阅读量1.2k

点赞数 2

文章标签：微信小程序前端

本文链接：https://blog.csdn.net/m0_64205744/article/details/123791697

版权

本文介绍如何在微信小程序中展示后台返回的富文本数据，利用rich-text标签进行解析，并展示在页面上。同时，文章提供了解决图片超出问题的方法。

摘要由CSDN通过智能技术生成

需求是后台返回的是富文本数据，解析完展示在页面上，这里用的是 rich-text 这个标签

上代码啦！！！

wvml

<rich-text nodes="{
  {content?content:'无'}}"></rich-text>

这一步就可以把数据展示在页面上啦，

 onLoad: function (options) {
    var that = this;
    // var match_id = options.match_id?options.match_id:6;
    var match_id = options.id;
    //获取用户id 
    var user_id = wx.getStorageSync('id');
    var res = util.request(api.getMatchinfo, { match_id: match_id, user_id: user_id });
    var a = res.then(function (result) {
      console.log(result)
      if (result.code == 200) {
        var content = result.data[0].introduction;
        var contentwo = result.data[0].content;
         var contents = content.replace('<img','<img style="max-width:100%;height:auto;display:block;margin:10px 0;"')   //处理图片问题给图片加样式。。。