使用jsBridge拉起弹窗

HarmonyOS

HearMe_cn

2024-05-20 20:52:04

浏览

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

回答 1

待解决

回答 1

按赞同

按时间

xuqing_2000

使用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() 
}

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>

实现效果：

2024-05-21 16:31:16

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

发布

51CTO

51CTO博客

51CTO学堂

使用jsBridge拉起弹窗

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