uniapp实现微信小程序富文本之mp-html插件详解

1 文章背景

1.1 正则表达式

正则表达式，又称规则表达式,（Regular Expression，在代码中常简写为regex、regexp或RE），是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为"元字符"），是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串，通常被用来检索、替换那些符合某个模式（规则）的文本。

许多程序设计语言都支持利用正则表达式进行字符串操作。例如，在Perl中就内建了一个功能强大的正则表达式引擎。正则表达式这个概念最初是由Unix中的工具软件（例如sed和grep）普及开来的，后来在广泛运用于Scala 、PHP、C# 、Java、C++ 、Objective-c、Perl 、Swift、VBScript 、Javascript、Ruby 以及Python等等。正则表达式通常缩写成“regex”，单数有regexp、regex，复数有regexps、regexes、regexen。

1.2 mp-html插件

功能介绍

• 支持大部分 html 实体
• 支持锚点跳转、长按复制等丰富功能
• 支持设置占位图（加载中、出错时、预览时）
• 支持丰富的标签（包括 table、video、svg 等）
• 支持在多个主流的小程序平台和 uni-app 中使用
• 支持丰富的事件效果（自动预览图片、链接处理等）
• 丰富的插件（关键词搜索、内容编辑、latex 公式等）
• 效率高、容错性强且轻量化（≈25KB，9KB gzipped）

1.3 uniapp

uni-app（uni，读you ni，是统一的意思） [2]是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序、快应用等多个平台。
产生背景：
DCloud于2012年开始研发小程序技术，优化webview的功能和性能，推出了HBuilder开发工具，为后续产业化做准备。
2015年，DCloud正式商用了自己的小程序，产品名为“流应用”，它不是模式的轻应用，而是能接近原生功能、性能的App，并且即点即用，第一次使用时可以做到边下载边使用。

2 过程详解

2.1 下载mp-html插件

• 插件市场：
  mp-html一个强大的小程序富文本组件

• mp-html 富文本组件
  mp-html 富文本组件【全端支持，支持编辑、latex等扩展】

• mp-html git 地址
  mp-html-GitHub地址

• 直接导入Hbuilder之后就可以了
  当然，插件市场也有对应教程，可按教程操作。
  

2.2 项目中引入mp-html

• 接口数据展示

{
   
    "total": 18,
    "rows": [
        {
   
            "createBy": "超级管理员",
            "createTime": "2024-01-11 15:05:49",
            "updateBy": "超级管理员",
            "updateTime": "2024-01-12 15:42:53",
            "remark": null,
            "productId": 25,
            "summaryId": 206,
            "summaryName": "环保信息化软件研发",
            "productTitle": "【企业】e云管家",
            "productType": "text",
            "productContent": "<p><img src=\"https://sdddeesp.com/prod-api/upload/2024/01/12/54231A025.jpg\"></p>",
            "status": "0",
            "coverPhoto": "/upload/2024/01/12/154226A024.jpg",
            "intro": "免费版污染源在线查看、报警终端！",
            "delFlag": "0"
        },
    }

其中重要的参数：

productType：传递的类型包括：link\text

productContent：文章的内容包括富文本和连接。

• 引入类型

mp-html 引入

<template>
	<view class="content">
	    <view v-if="articleDetail.productType == 'link'"  class="container">
			<!-- 接受的是连接格式 -->
			<web-view :src="articleDetail.productContent"></web-view>
		</view>
		<view v-else  class="are-contnet">
			<!--接受的不是连接格式 -->
			<mp-html :content="strings" selectable="true" show-img-menu="true" />
		</view>
	</view>
</template>