**小程序富文本组件 `mp-html` 技术文档**

小程序富文本组件 mp-html 技术文档

mp-html mp-html是一个微信小程序HTML组件库，适合用于快速搭建微信小程序界面。特点：组件丰富、易于使用、支持自定义样式。 项目地址: https://gitcode.com/gh_mirrors/mp/mp-html

---

一、安装指南

原生小程序平台

1. 通过npm安装

   npm install mp-html
   

   需要确保开发者工具中已启用“使用npm模块”。

2. 源码直接使用

   • 下载源码，并把dist/platform下的对应文件夹移动到你的项目components目录下，重命名为mp-html。
   • 在页面的json文件配置组件路径。

uni-app

• 对于uni-app，你可以直接通过npm或源码集成。
  • 使用npm方式，同样执行npm install mp-html。
  • 若选择源码方式，需将源码中的dist/uni-app内资源拷贝至项目相应位置，通过插件市场亦可获取。

注意： 使用npm方式在uni-app中可能需要特定配置，特别是在使用 cli 或进行 nvue 编译时。

---

二、项目使用说明

示例应用

假设你需要在小程序的一个页面中使用富文本显示：

原生小程序示例

1. 在页面json文件中添加组件引用：

   {
     "usingComponents": {"mp-html": "mp-html"}
   }
   

2. 页面wxml中使用组件：

   <mp-html content="{{htmlContent}}"></mp-html>
   

3. 页面js中初始化数据：

   Page({
     data: {
       htmlContent: '<p>你好，世界！</p>'
     },
     onLoad: function() {}
   });
   

uni-app示例

对于uni-app，不论是Vue文件还是源码方式，只需要将上述的npm引用替换为uni-app对应的路径，并在Vue文件中使用。

高级使用

可以通过配置组件属性来定制显示行为，例如调整图片加载时的占位图，是否开启链接点击复制等。

---

三、项目API使用文档

组件暴露了一系列API方法，允许你动态控制其行为：

• setContent: 更新富文本内容。
• navigateTo: 实现锚点跳转。
• getText: 获取当前展示的文本内容。
• 更多API如pauseMedia, imgList等，详细用法参见官方文档。

---

四、项目安装方式

安装方式已经在一、安装指南中详细描述。确保理解原生小程序与uni-app之间的差异，特别是当涉及npm安装和uni-app的特殊配置时。

---

注意事项：

• 对于版本更新，请定期查阅更新日志，确保兼容性。
• 加入QQ群获得社区支持，解决使用过程中遇到的具体问题。
• 利用提供的API和属性进行高度自定义，满足不同场景需求。

此文档基于Markdown格式撰写，覆盖了安装、使用、API应用以及关键的项目安装指南，旨在帮助开发者快速上手并有效利用mp-html组件。

mp-html mp-html是一个微信小程序HTML组件库，适合用于快速搭建微信小程序界面。特点：组件丰富、易于使用、支持自定义样式。 项目地址: https://gitcode.com/gh_mirrors/mp/mp-html