rich-text组件还是非常强大的。

文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

目前用这个组件容易遇到的问题如下：

1.连续的一张商品详情图片分割后，拼接在一起会出现空白的问题。之所以不用一张整图，是考虑到用户在非wifi模式下加载资源会很卡，图片大了都这样。所以会把大图裁剪成小于120kb左右的小图

2.会出现图片大小不自适应的问题，比如图片太大，只展示了一半。因为这两个情况都是经常遇到的，我这里就不找效果图展示了。

3.关于加载富文本里面的图片或者a标签是否能够触发事件，并执行对应的函数，答案是支持的，不过需要用三方的插件，这个参考我的另外一篇文章。

文章地址同步如下: https://zhuanlan.zhihu.com/p/554786156

下面直接上我珍藏版的代码：

js，这里我把整个函数都放出来，但是关注点其实就两点：

1.p标签添加：font-size: 0
2.img标签，添加 style="max-width:100%;height:auto;display:block;"

getData(){
  uni.showLoading();
  let self = this;
  this.$http.get("getBagDetail", {id: this.pId})
      .then(res => {
        uni.hideLoading()
        if (res.data.code == 1) {
          //this.productList = res.data.data || [];
          let obj = res.data.data;
          this.swiperImgs = [obj.img_url]
          this.productObj = {...obj};
          if(obj?.max_bag_order){
            let bag_type = obj?.max_bag_order?.bag_type; // 1 基础套餐 2 全额套餐
            this.isFlag = bag_type == 1 ? true : false
            this.isBuy = false;
            this.bag_type = bag_type;
          }else {
            this.isBuy = true;
          }

          let richObj1 = obj["detail_info"].replace(
              /\

以上是目前能够想到的解决方案，如果大家有其他比较好的方案，欢迎留言补充。互勉！

1. tip: nodes 不推荐使用 String 类型，性能会有所下降。
2. tip: rich-text 组件内屏蔽所有节点的事件。
3. tip: attrs 属性不支持 id ，支持 class 。
4. tip: name 属性大小写不敏感。
5. tip: 如果使用了不受信任的 HTML 节点，该节点及其所有子节点将会被移除。
6. tip: img 标签仅支持网络图片。
7. tip: 如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效。