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

Posted 2022-04-16 早起的年轻人

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

---

在微信小程序开发中，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
          )
        
      ,
    )
  

---

完毕

---

小编也写了几本书，如果你有兴趣可以去看看

• 手机点击查看 # 电脑点击查看
  

---

• 手机点击查看 # 电脑点击查看