uni-app鸿蒙Next如何实现一个透明页面

uni-app鸿蒙Next如何实现一个透明页面

vue3，A页面打开B页面，B页面透明，可以直接看到A页面这种，有方案可以实现么？pages.json配置style/backgroundColor为transparent无效

13 回复

文档查下，用dialogPage，能满足你的要求

更多关于uni-app鸿蒙Next如何实现一个透明页面的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


dialogPage是uniapp x才有的。

官方大佬呢。。

这个使用场景是什么？目前是基于路由的，可以引用页面作为组件引入

自定义的Dialog。若作为组件引入，需要在每个页面都导入，无法通过函数式调用。

回复 月影银翔: 你可以注册为全局组件，通过 ref 来唤起，如果是鸿蒙上可以实现类似 uni.shotmodal 的封装，也可以使用 api 来唤起，使用 uts 插件来完成

回复 DCloud_UNI_OttoJi: 全局组件也需要在每个页面单据引用吧？

回复 DCloud_UNI_OttoJi: 鸿蒙端，能否使用uts打开一个dialog，然后在其内放一个透明的webview，然后再加载某个vue页面？uts中如何访问vue的路由地址？

回复 月影银翔: 可以打开 dialog ，但不能再套 uni 的功能和你的业务逻辑，你可以考虑适合全局组件，你可以封装个你自己的 page 组件，插槽里放默认值

回复 DCloud_UNI_OttoJi: 你说的全局组件是啥，能详细说下么？

回复 月影银翔: 是这个 https://uniapp.dcloud.net.cn/tutorial/vue3-components.html#全局注册 减少了手动引入

回复 DCloud_UNI_OttoJi: 额。。这个啊。。那没什么作用，。。还是需要在每个页面的template中编写一次

在 uni-app 中实现透明页面（B 页面透明并看到 A 页面）需要结合原生层配置。由于鸿蒙 Next 基于 ArkTS，且 uni-app 对鸿蒙的支持仍在完善中，以下提供通用方案及鸿蒙适配建议：

1. 通用跨端方案（H5/App）

在 pages.json 中配置页面背景透明：

{
  "pages": [
    {
      "path": "pages/B",
      "style": {
        "navigationBarTitleText": "B页面",
        "backgroundColor": "#00000000", // 关键：ARGB透明色
        "app-plus": {
          "background": "transparent", // App端额外配置
          "popGesture": "none" // 避免滑动返回穿透
        }
      }
    }
  ]
}

2. 页面代码注意事项

  • B页面模板：避免设置不透明背景色，可使用 bg-transparent 类：
    <view class="bg-transparent">
  <!-- 仅保留必要内容，其他区域透明 -->
</view>

    .bg-transparent {
  background-color: transparent !important;
}

3. 鸿蒙Next适配要点

  • 修改 manifest.json 启用鸿蒙透明能力：
    "app-plus" : {
  "harmony" : {
    "backgroundColor": "#00000000" // 鸿蒙窗口透明
  }
}
  • 鸿蒙原生层配置：需在 entry/src/main/resources/base/profile/main_pages.json 中补充窗口属性：
    {
  "window": {
    "background": "#00000000",
    "transparent": true
  }
}

4. 生命周期处理

在 B 页面监听页面隐藏/显示，动态控制 A 页面交互：

onHide(() => {
  // 可通知A页面暂停视频/动画等
})
回到顶部