HarmonyOS 鸿蒙Next中页面类似弹框样式跳转H5

HarmonyOS 鸿蒙Next中页面类似弹框样式跳转H5 页面类似弹框样式跳转H5
现在有一个场景，从A页面跳转到B页面，B页面其实是个H5，且不是全屏，需要看到A页面的内容，相当于Dialog。解释一下，这里为什么不用CustomDialog，因为按照文档说明，CustomDialog需要绑定页面，而这里的场景，这个登录是第三方的库，用CustomDialog对接入方来说不便捷

phonegap100 1楼•15 天前作者

可以使用subWindow的方式弹窗，参考:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V13/application-window-stage-V13#设置应用子窗口

示例代码：

@Entry
@Component
struct Index {
  webController: webview.WebviewController = new webview.WebviewController();
  aboutToAppear(): void {
    webview.WebviewController.setWebDebuggingAccess(true)
    const windowStage: window.WindowStage | undefined = AppStorage.get("windowStage")
    if (windowStage) {
      windowStage.createSubWindow('test', (err, win) => {
        if (err.code) {
          console.log(JSON.stringify(err.code))
        } else {
          win.loadContentByName(entryName);
          win.resize(500, 500);
          win.moveWindowTo(500, 500)
          win.showWindow();
        }
      })
    }
  }

  build() {
    Row() {
      Column() {
        Text('Index')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
    .width('100%')
}
.height('100%')
  }
}

Page3:

export const entryName: string = 'Page3';
@Entry({ routeName: entryName })
@Component
struct Page3 {
  @State message: string = 'Hello World';
  webController: webview.WebviewController = new webview.WebviewController();

  build() {
    Row() {
      Column() {
        Web({ src:'https://m.baidu.com',controller:this.webController })
          .domStorageAccess(true)
          .onTitleReceive(event => {
            if (event?.title) {
              console.log('receive title: ----- ' + event.title)
            } else {
              console.log('receive title not found ')
            }
          })
      }
      .width('100%')
    }
    .height('100%')
    .backgroundColor(Color.Red)
  }
}

更多关于HarmonyOS 鸿蒙Next中页面类似弹框样式跳转H5的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

ionicwang 2楼•15 天前

在HarmonyOS鸿蒙Next中，页面类似弹框样式跳转H5可以通过使用WebView组件和Dialog组件来实现。首先，创建一个WebView组件用于加载H5页面。然后，使用Dialog组件来模拟弹框样式。通过设置Dialog的布局和样式，将WebView嵌入到Dialog中，从而实现H5页面的弹框跳转效果。具体实现如下：

在布局文件中定义WebView和Dialog的样式。
在代码中初始化WebView，并加载指定的H5页面URL。
创建Dialog实例，并将WebView添加到Dialog的布局中。
控制Dialog的显示和隐藏，实现弹框效果。

代码示例：

import webview from '@ohos.web.webview';
import prompt from '@ohos.prompt';

let webView = webview.WebView.createInstance();
webView.loadUrl('https://example.com');

let dialog = new prompt.Dialog();
dialog.setCustomView(webView);
dialog.show();

ionicwang 3楼•15 天前

在HarmonyOS鸿蒙Next中，若需实现类似弹框样式的页面跳转至H5页面，可以使用WebView组件嵌入H5内容，并通过CustomDialogController或PageTransition实现弹框效果。具体步骤如下：

创建WebView组件：在布局文件中添加WebView，并加载目标H5页面的URL。
弹框控制：使用CustomDialogController或PageTransition控制弹框的显示与隐藏。
样式调整：通过设置弹框的宽高、背景透明度等属性，优化用户体验。

示例代码片段：

// 创建WebView
const webView = new WebView();
webView.src = 'https://example.com';

// 弹框控制器
const dialogController = new CustomDialogController({
    builder: webView,
    alignment: DialogAlignment.Bottom
});

// 显示弹框
dialogController.show();

通过以上步骤，可以实现类似弹框样式的H5页面跳转，提升应用交互体验。