前言
显示动态 html
富文本是很多应用必要的需求,小程序平台不支持 dom
操作使得这成为一个难题,其自带的 rich-text
组件支持的标签少且屏蔽所有事件,难以实际应用。因此就有了这样一个能够便捷的在小程序平台上处理富文本的组件,还支持丰富的扩展功能。
一、mp–html是什么?
mp-html
富文本组件是一个可以在多个主流小程序平台(如微信、QQ、百度、支付宝、头条和uni–app)和uni–app中使用的小程序组件。
这个组件的主要功能有以下几点:
- 它能支持富文本的渲染和编辑,这可能包括HTML标签(如
table
、video
、svg
等)、事件效果(如自动预览图片
、链接处理等
)以及锚点跳转
、长按复制
等功能。 - 它还支持大部分HTML实体,这使得用户可以在小程序中看到更丰富的内容。
- 这个组件还有丰富的插件,例如
关键词搜索
和内容编辑
等,这可以大大增强用户的使用体验。 mp-html
富文本组件的使用效率高、容错性强且轻量化,安装包大小约为24.5KB,gzipped后只有9KB。
更多属性以可以参考官方文档,例如在原生平台上,可以通过npm方式安装组件包,然后在项目目录下构建npm,并在需要使用该组件的页面的json文件中添加相应的配置信息。
二、使用方法
1.原生平台
1.npm 方式:
npm install mp-html
使用 npm 模块
工具 - 构建 npm
{
"usingComponents": {
"mp-html": "mp-html"
}
}
- 在页面中使用
<mp-html content="{{html}}">加载中...</mp-html>
Page({
onLoad() {
this.setData({
html: '<div>Hello World!</div>'
})
}
})
2.源码引入
{
"usingComponents": {
"mp-html": "/components/mp-html/index"
}
}
2.uniapp平台
1.uni–modules 方式
- 进入 插件市场,点击右上角的 使用
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>
2.源码方式
<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 方式
<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 目录下,否则无法运行
三、应用示例
<template>
<view class="head-txt3-content">
<mp-html :content="html" container-style="height: 100%;" :tag-style="tagStyle">加载中...
</mp-html>
</view>
</template>
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进行投诉反馈,一经查实,立即删除!