前言：后台使用 wangEditor富文本编辑器后，前端小程序端使用 mp-html 解析富文本组件时，新增加的音频文件，小程序端无法解析，了解到 mp-html 富文本组件还可以使用audio插件来解决小程序端音频不播放的问题。
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
image.png
打包完成后，会在 mp-html-master 根目录的 dist 文件夹生成组件包，如下图：
image.png
4. 引入和使用
将生成的包放在项目的components 中，如下图：
image.png
到此，就全部完成了，可以测试小程序端的音频是否播放了
image.png
如果有遇到问题，请留言，我们可以一起讨论一起学习。
