使用jsBridge拉起弹窗

使用jsBridge拉起弹窗

HarmonyOS
2024-05-20 20:52:04
浏览
已于2024-5-21 16:50:24修改
收藏 0
回答 1
待解决
回答 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() 
}

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>

实现效果:

分享
微博
QQ
微信
回复
2024-05-21 16:31:16
相关问题
jsBridge中如何正确使用this
719浏览 • 1回复 待解决
HarmonyOS拉起弹窗的方式有那几种
1855浏览 • 1回复 待解决
HarmonyOS JSBridge有哪些实现方式?
41浏览 • 1回复 待解决
HarmonyOS jsBridge 最佳实践
290浏览 • 1回复 待解决
HarmonyOS jsbridge HarmonyOS版本
85浏览 • 1回复 待解决
jsBridge相关问题咨询
443浏览 • 1回复 待解决
使用自定义弹窗实现分享弹窗
578浏览 • 1回复 待解决
HarmonyOS JsBridge分层设计思想
644浏览 • 1回复 待解决
HarmonyOS JsBridge的HarmonyOS版本sdk
80浏览 • 1回复 待解决
HarmonyOS jsbridge能力暴露封装案例
234浏览 • 1回复 待解决
需要web组件JSBridge通信的demo
269浏览 • 1回复 待解决