wxparse微信小程序解析后端富文本存储的html

前情提要：后端使用quill集成富文本编辑器用来做公告模块

返回到前段时，显示为数据库存储的html数据
后端：

前端显示：

未达到想要的效果，所以接下来使用wxparse插件（下载）

解压后将里面的wxParse复制到自己的小程序，以下是我的结构

引入后在app.wxml中加入

@import "/wxParse/wxParse.wxss";

以下是我的公告页面，注意有wxparse的地方

// pages/announce/announce.js

var WxParse = require('../../wxParse/wxParse.js');

import {request} from "../../request/index.js";
import {config} from "../../request/config.js";

Page({
  /**
   * 页面的初始数据
   */
  data: {
    announce: [],
    advertisename:'暂时没有活动哟~',
    content:'',
  },

  onLoad: function() {
    this.getAnnounceInfo();
  },

  getAnnounceInfo(){
    request({url: "/admin/advertiserInfo/announce" }).then(res => { 
      if(res.code ==='0'){
        this.setData({
        //得到html的内容
          announce:res.data,
          advertisename:res.data.advertisename,
          content:res.data.content
        })
        //解析
        var that = this;
        WxParse.wxParse('content', 'html', that.data.content, that, 5);
      }
    })
  },

})

<!--pages/announce/announce.wxml-->
<import src="../../wxParse/wxParse" />
<!-- 购物车内容 -->
<view class="cart_content">
  <view class="cart_title">公告📢：{{advertisename}}</view>
  <view class="cart_main">
    <block wx:if="{{announce.length===0}}">
      <image mode="widthFix" style="margin-top: 90px;" src="../../images/blank.gif"></image>
    </block>
    <block wx:else>
      <view class="container">
        <scroll-view class="intro-box" scroll-y="true">
          <view class="intro-live">
            <!-- 这里data中content为bindName,也就是js中  WxParse.wxParse('content', 'html', that.data.content, that, 5);这里面的content-->
            <template is="wxParse" data="{{wxParseData:content.nodes}}" />
          </view>
        </scroll-view>

      </view>
    </block>
  </view>
</view>

解析成功后的页面

缺点就是反应有点慢，会先显示没有内容时的页面，所以我把没有内容时的页面设置了一个等待的动图

结束了，继续写-----------------------累死了哇！！！