微信小程序富文本rich-text使用详解-微信小程序系统学习攻略

最新推荐文章于 2025-04-21 01:49:44 发布

早起的年轻人

最新推荐文章于 2025-04-21 01:49:44 发布

阅读量1w

点赞数 4

分类专栏：微信小程序的开发锦囊

本文链接：https://blog.csdn.net/zl18603543572/article/details/121718664

版权

微信小程序 rich-text 图片自适应富文本渲染前端开发

关键词由CSDN通过智能技术生成

微信小程序的开发锦囊专栏收录该内容

32 篇文章

订阅专栏

也许你迷茫，但是我想说，在你迷茫的同时，保持本心，过好今天就好。

在微信小程序开发中，rich-text 标签可以用来显示富文本 html内容，可以渲染部分html标签，全局支持class和style属性，但不支持id属性。

在这里插入图片描述

1 基本使用

一种最基本的应用场景就是从接口请求加载回来的 html 内容，显示到小程序页面上，常用商品详情等等。

首先，是 wxml 页面元素的使用

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

然后在对应的 js 文件中


Page({

  /**
   * 页面的初始数据
   */
  data: {
    content:'<h1>这里是标题</<h1><p>这里是段落内容体系</p>',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
})

2 处理图片自适应问题

 /**
   * 例如加载商品详情
   */
  getdetail: function () {
    wx.request({
      url: '接口地址',
      data: {'参数key':''},
      header: {
        'content-type': 'application/json'
      },
      method: 'GET',
      responseType: 'text',
      success(res) {
        console.log(res);
        if (res.data.code === 0) {
          //返回的富文本数据
          var content = res.data.data.content;
          that.setData({
            //处理图片自适应问题
            /**
             * 此代码段处理目的为，匹配富文本代码中的 <img> 标签，并将其图片的宽度修改为适应屏幕
             * max-width:100%       --- 图片宽度加以限制，避免超出屏幕
             * height:auto          --- 高度自适应
             * display:block       
             */
            contentInfo: content.replace('<img ', '<img style="max-width:100%;height:auto;display:block;margin:10px 0;"')
          })
        } else {
          console.log('数据加载失败')
          wx.showToast({
            title: res.data.msg,
            duration: 2000
          })
        }
      },
    })
  }