一个强大的小程序富文本组件mp-html

电玩女神 2023-09-26 21:14 102阅读 0赞

![在这里插入图片描述][a895ab1378254e75888db799ca35f2d6.png]  
![在这里插入图片描述][4a007fc17c004d8a928785699c6aac12.png]  
![在这里插入图片描述][093c13b040ce4e22b6000d4dc265902d.png]  
![在这里插入图片描述][7f5fd44db3f9460fa442d399616ab135.png]

#### 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

[a895ab1378254e75888db799ca35f2d6.png]: https://img-blog.csdnimg.cn/a895ab1378254e75888db799ca35f2d6.png
[4a007fc17c004d8a928785699c6aac12.png]: https://img-blog.csdnimg.cn/4a007fc17c004d8a928785699c6aac12.png
[093c13b040ce4e22b6000d4dc265902d.png]: https://img-blog.csdnimg.cn/093c13b040ce4e22b6000d4dc265902d.png
[7f5fd44db3f9460fa442d399616ab135.png]: https://img-blog.csdnimg.cn/7f5fd44db3f9460fa442d399616ab135.png