Taro3.6版本使用mp-html富文本插件

由于之前的项目taro版本都比较低，3.2版本的，直接引入mp-html都没有太大问题，后面升级到3.6版本就直接报错了。

mp-html官方文档传送门
Taro引入的具体流程如下：

 npm install mp-html

在node_modules里面找到mp-html，把mp-weixin文件夹拷贝到自己项目的components里面并重命名为mp-html

在需要使用的页面配置如下：

usingComponents: {
   'mp-html': '../../../components/mp-html/index',//具体根据自己项目路径来写
},
//config/index.ts
//配置打包时拷贝一份到dist目录下
copy: {
  patterns: [
  		{ from: 'src/components/mp-html/', to: 'dist/components/mp-html/'}
  ]
},

然后运行项目，检查是否有该目录

然后就是使用组件了
当然，taro3.6版本的时候有个bug，会报如下错误

property "content" of "components/mp-html/index" received type-uncompatible value: expected but get null value. Use empty string instead.

这里确实坑，明明content传了值却死活不承认，最后发现是定义content的属性有问题

看官方的回答是：需要修改 content 属性的属性名或使用 setContent 方法设置内容

1、修改content属性
回到node_modules下面的mp-html的src下面的miniprogram/index.js

搜索content，全局替换成别的字段，比如contents
替换完后在控制台打开该目录，首先npm i ，然后npm run build:weixin.
没有gulp的需要先按照gulp
npm install gulp-cli -g
执行完npm run build:weixin后把dist/mp-weixin替换之前的mp-html（重复开始的步骤）

<mp-html class="rich-text" id="mp-html" :tag-style="tagStyle" :contents="richContent" />

2、使用setContent 方法设置content(这种方法我没试，我觉得第一种方法简便一些)
看代码是使用这个方法把内容塞进去，先获取组件实例，再调用该方法

const { page } = Taro.getCurrentInstance()
const mpHtml = page.selectComponent('#mp-html')
mpHtml.setContent(content)