企业官网建设流程全解析

• 前端
• 小程序
• UI组件
• 富文本

mp-html 是一款支持在微信、QQ、百度、支付宝、头条小程序以及 uni-app（含 H5、App）等多端渲染富文本的开源组件，其全部渲染行为都通过一组声明式属性控制。本文以 docs/basic/prop.md 为骨架，逐项讲解container-style、content、domain、selectable、use-anchor等 15 个属性的功能、类型、默认值与适用场景，并结合 mp-html.vue、index.js 的属性声明、parser.js 的解析逻辑与 node.vue 的事件处理源码，带你从"会配置"进阶到"懂原理"。读完本文，你将能根据业务需求（长按复制、图片懒加载、锚点跳转、外链处理、表格滚动等）精准选配属性，并理解每个属性在底层解析与渲染链路中的实际作用。

通用提示：需要将某个属性设置为false时，在模板中应写作attr="{{false}}"，而不是直接写attr="false"（字符串会被视为true）。此外，两套实现（原生小程序版与 uni-app 版）对属性类型的声明略有差异：uni-app 版部分属性声明为[Boolean, String]（见 mp-html.vue），原生小程序版则通过type: null放宽校验（见 index.js），因此部分属性支持字符串取值（如selectable="force"、preview-img="all"）。

container-style：容器样式定制

• 功能：设置整个富文本容器的样式
• 类型：String
• 支持版本：2.1.0 起支持

该属性直接作用于组件根节点。在 uni-app 实现中，根节点模板为<view :style="containerStyle">（见 mp-html.vue）；在原生小程序版中，containerStyle同样作为 property 透传（见 index.js）。常用写法示例：

padding: 5px; /* 设置内边距 */ font-size: 18px; /* 设置默认的字体大小 */ overflow: hidden; /* 禁用横向滚动 */ display: inline; /* 行内显示 */ white-space: pre-wrap; /* 保留空格和换行符 */ white-space: pre-line; /* 保留换行符 */

注意：根节点自身带有padding: 1px 0; overflow-x: auto等默认样式（见 mp-html.vue 的._root样式），container-style以行内 style 的形式叠加，可用于覆盖默认的横向滚动与内边距行为。在 App-nvue 平台，该属性会被传入 web-view 内的local.html参与渲染（见 mp-html.vue 的_set方法）。

content：渲染内容入口

• 功能：用于渲染的 html 字符串
• 类型：String

这是组件的核心输入。content属性带有observer/watch监听，一旦变化即触发setContent重新解析渲染（见 index.js 与 mp-html.vue）。在setContent内部，html 字符串会被new Parser(this).parse(content)转换为节点树（见 mp-html.vue），随后交给递归子组件渲染。

值得留意的是，uni-app 版与小程序版都支持通过实例方法setContent(content, append)在运行时动态更新内容，第二个参数为true时可在尾部追加内容而非整体替换（见 index.js）。如果你需要频繁更新富文本，直接修改content属性即可，无需手动调用方法。

copy-link：外链点击行为控制

• 功能：是否允许外部链接被点击时自动复制
• 类型：Boolean
• 默认值：true

当 html 中的a标签href包含://（协议外链）时，点击行为由该属性决定。在 node.vue 的linkTap中可以看到完整逻辑：小程序端调用uni.setClipboardData复制链接并 toast 提示"链接已复制"；H5 端window.open直接打开；App 端plus.runtime.openWeb打开外链。同时无论是否复制，都会先触发linktap事件供业务方拦截。

对于 uni-app 的 H5 和 App 平台，外链本身可以直接跳转，此时该属性为true则直接跳转外链（而不是复制链接），为false则不跳转。

domain：主域名链接拼接

• 功能：主域名（用于链接拼接）
• 类型：String

当 html 中出现相对路径或协议相对路径的资源（图片、视频、背景图等）时，domain用于将其拼接为完整链接，例如假设domain被设置为https://example.com：

<!-- 以下链接均会被拼接为 https://example.com/path --> <img src="//example.com/path" /> <img src="/path" /> <div style="background-image:url('path')"></div>

底层实现见 parser.js 的getUrl方法：//开头的链接补充协议名（domain的协议部分或默认http）；/开头的链接直接拼接整个域名；其余无协议、无data:的相对路径则拼接为domain + '/' + url。

使用限制（务必注意）：

1. 该属性必须填写协议名://域名的完整链接；
2. 暂不支持拼接含有../的相对路径链接；
3. a标签的href属性可能需要跳转到小程序内路径，因此不进行domain拼接；
4. 设置该属性后将无法使用本地图片（本地图片路径会被当成相对路径拼接）。

补充细节：通过base标签也可以设置主域名，但优先级低于此属性——源码中仅在!this.options.domain时才会用base标签的href回填options.domain（见 parser.js）。

error-img 与 loading-img：图片占位图

• error-img 功能：图片出错时的占位图链接
• loading-img 功能：图片加载过程中的占位图链接
• 类型：均为String

两者配合实现图片加载状态管理。在 node.wxml 中可以看到：opts[1]（loading-img）和opts[2]（error-img）被传给image组件——加载中显示 loading 占位图，加载失败（ctrl[i] < 0）则显示 error 占位图；图片加载成功后移除占位图（见 node.vue 的imgLoad）。若设置了lazy-load，占位图还承担了懒加载时的兜底显示。

这两个属性不会进行domain拼接，需传入完整路径（可以使用本地路径）。

lazy-load：图片懒加载

• 功能：是否开启图片懒加载
• 类型：Boolean
• 默认值：false

开启后，图片image组件会带上lazy-load属性（见 node.wxml）。不同平台懒加载的时机不同，具体参考各平台image组件懒加载的时机。该属性还会影响ready事件的触发策略：在 mp-html.vue 的setContent中，开启懒加载后组件会每隔 350ms 轮询容器高度，高度不再变化即认为加载完毕并触发ready事件。

pause-video：视频播放互斥

• 功能：是否在播放一个视频时自动暂停其他视频
• 类型：Boolean
• 默认值：true

在 node.vue 的play事件处理中可以看到：当某个视频开始播放时，组件遍历_videos列表，将除当前视频外的其他视频全部pause()，并把当前视频加入列表。如果需要多个视频同时播放，请将此属性设置为false。

preview-img：图片点击预览

• 功能：是否允许图片被点击时自动预览
• 类型：Boolean
• 默认值：true

开启后，点击图片会调用uni.previewImage预览，current为当前图片索引、urls为全部图片列表（见 node.vue）。自动预览允许左右滑动查看所有图片，如果不希望如此，可以禁用自动预览并在imgtap事件中自行处理（见 docs/basic/event.md）。

默认情况下base64图片无法点击预览，2.5.0 版本起支持将本属性设置为"all"开启base64图片的预览，但需要注意各平台previewImage的 api 对base64图片支持度不高，需充分测试后使用。如果无法预览，可参考imgList中的方法进行转存（见 docs/advanced/api.md）。

scroll-table：表格横向滚动

• 功能：是否给每个表格添加一个滚动层使其能单独横向滚动
• 类型：Boolean
• 默认值：false

开启后，解析器会为table标签包裹独立的滚动容器。在 parser.js 中可以确认其判断条件：仅当表格未设置inline布局（attrs.style不包含inline）时才生效，以免破坏行内布局。如果你页面中有宽表格且希望保持整页纵向滚动流畅，建议开启此属性。

selectable：文本长按复制

• 功能：是否开启文本长按复制
• 类型：Boolean/String
• 默认值：false

该属性是跨平台适配复杂度最高的一个。将值设置为true在微信 iOS 端可能失效，2.0.5 版本起支持将本属性设置为"force"来强制支持，但会带来以下影响：

1. 所有文本块会显示为inline-block（通过text标签的user-select属性实现），需要自行适配；
2. 文字下划线、删除线等效果将失效；
3. 所有文本块都无法被rich-text包含，一定程度上增加标签数，减慢渲染速度。

从 2.3.1 版本起对此问题进行优化（通过rich-text标签的user-select属性实现，基础库 2.24.0 及以上生效），第 3 个问题已解决，第 1、2 个问题部分情况下还会存在。

源码佐证：uni-app 版根节点会根据selectable动态添加_select类并设置user-select: text（见 mp-html.vue、mp-html.vue）；小程序版则将opts[4]透传给rich-text的user-select/selectable属性（见 node.wxml），并针对"force"模式在 iOS 上为文本块单独追加user-select（见 node.wxml）。

set-title：页面标题同步

• 功能：是否将title标签的内容设置到页面标题
• 类型：Boolean
• 默认值：true

在解析 html 时，如果遇到title标签且该属性为true，解析器会将其文本内容同步到页面标题（见 parser.js 的条件分支）。适合渲染文章类内容时自动同步标题。

show-img-menu：长按菜单控制

• 功能：是否允许图片被长按时显示菜单
• 类型：Boolean
• 默认值：true
• 支持版本：2.3.0 起支持控制预览时是否长按显示菜单（仅微信、百度小程序有效）

该属性目前仅微信、百度和 uni-app 的 app 平台有效。源码中通过平台差异化属性实现：微信使用show-menu-by-longpress、百度使用image-menu-prevent（见 node.wxml）；uni-app 端则在previewImage调用时透传showmenu/enablesavephoto/enableShowPhotoDownload（见 node.vue）。单个图片可通过ignore属性豁免该行为。

tag-style：标签默认样式

• 功能：设置标签的默认样式
• 类型：Object
• 示例：

// 格式为 标签名: 样式 { a: 'color:red' // a 标签默认为红色 }

该属性非响应式，需要在设置content属性前设置才能生效，动态修改不能实时生效。其原理是将样式解析到各标签的内联style属性中去：在 parser.js 的parseStyle中，this.tagStyle[node.name]会与标签自带的内联 style 合并解析。因此，如果对特别常用的标签设置默认样式，将大大加大解析结果大小、减慢渲染速度，这种情况下建议通过外部样式引入（见 docs/overview/quickstart.md）——外部样式支持标签名选择器，在样式较长或作用标签数量较大时性能更高，且写法更灵活（可与伪类、class 配合等）。

use-anchor：锚点链接支持

• 功能：是否使用锚点链接
• 类型：Boolean/Number
• 默认值：false

开启后，html 中href="#id"的链接可以跳转到页面对应锚点位置。传入一个数字时表示跳转锚点的偏移量（单位px）。底层实现：解析器在parseStyle中检测到id属性且useAnchor开启时，会调用expose()暴露锚点（见 parser.js）；点击锚点链接时，navigateTo通过createSelectorQuery计算目标位置并调用uni.pageScrollTo（或 scroll-view 滚动）完成跳转（见 mp-html.vue）。

开启该属性会将所有设置了id属性的标签都暴露出来，一定程度上减慢渲染速度，非必要不要开启。

属性速查表

总结：属性选择的实践建议

• 渲染内容：日常使用只需设置content，其余属性按需开启；container-style与tag-style用于外观定制，注意二者分别在"容器级"和"标签级"生效，且tag-style非响应式、需在设置content前传入。
• 图片体验：长列表页面建议组合lazy-load+loading-img+error-img，避免首屏加载过多图片；默认的preview-img已支持多图滑动预览，需要更精细控制时可在imgtap中自行接管。
• 链接与导航：内容含外部资源相对路径时配置domain（注意其"不能含../、不能使用本地图片"的限制）；文章目录跳转开启use-anchor并配合偏移量使用；不希望用户复制外链时将copy-link设为false。
• 交互细节：需要长按复制时优先用selectable="force"并自行适配文本样式影响；多视频页面按需关闭pause-video；宽表格页面开启scroll-table可避免整页横向滚动。

各属性在源码中的声明与消费位置可进一步查看 mp-html.vue、index.js、parser.js 与 node.vue，配合本文理解效果最佳。

• 前端
• 小程序
• UI组件
• 富文本