uni-app web-view组件不解析HTML代码，直接显示代码到页面。

uni-app web-view组件不解析HTML代码，直接显示代码到页面。

信息类别 详情
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 windows11
HBuilderX 正式版
HBuilderX版本 3.3.1
手机系统 Android
手机版本 Android 12
手机厂商 小米
手机机型 Redme 9 pro
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

随机出现，目前没有掌握到规律，所以也不好复现。

预期结果：

正常解析HTML代码

实际结果：

直接显示HTML代码倒页面。

bug描述：

web-view标签随机出现显示源代码。

图片


更多关于uni-app web-view组件不解析HTML代码，直接显示代码到页面。的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

content-type错了吧

更多关于uni-app web-view组件不解析HTML代码，直接显示代码到页面。的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我新增修改content-type试试。

在 uni-app 中使用 web-view 组件时，web-view 组件本身是用来嵌入网页内容的，而不是用来解析和显示 HTML 代码的。如果你直接将 HTML 代码传递给 web-view，它会将代码作为纯文本显示，而不会解析为 HTML。

解决方案

如果你需要在 uni-app 中显示并解析 HTML 代码，可以使用以下几种方法：

1. 使用 rich-text 组件

uni-app 提供了 rich-text 组件，可以用来解析并显示 HTML 代码。

<template>
  <view>
    <rich-text :nodes="htmlContent"></rich-text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      htmlContent: '<p>这是一个<strong>富文本</strong>内容。</p>'
    };
  }
};
</script>

2. 使用 web-view 加载本地或远程 HTML 文件

如果你确实需要使用 web-view，可以将 HTML 代码保存为一个 HTML 文件，然后通过 web-view 加载该文件。

<template>
  <view>
    <web-view src="/static/myHtmlFile.html"></web-view>
  </view>
</template>

或者加载远程的 HTML 文件：

<template>
  <view>
    <web-view src="https://example.com/myHtmlFile.html"></web-view>
  </view>
</template>

3. 使用 iframe 标签

在某些情况下，你也可以使用 iframe 标签来嵌入 HTML 内容。不过，uni-app 默认不支持 iframe，你可以通过自定义组件或插件来实现。

<template>
  <view>
    <iframe :src="htmlContent" frameborder="0"></iframe>
  </view>
</template>

<script>
export default {
  data() {
    return {
      htmlContent: 'data:text/html,<p>这是一个<strong>富文本</strong>内容。</p>'
    };
  }
};
</script>
回到顶部