mp-html，解决小程序端audio音频不播放问题

前言：后台使用 wangEditor富文本编辑器后，前端小程序端使用 mp-html 解析富文本组件时，新增加的音频文件，小程序端无法解析，了解到 mp-html 富文本组件还可以使用audio插件来解决小程序端音频不播放的问题。

mp-html官网

image.png

常规用法：（不需要使用插件的用法）

安装：

# 通过 npm 获取
npm install mp-html
# 或通过 yarn 获取
yarn add mp-html

如果使用的是 uni-app 框架:

<template>
  <view>
    <mp-html :content="html" />
  </view>
</template>
<script>
  import mpHtml from '@/components/mp-html/mp-html'
  export default {
    // HBuilderX 2.5.5+ 可以通过 easycom 自动引入
    components: {
      mpHtml
    },
    data () {
      return {
        html: '<div>Hello World!</div>'
      }
    }
  }
</script>

就可以使用啦

进阶使用（添加插件）

image.png

1. 下载mp-html源码包

github releases：https://github.com/jin-yufeng/mp-html
gitee releases：https://gitee.com/jin-yufeng/mp-html

2. 确定要使用的插件，将其名称填入 tools/config.js 中的 plugins 中

例如：我需要使用的是audio，就打开audio的注释

image.png

3. 生成组件包

在 mp-html-master 中安装依赖

# 通过 npm 安装
npm install
# 或通过 yarn 安装
yarn

生成代码包到 dist 文件夹

# 生成微信包到 dist/mp-weixin
npm run build:weixin
# 生成 qq 包到 dist/mp-qq
npm run build:qq
# 生成百度包到 dist/mp-baidu
npm run build:baidu
# 生成支付宝包到 dist/mp-alipay
npm run build:alipay
# 生成头条包到 dist/mp-toutiao
npm run build:toutiao
# 生成 uni-app 包到 dist/uni-app
npm run build:uni-app
# 生成所有包
npm run build

因为我使用的是 uni-app 框架，所以用npm run build:uni-app