HarmonyOS 关于@CustomDialog组件在类里构建的问题

官方文档中@CustomDialog组件构造器，必须写在@Component里，但是我这边现在的需求场景是在H5原生界面需要调用CustomDialog组件，渲染底部弹出样式，想把@CustomDialog构造器的代码写在回调类里用，达成与H5交互的时候触发底部弹出框的效果，但不能正常渲染，这个构造器是只能写在@Component里吗？如果必须写在类里，有什么方法能解决不能正常渲染的问题吗？

HarmonyOS

aquaa

2024-12-24 17:20:43

浏览

回答 1

按赞同

按时间

zxjiu

参考示例：

//index.ets
import webview from '@ohos.web.webview'

export interface JsbObject { openDialog: () => void, test11:() => void }

@Entry()
@Component
struct Page2 {
  webviewController = new webview.WebviewController()
  dialogController: CustomDialogController = new CustomDialogController({ builder: CustomDialogExample({}) })
  jsbObject: JsbObject = {
    openDialog: () => {
      this.showDialog(this)
    },
    test11: () => {
      console.log("success")
    }
  }

  showDialog(context: object) {
    // 怎么把自定义弹窗调出来
    this.dialogController.open()
  }

  build() {
    Column() {
      Web({ src: "resource://rawfile/index.html", controller: this.webviewController })
        .javaScriptAccess(true)
        .javaScriptProxy({
          name: "myJsb",
          object: this.jsbObject,
          methodList: [
            "test11",
            "openDialog",

          ],
          controller: this.webviewController
        })
        .width('100%')
    }.backgroundColor(Color.Brown)
  }
}

@CustomDialog
struct CustomDialogExample {
  dialogControllerTwo: CustomDialogController | null = new CustomDialogController({
    builder: CustomDialogExample(),
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -25 }
  })
  controller?: CustomDialogController
  build() {
    Row() {
      Text("自定义弹窗")
    }.height('40%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.

<!DOCTYPE html>
  <html>
  <head>
  <meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover">
  <title></title>
  <script> function openWindow() { window.myJsb.openDialog() ; window.myJsb.test11()}
function test11() { window.myJsb.test11() }
</script>
  </head>
  <body>
  <button onclick="openWindow()" style="width: 200px;height: 200px"> 前端调用JSB打开窗口</button>
  </body>
  </html>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

不修改h5的情况下调用多个函数，可以尝试使用appendChild方法，比如：

document.getElementsByTagName('head')[0].appendChild(script);
1.

2024-12-24 19:00:17

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 关于@CustomDialog组件在类里构建的问题

订阅鸿蒙技术特刊，精选内容抢先看