uniapp app-plus 如何设置webview背景透明

在uniapp的app-plus平台中，如何设置webview的背景为透明？我在配置中尝试了backgroundColor和background属性都不生效，请问正确的实现方法是什么？

2 回复

在pages.json中配置webview的background属性为transparent即可：

"app-plus": {
  "webview": {
    "background": "transparent"
  }
}

在 UniApp 的 app-plus 平台中，设置 WebView 背景透明可以通过以下步骤实现：

  1. 在 pages.json 中配置页面样式：
    在对应页面的 style 配置中添加 "app-plus": { "background": "transparent" }，确保整个页面的背景透明。

    {
  "path": "pages/your-webview-page",
  "style": {
    "app-plus": {
      "background": "transparent"
    }
  }
}

  2. 在 WebView 组件中设置透明背景：
    在 Vue 页面的 WebView 组件中，通过内联样式或 CSS 将背景设为透明：

    <webview src="https://example.com" style="background: transparent;"></webview>

  3. 注意事项：

    • 确保加载的网页内容本身支持透明背景（例如无背景色或背景色为透明）。
    • 部分网页可能自带背景色，需通过注入 CSS 或与网页端协作调整。

完整示例代码：

<template>
  <view>
    <webview 
      src="https://example.com" 
      style="background: transparent;"
    ></webview>
  </view>
</template>

通过以上配置，WebView 将显示透明背景，适用于悬浮窗口或自定义样式场景。

回到顶部