1、mp-html简介
小程序自带的rich-text 组件支持的标签少且屏蔽所有事件，难以实际应用。mp-html组件能够便捷的在小程序平台上处理富文本的组件，还支持丰富的扩展功能。
- 特性
支持在多个主流的小程序平台和 uni-app 中使用
支持丰富的标签（包括 table、video、svg 等）
支持丰富的事件效果（自动预览图片、链接处理等）
支持设置占位图（加载中、出错时、预览时）
支持锚点跳转、长按复制等丰富功能
支持大部分 html 实体
丰富的插件（关键词搜索、内容编辑、latex 公式 等）
效率高、容错性强且轻量化（≈25KB，9KB gzipped）
2、安装方式
通过 npm 获取
npm install mp-html
或通过 yarn 获取
yarn add mp-html
git 方式
通过 github 获取
git clone https://github.com/jin-yufeng/mp-html.git
或通过 gitee 获取
git clone https://gitee.com/jin-yufeng/mp-html.git
下载 zip
github releases：https://github.com/jin-yufeng/mp-html/releases gitee releases：https://gitee.com/jin-yufeng/mp-html/releases
3、引入
- npm 方式（本方法仅适用于微信、QQ 小程序）
在小程序项目根目录下通过 npm 安装组件包
开发者工具中勾选 使用 npm 模块（若没有此选项则不需要）并点击 工具 - 构建 npm
在需要使用页面的 json 文件中添加
{ "usingComponents": { "mp-html": "mp-html" } }
- 源码引入（本方法适用于所有平台）
将 源码 中对应平台的代码包（dist/platform）拷贝到 components 目录下，更名为 mp-html
在需要使用页面的 json 文件中添加
{ "usingComponents": { "mp-html": "/components/mp-html/index" } }
4、使用
在需要使用页面的 wxml 文件中添加
<mp-html content="{{html}}" />
在需要使用页面的 js 文件中添加
Page({ onLoad () { this.setData({ html: '<div>Hello World!</div>' }) } })
5、uni-modules 方式
（uni-app 框架，本方法需要使用 3.1.0+ 版本的 HBuilder X 开发）
进入 插件市场，点击右上角的 使用 HBuilder X 导入插件 按钮导入项目或点击 下载插件ZIP 按钮下载插件包并解压到项目的 uni_modules/mp-html 目录下
在需要使用页面的 (n)vue 文件中添加
<template> <view> <!-- 不需要引入，可直接使用 --> <mp-html :content="html" /> </view> </template> <script> export default { data () { return { html: '<div>Hello World!</div>' } } } </script>
需要更新版本时在 HBuilder X 中右键 uni_modules/mp-html 目录选择 从插件市场更新 即可
源码方式
将 源码 中 dist/uni-app 内的内容拷贝到 项目根目录 下
插件市场 的 非 uni_modules 版本无法更新，请从其他方式获取 源码
在需要使用页面的 (n)vue 文件中添加
<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>
6、npm 方式
在项目根目录下通过 npm 安装组件包
在需要使用页面的 (n)vue 文件中添加
<template> <view> <mp-html :content="html" /> </view> </template> <script> import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html' export default { // 不可省略 components: { mpHtml }, data () { return { html: '<div>Hello World!</div>' } } } </script>
7、运行
安装依赖
npm install
- 生成微信示例项目到 dev/mp-weixin
npm run dev:weixin
- 生成 qq 示例项目到 dev/mp-qq
npm run dev:qq
- 生成百度示例项目到 dev/mp-baidu
npm run dev:baidu
- 生成支付宝示例项目到 dev/mp-alipay
npm run dev:alipay
- 生成头条示例项目到 dev/mp-toutiao
npm run dev:toutiao
- 生成 uni-app 示例项目到 dev/uni-app
npm run dev:uni-app
