uni-app展示自定义HTML，这个地方尤其需要注意...

大风写全栈

发布于 2025-01-11 15:49:39

21600

代码可运行

文章被收录于专栏：锤子代码锤子代码

运行总次数：0

代码可运行

很常见的需求

有时候移动端会有这样一个需求，需要在网页中嵌入显示一段HTML（危险操作！容易被攻击，只显示信任的HTML）。

刚好遇到，就在uni-app中实现一下。

在uni-app中，显示HTML有两个选择。

rich-text（官方自带，无需安装）（1）；
uvui的Parse（第三方，需单独安装）（2）。

两者特点是都能解析HTML字符串。

不同点在于rich-text适合轻量、简单的字符串，Parse与之相反，适合复杂的字符串。

因为我用到的比较简单，于是就选用rich-text展示就足够了。

下面给个🌰。

展示HTML

<view>
   <rich-text class="activity-detail-html" :nodes="htmlContent"></rich-text>
</view>

html的示例内容大概如下：

htmlContent: `
        <div>
          <h1>标题</h1>
          <p>段落。</p>
          <img src="https://example.com/image.jpg" alt="示例图片">
          <ul>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
          </ul>
          <div>另一个 div 元素。</div>
        </div>
      `

一切大功告成？并没有。

如果图片很大，会超出可视区域。

怎么办？

用CSS处理，设置一下最大宽度，搞定！

.activity-detail-html * {
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

上面*包含了所有元素，也可以单独写。

单独写如下：

.activity-detail-html img,
.activity-detail-html p,
.activity-detail-html div,
.activity-detail-html h1,
.activity-detail-html h2,
.activity-detail-html h3,
.activity-detail-html h4,
.activity-detail-html h5,
.activity-detail-html h6,
.activity-detail-html ul,
.activity-detail-html ol,
.activity-detail-html li,
.activity-detail-html form,
.activity-detail-html header,
.activity-detail-html footer,
.activity-detail-html section,
.activity-detail-html article,
.activity-detail-html aside,
.activity-detail-html nav,
.activity-detail-html main,
.activity-detail-html table,
.activity-detail-html blockquote,
.activity-detail-html pre,
.activity-detail-html hr,
.activity-detail-html address,
.activity-detail-html figure,
.activity-detail-html figcaption {
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

学会了吗？

（1）：rich-text文档

https://uniapp.dcloud.net.cn/component/rich-text.html

（2）：uvui的Parse文档

https://www.uvui.cn/components/parse.html

插件市场地址：

https://ext.dcloud.net.cn/plugin?name=uv-parse

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2025-01-10，如有侵权请联系 cloudcommunity@tencent.com 删除

字符串