小程序富文本解析(mp-html组件)_富文本编辑 微信小程序

前言：

微信小程序解析富文本html大概有几种方式，我用过的有这三种rich-text、web-view、wxParse、mp-html，各有各的优缺点，亲测，发现还是mp-html好用点。废话不多说，直接上代码。

下面是理论，可以直接跳过看下使用方法就行

---

一、mp-html是什么？

mp-html富文本组件是一个可以在多个主流小程序平台（如微信、QQ、百度、支付宝、头条和uni-app）和uni-app中使用的小程序组件。

这个组件的主要功能有以下几点：

1. 它能支持富文本的渲染和编辑，这可能包括HTML标签（如table、video、svg等）、事件效果（如自动预览图片、链接处理等）以及锚点跳转、长按复制等功能。
2. 它还支持大部分HTML实体，这使得用户可以在小程序中看到更丰富的内容。
3. 这个组件还有丰富的插件，例如关键词搜索和内容编辑等，这可以大大增强用户的使用体验。
4. mp-html富文本组件的使用效率高、容错性强且轻量化，安装包大小约为24.5KB，gzipped后只有9KB。

更多属性以可以参考官方文档，例如在原生平台上，可以通过npm方式安装组件包，然后在项目目录下构建npm，并在需要使用该组件的页面的json文件中添加相应的配置信息。

---

二、使用方法

1、原生平台

本方法仅适用于微信、QQ 小程序

1.打开编辑器的终端，直接在小程序项目根目录下通过npm安装组件包

npm install mp-html
1

2.在需要使用的页面的json文件中添加

{
  "usingComponents": {
    "mp-html": "mp-html"
  }
}
1
2
3
4
5

3.在页面中使用

<mp-html content="{{html}}"></mp-html>
1

4.在需要使用页面的js文件中添加

Page({
  onLoad() {
    this.setData({
      html: '<div>Hello World!</div>'
    })
  }
})
1
2
3
4
5
6
7

2、源码引入

本方法适用于所有平台

1.将 源码 中对应平台的代码包（dist/platform）拷贝到 components 目录下，更名为 mp-html(获取源码的方式可以查看官方文档)

2.在需要使用页面的 json 文件中添加

{
  "usingComponents": {
    "mp-html": "/components/mp-html/index"
  }
}
1
2
3
4
5

温馨提示： 注意复制代码或者直接引入文件的路径时，记得检查下文件路径是否准确，检查仔细点，不然可能无法生效！记得三连哦，谢谢你们的支持！