支付宝小程序接口返回富文本内容如何展示

支付宝小程序如何展示分文本内容

1.首先安装插件 mini-html-parser2
终端输入 npm install mini-html-parser2 --save 命令

2.安装后引入 import parse from ‘mini-html-parser2’
相应的js文件中引入

import parse from 'mini-html-parser2';
Page({
  data: { } 
  })

3.获取到富文本信息后将其转化

loadProductDetail() {
    const data = {
      packageCode: this.data.packageCode
    };
    home.queryProductDetail(data).then(res => {
      if (res.code === 200) {
        const packageInfo = res.data.packageInfo;
        this.setData({
          productDetail: packageInfo
        });
       // 这是接口获取到的数据结构（供参考） packageDesc: "<p><img src=\"https://zhonger-file.insurbank.cn/2022/04/11/029500C9-48FA-46E2-B522-079B3B20B846.png\" style=\"max-width:100%;\" contenteditable=\"false\"/></p>"
       // 获取详情的接口中 找出需要展示的富文本字段
        const packageDesc = packageInfo.packageDesc
        // 将富文本字段按进行转化 转化后 nodes则是需要展示的内容
        parse(packageDesc, (err, nodes) => {
          if (!err) {
            this.setData({
              nodes,
            });
          }
        })
      }
    });
  },

4.拿到符合规则后的内容 在axml中展示就可以啦

<view class='text'>详情描述</view>
<rich-text  nodes="{{nodes}}" onTap="tap"></rich-text>

自此就简单的完成了富文本的展示
图片展示

文字展示

附上支付宝rich-text官网： https://opendocs.alipay.com/mini/component/rich-text
哪里不合适还希望大神多多指教！😉