【mp-html】小步调富文本组件（页面内嵌html）

---

媒介

显示动态 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 安装组件包
  

1. npm install mp-html

复制代码

• 在开辟者工具中勾选使用 npm 模块
  （若没有此选项则不必要）
  

1. 使用 npm 模块

复制代码

• 点击构建npm模块
  

1. 工具 - 构建 npm

复制代码

• 在必要利用的页面的 json 文件中添加
  

1. {
2.   "usingComponents": {
3.     "mp-html": "mp-html"
4.   }
5. }

复制代码

• 在页面中利用
  

1. <mp-html content="{{html}}">加载中...</mp-html>

复制代码

• 在必要利用页面的 js 文件中添加
  

1. Page({
2.   onLoad() {
3.     this.setData({
4.       html: '<div>Hello World!</div>'
5.     })
6.   }
7. })

复制代码

2.源码引入

   本方法实用于全部平台
  

• 将 源码 中对应平台的代码包（dist/platform）拷贝到 components 目录下，更名为 mp-html(获取源码的方式可以检察官方文档)
  
• 在必要利用页面的 json 文件中添加
  

1. {
2.   "usingComponents": {
3.     "mp-html": "/components/mp-html/index"
4.   }
5. }

复制代码

支持的 属性 和 变乱 见对应文档
2.uniapp平台

1.uni-modules 方式

   本方法必要利用 3.1.0+ 版本的 HBuilder X 开辟
  

• 进入 插件市场，点击右上角的 利用 HBuilder X 导入插件 按钮导入项目或点击 下载插件ZIP 按钮下载插件包并解压到项目的uni_modules/mp-html 目录下
  
• 在必要利用页面的 (n)vue 文件中添加
  

1. <template>
2.   <view>
3.     <!-- 不需要引入，可直接使用 -->
4.     <mp-html :content="html" />
5.   </view>
6. </template>
7. <script>
8.   export default {
9.     data () {
10.       return {
11.         html: '<div>Hello World!</div>'
12.       }
13.     }
14.   }
15. </script>

复制代码

• 必要更新版本时在 HBuilder X 中右键 uni_modules/mp-html 目录选择 从插件市场更新 即可
  

2.源码方式

• 将 源码 中 dist/uni-app 内的内容拷贝到 项目根目录 下
  
• 在必要利用页面的 (n)vue 文件中添加
  

1. <template>
2.   <view>
3.     <mp-html :content="html" />
4.   </view>
5. </template>
6. <script>
7.   import mpHtml from '@/components/mp-html/mp-html'
8.   export default {
9.     // HBuilderX 2.5.5+ 可以通过 easycom 自动引入
10.     components: {
11.       mpHtml
12.     },
13.     data () {
14.       return {
15.         html: '<div>Hello World!</div>'
16.       }
17.     }
18.   }
19. </script>

复制代码

3.npm 方式

• 在项目根目录下通过 npm 安装组件包
  
• 在必要利用页面的 (n)vue 文件中添加
  

1. <template>
2.   <view>
3.     <mp-html :content="html" />
4.   </view>
5. </template>
6. <script>
7.   import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
8.   export default {
9.     // 不可省略
10.     components: {
11.       mpHtml
12.     },
13.     data () {
14.       return {
15.         html: '<div>Hello World!</div>'
16.       }
17.     }
18.   }
19. </script>

复制代码

  利用 cli 方式运行的项目，通过 npm 方式引入时，必要在 vue.config.js 中设置 transpileDependencies，详情可见 #330
    如果在 nvue 中利用还要将 dist/uni-app/static 目录下的内容拷贝到项目的 static 目录下，否则无法运行
    更多方式可检察官方文档
  

---

三、应用示例

1，直接在uniapp插件市场下载并导入HBuilderX

2，在uniapp中创建一个页面，利用mp-html

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

复制代码

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

1. import mpHtml from '@/uni_modules/mp-html/components/mp-html/mp-html.vue'

复制代码

1. components: {
2.         mpHtml
3. },

复制代码

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

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

复制代码

5，定义一个方法利用uniapp的函数（这个函数是用来从指定的URL加载HTML代码），在页面创建时加载html的数据并渲染到页面中

1. loadExternalHtml() {
2.         uni.request({
3.                 url: this.htmlUrl, // 外部HTML页面的URL
4.                 success: (res) => {
5.                         this.html = res.data;
6.                 },
7.                 fail: (err) => {
8.                         console.error(err);
9.                 },
10.         });
11. },

复制代码

1. mounted() {
2.         this.loadExternalHtml();
3. },

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。