本文介绍: 显示动态html文本是很多应用必要的需求小程序平台支持dom操作使得这成为一个难题,其自带richtext组件支持标签少且屏蔽所有事件,难以实际应用。因此就有了这样一个能够便捷的在小程序平台处理文本组件,还支持丰富的扩展功能提示:以下是mphtml正文内容,下面案例可供参考


前言

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


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

一、mphtml什么

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

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

  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: '&lt;div&gt;Hello World!</div&gt;'
    })
  }
})

2.源码引入

方法用于所有平台

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

支持属性事件对应文档

2.uniapp平台

1.unimodules 方式

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

  1. 进入 插件市场,点击右上角的 使用 HBuilder X 导入插件 按钮导入项目或点击 下载插件ZIP 按钮下载插件包并解压项目uni_modules/mp-html 目录
  2. 在需要使用页面的 (n)vue 文件中添加
<template&gt;
  <view&gt;
    <!-- 不需要引入,可直接使用 --&gt;
    <mp-html :content="html" /&gt;
  </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
在这里插入图片描述

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的数据渲染到页面中

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

原文地址:https://blog.csdn.net/m0_71621983/article/details/132988680

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_26320.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注