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

绝地灬酷狼 2023-10-07 17:31 52阅读 0赞

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

--------------------

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

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

##### 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
              })
            }
          },
        })
      }

--------------------

完毕

--------------------

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

*  [手机点击查看][Link 1] \# [电脑点击查看][Link 2]  
    ![请添加图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16]

--------------------

*  [手机点击查看][Link 3] \# [电脑点击查看][Link 4]

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/3837318eed434d258dfbc19a35cd84ec.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[Link 1]: https://m.tb.cn/h.f6IsZcl?sm=b5555a
[Link 2]: https://detail.tmall.com/item.htm?id=658886049139
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/ed9ecf4aacc84e5cb17d5b486e431083.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_20,color_FFFFFF,t_70,g_se,x_16
[Link 3]: https://item.m.jd.com/product/10040957873690.html?&utm_source=iosapp&utm_medium=appshare&utm_campaign=t_335139774&utm_term=CopyURL&ad_od=share&utm_user=plusmember&gx=RnFjxjUIbWGNztQUp4J3XrJgfXzlaNZ0
[Link 4]: https://item.jd.com/13009851.html
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pep6LW355qE5bm06L275Lq6_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]: https://img-blog.csdnimg.cn/0b0016200df2484aa2029c1b20224fee.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pep6LW355qE5bm06L275Lq6,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center