阅读量:0
文章目录
前言
显示动态 html 富文本是很多应用必要的需求，小程序平台不支持 dom 操作使得这成为一个难题，其自带的 rich-text 组件支持的标签少且屏蔽所有事件，难以实际应用。因此就有了这样一个能够便捷的在小程序平台上处理富文本的组件，还支持丰富的扩展功能。
提示：以下是mp-html正文内容，下面案例可供参考
一、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 方式：
本方法仅适用于微信、QQ 小程序
- 在小程序项目根目录下通过 npm 安装组件包
npm install mp-html - 在开发者工具中勾选使用 npm 模块（若没有此选项则不需要）
使用 npm 模块 - 点击构建npm模块
工具 - 构建 npm - 在需要使用的页面的 json 文件中添加
{ "usingComponents": { "mp-html": "mp-html" } } - 在页面中使用
<mp-html content="{{html}}">加载中...</mp-html> - 在需要使用页面的 js 文件中添加
Page({ onLoad() { this.setData({ html: '<div>Hello World!</div>' }) } }) 2.源码引入
本方法适用于所有平台
- 将
源码中对应平台的代码包（dist/platform）拷贝到components目录下，更名为mp-html(获取源码的方式可以查看官方文档) - 在需要使用页面的
json文件中添加
{ "usingComponents": { "mp-html": "/components/mp-html/index" } } 2.uniapp平台
1.uni-modules 方式
本方法需要使用 3.1.0+ 版本的 HBuilder X 开发
- 进入 插件市场，点击右上角的 使用
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> - 需要更新版本时在
HBuilder X中右键uni_modules/mp-html目录选择从插件市场更新即可
2.源码方式
- 将 源码 中
dist/uni-app内的内容拷贝到项目根目录下 - 在需要使用页面的 (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 方式
- 在项目根目录下通过
npm安装组件包 - 在需要使用页面的
(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(); }, 