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

这篇具有很好参考价值的文章主要介绍了【mp-html】小程序富文本组件(页面内嵌html)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

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


提示:以下是mp-html正文内容,下面案例可供参考

一、mp-html是什么?

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

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

  1. 它能支持富文本的渲染和编辑,这可能包括HTML标签(如tablevideosvg等)、事件效果(如自动预览图片链接处理等)以及锚点跳转长按复制等功能。
  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. 在页面中使用
<mp-html content="{{html}}">加载中...</mp-html>
  1. 在需要使用页面的 js 文件中添加
Page({
  onLoad() {
    this.setData({
      html: '<div>Hello World!</div>'
    })
  }
})

2.源码引入

本方法适用于所有平台

  1. 源码 中对应平台的代码包(dist/platform)拷贝到 components 目录下,更名为 mp-html(获取源码的方式可以查看官方文档)
  2. 在需要使用页面的 json 文件中添加
{
  "usingComponents": {
    "mp-html": "/components/mp-html/index"
  }
}

支持的 属性 和 事件 见对应文档

2.uniapp平台

1.uni-modules 方式

本方法需要使用 3.1.0+ 版本的 HBuilder X 开发

  1. 进入 插件市场,点击右上角的 使用 HBuilder X 导入插件 按钮导入项目或点击 下载插件ZIP 按钮下载插件包并解压到项目的uni_modules/mp-html 目录下
  2. 在需要使用页面的 (n)vue 文件中添加
<template>
  <view>
    <!-- 不需要引入,可直接使用 -->
    <mp-html :content="html" />
  </view>
</template>
<script>
  export default {
    data () {
      return {
        html: '<div>Hello World!</div>'
      }
    }
  }
</script>
  1. 需要更新版本时在 HBuilder X 中右键 uni_modules/mp-html 目录选择 从插件市场更新 即可

2.源码方式

  1. 将 源码 中 dist/uni-app 内的内容拷贝到 项目根目录
  2. 在需要使用页面的 (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>

3.npm 方式

  1. 在项目根目录下通过 npm 安装组件包
  2. 在需要使用页面的 (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>

使用 cli 方式运行的项目,通过 npm 方式引入时,需要在 vue.config.js 中配置 transpileDependencies,详情可见 #330

如果在 nvue 中使用还要将 dist/uni-app/static 目录下的内容拷贝到项目的 static 目录下,否则无法运行

更多方式可查看官方文档


三、应用示例

1,直接在uniapp插件市场下载并导入HBuilderX
小程序加载富文本,uniapp,html,小程序,前端,uniapp

2,在uniapp中创建一个页面,使用mp-html

<template>
	<view class="head-txt3-content">
		<mp-html :content="html" container-style="height: 100%;" 			:tag-style="tagStyle">加载中...
		</mp-html>
	</view>
</template>

3,在js中引入一个.vue文件,并在组件中声明

import mpHtml from '@/uni_modules/mp-html/components/mp-html/mp-html.vue'
components: {
	mpHtml
},

4,定义一个data对应mp-html引用的数据,以及一个远程的html文件的路径,mp-html内容的样式可以定义在tagStyle中

data() {
	return {
		html: '',
		htmlUrl: 'https:baidu/**.html', /*这里是编的*/
		tagStyle: {
			overflow: 'hidden;', /* 禁用横向滚动 */
			p: 'font-size: 16px;color:#1F2329: line-heiaht: 1.4; padding:0; margin-block-start: 1.2em; margin-block-end: 1.2em;'
				},
	}
}

5,定义一个方法使用uniapp的函数(这个函数是用来从指定的URL加载HTML代码),在页面创建时加载html的数据并渲染到页面中文章来源地址https://www.toymoban.com/news/detail-754760.html

loadExternalHtml() {
	uni.request({
		url: this.htmlUrl, // 外部HTML页面的URL
		success: (res) => {
			this.html = res.data;
		},
		fail: (err) => {
			console.error(err);
		},
	});
},
mounted() {
	this.loadExternalHtml();
},

到了这里,关于【mp-html】小程序富文本组件(页面内嵌html)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

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

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

    2024年01月24日
    浏览(35)
  • 微信小程序富文本解析 rich-text 、wxParse、mp-html

    rich-text 微信自带标签 很多局限性 还有后台的富文本 font 标签 size 不生效。字体大小无法设置 wxParse 微信很早的那期 副本插件 封装。拥有7.7k stars已停止维护了的库 缺点 1、在解析富文本过程中,多次调用小程序的setData()方法,对性能有一定影响 2、可以解析audio,但是不能保

    2024年02月15日
    浏览(54)
  • uniapp小程序开发-富文本编辑器mp-html,juice外部样式转内联样式

    在开发一款公司的小程序过程中,有一个需求:web端后端可以上传word文档,后端转为html字符串;小程序接收显示,并且可以在小程序进行编辑修改。 其实在日常小程序中很少见到富文本编辑器的使用,所以这次使用的过程中也尝试了多种,但是最好用的还是mp-html 这款插件

    2024年02月09日
    浏览(45)
  • 微信小程序使用mp-html遇到的问题并解决

    1、在本地配置寻找勾选使用npm 查了之后发现2023了 不需要勾选了 默认使用npm 2、在微信小程序编辑器左上角的 工具--构建npm 然后就报错了 于是搜索到以下的内容: 没有找到可以构建的NPM包,请确认需要参与构建的npm都在 `miniprogramRoot` 目录内 --- 微信小程序报错 https://blog.

    2024年02月07日
    浏览(43)
  • 微信小程序使用第三方组件wxParse加载富文本html

    微信小程序 微信小程序加载富文本html 微信小程序富文本第三方组件wxParse wxParse 富文本html wxParse 是一个微信小程序富文本解析组件,支持支持Html及markdown转wxml。 wxParse gitHub地址:https://github.com/icindy/wxParse 目前项目已停止维护了,原因未知。 按照gitHub上的指,下载demo之后,

    2024年02月12日
    浏览(55)
  • 微信小程序加载html标签(解析html标签、wxParse加载富文本html)

     博主介绍: 本人专注于Android/java/数据库/微信小程序技术领域的开发,以及有好几年的计算机毕业设计方面的实战开发经验和技术积累;尤其是在安卓(Android)的app的开发和微信小程序的开发,很是熟悉和了解;本人也是多年的Android开发人员;希望我发布的此篇文件可以帮

    2024年02月04日
    浏览(46)
  • vue实现弹出框内嵌页面展示,添加tab切换展示实时加载

    最近做业务的时候,发现产品的原型图上有一个弹出框,上面包含了两个窗口要进行切换。 每个窗口都有分页列表展示、搜索、添加和删除,感觉就是两个完整的页面,如果全写在一个页面会很麻烦,还可能会出现一系列的问题,后期改起来比较麻烦,所以我就准备分开来写

    2024年02月16日
    浏览(36)
  • 小程序内嵌H5页面监听小程序的返回事件

    因为业务上有需求,在开发小程序的时候有些页面要使用web-view组件嵌套H5页面 有个页面内有个表单,在表单内容还为填写完成的时候,监听用户点击左上角返回事件,弹出一个提示框,因为H5页面在小程序中的层级很高,所以弹出提示框只能在H5页面内完成,因此要在H5页面

    2024年02月11日
    浏览(45)
  • 微信小程序内嵌H5页面实现微信支付

    背景: 在微信H5页面已经实现了微信JSAPI的网页支付,老板要求把整个业务线快速转移到微信小程序中,作为懒惰的程序员来说,直接把页面嵌套到小程序不就行了。说干就干,在小程序中设置好基本信息后,一预览居然成功了,一切看来是那么顺利,可到了系统的支付环节

    2024年02月11日
    浏览(55)
  • 微信小程序内嵌H5页面获取openid+分享功能

    主要实现功能:1.通过webview实现小程序内嵌H5页面                          2.在H5页面获取到用户的openid                          3.在H5页面实现分享获取到分享人的openid和被分享者的openid 代码实现: 1.通过webview实现小程序内嵌H5页面 传参:在地址后面加入的参数就是我

    2024年04月23日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包