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

最新推荐文章于 2025-06-11 09:13:39 发布
最新推荐文章于 2025-06-11 09:13:39 发布
阅读量2.4k 收藏 5
点赞数
CC 4.0 BY-SA版权
文章标签： uni-app 微信小程序 小程序
原文链接：https://blog.csdn.net/CSDN_Admin0/article/details/135594474

 本文介绍了如何在uniapp中利用mp-html插件处理微信小程序的富文本内容，涉及正则表达式的应用、图片自适应处理以及在项目中引入和使用的步骤。

摘要由CSDN通过智能技术生成

uniapp实现微信小程序富文本之mp-html插件
1 文章背景
.1 正则表达式
1.2 mp-html插件
1.3 uniapp
2 过程详解
2.1 下载mp-html插件
2.2 项目中引入mp-html
2.3 引入正则规范图片自适应
2.4 效果展示
3 全部代码1

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之后就可以了
当然，插件市场也有对应教程，可按教程操作。

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

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>

data中重要参数：

data() {
	return {
		strings: '', //用于富文本中间传递的参数
	}
},

method方法：

methods: {
	get_Product(articleTitle){
		// 请求右侧文章列表
		uni.request({
			url: 你的接口url,
			method: "GET",
			success: (article_res) => {
				if(article_res.data.total!=0){
					let artical_data = article_res.data.rows[0];
					this.strings = artical_data.productContent,//这个是必须的，需要将文章内容传递为Strings。
				}
			},
			fail: () => {},
			complete: () => {}
		});
	},
}

通过以上的配置信息，基本可以实现数据的展示，但是还需要一定的优化，有些文本传递的HTML数据，可能有些自带的样式，这就造成数据展示的混乱。

2.3 引入正则规范图片自适应

首先需要在模板里设置一个过滤器

<mp-html :content="strings|formatRichText" selectable="true" show-img-menu="true"/>

过滤器方法：
注意：这个过滤器方法是和onLoad(),和methods方法同级别的。里面用的是一些正则表达式进行筛选。

onLoad: () {},
filters: {
	/**
	 * 处理富文本里的图片宽度自适应
	 * 1.去掉img标签里的style、width、height属性
	 * 2.img标签添加style属性：max-width:100%;height:auto
	 * 3.修改所有style里的width属性为max-width:100%
	 * 4.去掉<br/>标签
	 * @param html
	 * @returns {void|string|*}
	 * 
	 */
	formatRichText(html) { //控制小程序中图片大小
		let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
			match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
			match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
			match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
			return match;
		});
		newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
			match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
				'max-width:100%;');
			return match;
		});
		newContent = newContent.replace(/<br[^>]*\/>/gi, '');
		newContent = newContent.replace(/\<img/gi,
			// '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;" src="https://syqdxs.sdeesp.com');
			'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
		return newContent;
	}
},
methods: {},

上述需要介绍的一点：如果文章中的图片给的路径不是全路径怎么办？比如：

 "productContent": "<p><img src=\"/upload/2024/01/12/A025.jpg\"></p>",

这样会造成mp-html在读取文章图片的时候，由于路径不对，找不到图片，从而不能显示，那该怎么办呢？
这就就要用到正则替换原来的一些内容。

需要用下面的方法对图片相同的地方进行替换

newContent = newContent.replace(/\<img src="/gi,
		'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;" src="https://sdddeesp.com');
	return newContent;
  • 上述正则的意思是
    将文章中所有的<img src=" 替换为：
<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;" src="https://sdddeesp.com

也就是将文中所有的标签的：

<img src=\"https://sdddeesp.com/prod-api/upload/2024/01/12/54231A025.jpg\">

替换为：

<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;" src=\"https://sdddeesp.com/prod-api/upload/2024/01/12/54231A025.jpg\”>

这样图片的路径就变成了全路径，
其他同类型的可是参考这个修改。

2.4 效果展示

在这里插入图片描述

在这里插入图片描述

3 全部代码

<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|formatRichText" selectable="true" show-img-menu="true" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				strings: '', //富文本
			}
		},
		onLoad: function(options) {
			uni.showLoading({
				title: '正在加载',
				mask: false
			});
			let articleTitleId = options.articleTitleId 
			this.get_Product(articleTitleId )
		},
		filters: {
			/**
			 * 处理富文本里的图片宽度自适应
			 * 1.去掉img标签里的style、width、height属性
			 * 2.img标签添加style属性：max-width:100%;height:auto
			 * 3.修改所有style里的width属性为max-width:100%
			 * 4.去掉<br/>标签
			 * @param html
			 * @returns {void|string|*}
			 * 
			 */
			formatRichText(html) { //控制小程序中图片大小
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
				return newContent;
			}
		},
		methods: {
			// 返回上一页
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			get_Product(articleTitleId ){
				// 请求右侧文章列表
				uni.request({
					url: '你的URL连接'+articleTitleId ,
					method: "GET",
					success: (article_res) => {
						if(article_res.data.total!=0){
							let artical_data = article_res.data.rows[0];
							this.articleDetail = artical_data;
							this.strings = artical_data.productContent,
							console.log("articleDetail",this.articleDetail);
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
		}
	}
</script>

<style>
	.content {padding: 10upx 2%;width: 96%;	flex-wrap: wrap;}
	.title {line-height: 2em;font-weight: 700;font-size: 38upx;}
	.art-content {line-height: 2em;}
	.container {
	  width: 100%;
	  height: 100vh;
	}
</style>
  • articleTitleId 上个页面传递的参数

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

coldriversnow
关注
小程序开发工具的选择标准，领域开发参考
小程序开发
06-12 1036
本文旨在为小程序开发者提供一个全面的工具选择指南，涵盖从入门级到企业级的各种开发场景。我们将分析主流小程序开发工具的核心特性、适用场景和优缺点，并针对不同行业领域提供具体的开发参考。核心概念与联系：介绍小程序开发工具的基本构成选择标准详解：系统化的评估维度领域开发参考：不同行业的具体建议工具对比与推荐：主流工具的横向比较未来趋势展望：新兴技术与工具发展方向IDE(集成开发环境)：提供代码编辑、调试、构建等一站式开发工具跨平台框架：一次编写代码可发布到多个小程序平台的解决方案。
小程序教育类应用开发：直播+题库+考试
小程序开发
05-10 998
随着在线教育市场的爆发式增长（2023年市场规模已超5000亿元），轻量化的小程序成为教育机构触达用户的核心载体。本文聚焦教育类小程序的三大核心场景——实时互动直播、个性化题库训练、智能化考试测评，系统讲解技术实现细节，覆盖需求分析、架构设计、代码实现到落地优化的全流程。核心模块技术解析：直播流媒体、智能题库、考试系统的架构设计算法与数学模型：题库推荐算法、考试成绩分析模型实战开发：基于微信小程序的完整项目案例行业应用与工具：主流技术栈与生态资源推荐RTMP。
uni-app使用富文本组件 mp-html
qq_38517231的博客
07-26 4013
uni-app使用富文本组件 mp-html
【mp-html】小程序富文本组件（页面内嵌html）
热门推荐
m0_71621983的博客
09-18 1万+
显示动态html富文本是很多应用必要的需求，小程序平台不支持dom操作使得这成为一个难题，其自带的rich-text组件支持的标签少且屏蔽所有事件，难以实际应用。因此就有了这样一个能够便捷的在小程序平台上处理富文本的组件，还支持丰富的扩展功能。提示：以下是mp-html正文内容，下面案例可供参考。
mp-html 富文本组件快速入门指南
最新发布
gitblog_00064的博客
06-11 576
mp-html 富文本组件快速入门指南 一、组件简介 mp-html 是一款功能强大的小程序富文本解析组件，支持跨平台使用，能够高效解析和渲染 HTML 内容。本文将详细介绍如何快速开始使用 mp-html 组件。 二、获取组件 1. npm 安装（推荐） # 使用 npm npm install mp-html # 使用 yarn yarn add mp-html 升级组件版本： # npm...
uniapp 微信小程序 editor 富文本编辑器
zjqjy0911的博客
01-17 1357
editor.css 文件，创建文件夹，放入css , 引入使用。editor-icon.css 文件。
uniapp使用微信小程序原生插件
weixin_42040328的博客
04-16 2424
页面的index.json中含有以下代码。
Uniapp开发微信小程序插件的一些心得
zyoungw
02-28 2038
使用uniapp开发微信小程序插件的一些心得
uniapp引入小程序原生插件
dan_seek的博客
09-14 5660
怎么在uniapp中使用微信小程序原生插件，以收钱吧支付插件为例。
uniapp学习总结
weixin_67850938的博客
06-15 1112
uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。uni-app组成和跨端原理uni-app能实现一套代码、多端运行，核心是通过编译器 + 运行时编译器：将uni-app统一代码编译生成每个平台支持的特有代码；如在小程序平台，编译器将.vue文件拆分生成wxmlwxssjs等代码。
uniapp适用移动端的富文本组件
08-10
uni-app 适用移动端的富文本组件
前端知识宝典
qq_37759901的博客
01-29 1685
搜索框输入，文本剪辑器实时保存代码实现思路如下：（利用定时器，每次触发先清掉以前的定时器，从新开始）
Uniapp微信小程序使用插件跳转外部小程序（无需用户同意）
zzzzzzzi111的博客
12-12 938
Uniapp微信小程序使用插件跳转外部小程序（无需用户同意）
uni-app使用微信小程序的插件
cxsj999的博客
04-09 462
附上官方文档地址使用微信小程序插件大家有不懂的也可以加我下方联系方式咨询。
uniapp使用微信小程序提供的原生插件（组件）
qq_40591925的博客
10-17 6816
uniapp使用微信小程序提供的原生插件（组件）
uniapp使用原生小程序插件
请叫我欧皇！的博客
10-20 5766
在微信公众平台，点击左下角设置==》插件管理==》添加插件==》输入插件名字==》点击确定提交申请==》申请通过后可以使用该插件。hello-plugin是在源码视图的自定义名，index-one是需要跳转到插件的哪个页面()，plugin://固定写法，别动。1、在uniapp项目的manifest.json文件中，拉到最下面，找到源码试图，在源码视图中的mp-weixin中配置。2、在需要跳转到插件页面可以使用navigateTo进行跳转到小程序插件,1、在使用插件之前，先登录。
uniapp小程序富文本编辑器 简单不需要下载插件 复制代码直接复用
weixin_43204464的博客
09-14 1035
uniapp富文本编辑器，不需要下载任何插件，实测复制代码就可以实现
mp-html
03-20
<think>好的，用户想了解mp-html的使用方法和相关文档。首先，我需要回顾用户提供的引用内容，确保信息的准确性。根据引用[3]，在页面的JSON文件中添加组件引用是关键的第一步。然后，用户可能需要在WXML中使用组件，并绑定HTML内容。引用[4]提到支持多种标签和插件，比如LaTeX公式，这可能涉及额外的配置。 接下来，用户可能需要知道如何自定义样式或处理事件，比如图片预览。引用[2]和[4]都提到了这些功能，需要详细说明。此外，安装方式方面，引用[1]提到使用yarn安装，但用户可能也想知道npm的安装命令，所以应该同时提供两种方式。 用户的问题可能还涉及常见问题，比如如何限制内容样式或处理长内容，这些需要根据文档经验给出建议。最后，确保所有步骤都结构清晰，分点说明，并正确引用来源。同时，生成的相关问题要覆盖安装、配置、功能扩展和常见问题，帮助用户全面了解mp-html的使用。</think>### mp-html使用方法说明 #### 一、基础配置 1. **安装组件** 使用包管理器安装（如yarn或npm）： ```bash yarn add mp-html # 引用[1] # 或 npm install mp-html ``` 2. **引入组件** 在需要使用的页面/组件的`json`配置文件中添加组件声明： ```json { "usingComponents": { "mp-html": "mp-html" // 引用[3] } } ``` #### 二、基本使用 1. **WXML中调用组件** 在页面中绑定HTML内容： ```html <mp-html content="{{htmlContent}}" /> ``` 2. **数据绑定示例** 在页面/组件的JS文件中定义数据： ```javascript Page({ data: { htmlContent: '<div>Hello <b>mp-html</b></div>' } }) ``` #### 三、进阶功能 1. **支持扩展标签** - 支持解析`table`、`video`、`svg`等复杂标签（引用[4]） - 启用LaTeX公式需引入插件： ```html <mp-html content="{{content}}" plugins="{{['latex']}}" /> ``` 2. **事件处理** - 图片预览：自动支持点击图片预览（引用[4]） - 链接跳转：可通过`@linktap`事件自定义处理逻辑 3. **自定义样式** - 通过CSS类名覆盖默认样式： ```css .mp-html .p { font-size: 16px; color: #333; } ``` #### 四、文档资源 - **官方文档**：[mp-html技术文档](https://gitcode.com/gh_mirrors/mp/mp-html)（引用[2][4]） - **功能特性**： - 富文本渲染（含复杂标签解析） - 多插件扩展（关键词搜索、内容编辑等） - 跨平台兼容（微信小程序、H5等）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值