uniapp mp-html富文本解析插件

github: https://github.com/jin-yufeng/mp-html

mp-html 是一个用于在小程序中解析 HTML 片段的插件。通过这个插件，你可以在小程序中渲染复杂的 HTML 内容，并且支持多种标签和属性。

支持在多个主流的小程序平台和 uni-app 中使用

在uniapp上使用

uni_modules 方式

插件市场：https://ext.dcloud.net.cn/plugin?id=805

1、安装插件

点击右上角的 使用 HBuilder X 导入插件 按钮直接导入项目或点击 下载插件 ZIP 按钮下载插件包并解压到项目的 uni_modules/mp-html 目录下

2、使用插件

在需要使用页面的 (n)vue 文件中添加

<!– 不需要引入，可直接使用 –>
<mp-html :content=”html” />

export default {
data() {
return {
html: ‘<div>Hello World!</div>’
}
}
}

3、更新

需要更新版本时在 HBuilder X 中右键 uni_modules/mp-html 目录选择 从插件市场更新 即可

从插件市场导入的包中 不含有 扩展插件

源码方式

1、安装插件

将源码中 dist/uni-app 内的内容拷贝到项目根目录下，或者直接通过 插件市场 引入

2、使用插件

在需要使用页面的 (n)vue 文件中添加

<!– 不需要引入，可直接使用 –>
<mp-html :content=”html” />

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

3、更新

插件市场的 非 uni_modules 版本 无法更新，不建议从插件市场获取

npm方式

1、在项目根目录下执行
npm install mp-html

2、使用插件

在需要使用页面的 (n)vue 文件中添加

<!– 不需要引入，可直接使用 –>
<mp-html :content=”html” />

import mpHtml from ‘@/components/mp-html/mp-html’
export default {
// 不可省略
components: {
mpHtml
},
data() {
return {
html: ‘<div>Hello World!</div>’
}
}
}

3、更新
npm update mp-html