使用jsBridge拉起弹窗

HarmonyOS

伊普洛先生

2024-05-20 20:52:04

1941浏览

已于2024-5-21 16:50:24修改

回答 1

按赞同

按时间

油炸帕尼尼

使用web组件加载一个html，并在web回调和html里使用javaScriptProxy进行桥接，实现通过html来拉起弹窗的功能

核心代码解释：

import window from '@ohos.window' 
import { CustomerDialog } from './CustomerDialog' 
import webview from '@ohos.web.webview' 
import { JsbObject } from './JsbObject' 
import { promptAction } from '@kit.ArkUI' 
  
@Entry({ 
  routeName: "Page2" 
}) 
@Component 
export struct Page2 { 
  @State param1: string = "" 
  @LocalStorageLink('name') name: string = "默认" 
  retainDialogController?: CustomDialogController 
  webviewController = new webview.WebviewController() 
  
  jsbObject: JsbObject = { 
    openDialog: () => { 
      this.showDialog(this) 
    } 
  } 
  
  showDialog(context : object) { 
    promptAction.openCustomDialog({ 
      builder: customDislikeDialogBuilder.bind(context) 
    }).then((dialogId: number) => { 
    }) 
  } 
  
  aboutToAppear(): void { 
    let storage = LocalStorage.getShared() 
    let localName: string | undefined = storage.get('name') 
    if (localName) { 
      this.name = localName 
    } 
    let subWindow = window.findWindow("TestWindow") 
    subWindow.setWindowBackgroundColor('#77000000') 
  } 
  
  onBackPress(): boolean | void { 
    let win = window.findWindow("TestWindow") 
    win.destroyWindow() 
    return true 
  } 
  
  build() { 
    Column() { 
      Text("页面2") 
        .fontSize(30) 
      Button("原生按钮打开窗口") 
        .onClick(() => { 
          this.showDialog(this) 
        }) 
      Web({ 
        src: "resource://rawfile/web_test.html", 
        controller: this.webviewController 
      }) 
        .javaScriptAccess(true) 
         
        .javaScriptProxy({ 
          name: "myJsb", 
          object: this.jsbObject, 
          methodList: ["openDialog"], 
          controller: this.webviewController 
  
        }) 
    }.width('40%') 
    .height('60%') 
    .margin({ 
      left: '30%', 
      top: '20%' 
    }) 
    .backgroundColor(Color.Brown) 
  } 
} 
  
@Builder 
export function customDislikeDialogBuilder() { 
  CustomerDialog() 
}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.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.

html：

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <script> 
      function openWindow() { 
        window.myJsb.openDialog(); 
      } 
    </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.
15.
16.
17.

实现效果：

2024-05-21 16:31:16

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

发布

51CTO

51CTO博客

51CTO学堂

使用jsBridge拉起弹窗

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