【mp-html】小程序富文本组件（页面内嵌html）

文章目录

• 前言
• 一、mp-html是什么？
• 二、使用方法
• • 1.原生平台
  • • 1.npm 方式：
    • 2.源码引入
    • 2.uniapp平台
    • • 1.uni-modules 方式
      • 2.源码方式
      • 3.npm 方式
      • 三、应用示例

        ---

        前言

        显示动态 html 富文本是很多应用必要的需求，小程序平台不支持 dom 操作使得这成为一个难题，其自带的 rich-text 组件支持的标签少且屏蔽所有事件，难以实际应用。因此就有了这样一个能够便捷的在小程序平台上处理富文本的组件，还支持丰富的扩展功能。

        ---

        提示：以下是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.原生平台

        1.npm 方式：

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

        1. 在小程序项目根目录下通过 npm 安装组件包

        npm install mp-html
        

        1. 在开发者工具中勾选使用 npm 模块（若没有此选项则不需要）

        使用 npm 模块
        

        1. 点击构建npm模块

        工具 - 构建 npm
        

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

        {
          "usingComponents": {
            "mp-html": "mp-html"
          }
        }
        

        1. 在页面中使用