HarmonyOS鸿蒙Next中FastWeb官方组件怎么与WebViewJavascriptBridge结合使用

HarmonyOS鸿蒙Next中FastWeb官方组件怎么与WebViewJavascriptBridge结合使用？

3 回复

FastWeb基于OpenHarmony基础组件开发的高性能Web容器，提供具有预启动、预渲染、预编译JavaScript生成字节码缓存、离线资源免拦截注入等能力的Web组件。

参考如下demo，在页面生命周期aboutToAppear()中查询预加载Web组件信息并注入JavascriptBridge：

// Index.ets
import { BuilderNode, FrameNode, NodeController, UIContext } from '@kit.ArkUI';
import {createNWeb,getNWeb,WebProperties,controllerMap,updateWeb,webOptionMap,preLoadUrl,release} from '[@hw-agconnect](/user/hw-agconnect)/fast-web'
import { promptAction } from '@kit.ArkUI';

class LoadingManager {
  customDialogId: number | undefined = undefined;

  public static createOption(builder: CustomBuilder) {
    const option: promptAction.CustomDialogOptions = {
      builder: builder,
      alignment: DialogAlignment.Center,
      cornerRadius: 0,
      width: '110%',
      height: '110%',
      backgroundBlurStyle: BlurStyle.NONE
    }
    return option
  }

  show(context: Object) {
    promptAction.showToast({ message: '用户名或密码错误' })
    promptAction.openCustomDialog(LoadingManager.createOption(Loading.bind(context))).then((dialogId: number) => {
      this.customDialogId = dialogId;
    })
  }

  hide() {
    if (this.customDialogId) {
      promptAction.closeCustomDialog(this.customDialogId)
    }
  }
}

@Builder
function Loading() {
  Column() {
    LoadingProgress()
      .width(50).height(50)
      .color(Color.White)
  }
  .focusable(false) // 设置当前组件不可以获焦
  .width('100%')
  .height('100%')
  .backgroundColor('rgba(0,0,0,0.5)')
  .justifyContent(FlexAlign.Center)
}

class JsBridge {
  private uiContext: UIContext
  private LoadingManager: LoadingManager = new LoadingManager()

  constructor(uiContext: UIContext) {
    this.uiContext = uiContext
  }

  showLoading() {
    this.LoadingManager.show(this.uiContext!)
  }

  hideLoading() {
    this.LoadingManager.hide()
  }
}

@Entry
@Component
struct Index {
  uiContext?: UIContext
  @State js_bridge: JsBridge | null = null;

  aboutToAppear(): void {
    const WEB1_ID = 'web1Id' // web1Id为预加载web组件的id
    this.uiContext = this.getUIContext();
    this.js_bridge = new JsBridge(this.uiContext)
    const webControl = controllerMap.get(WEB1_ID) // 获取webviewController
    const webOption = webOptionMap.get(WEB1_ID) // 获取预加载的web参数
    if (webOption) { // webOption不为空则注入自定义JSBridge
      webOption.config.webProperties.javaScriptProxy = {
        object: this.js_bridge,
        name: 'JsBridge',
        methodList: ['showLoading', 'hideLoading'],
        controller: webControl
      } as JavaScriptProxy
    }
  }

  build() {
    Column() {
      Button('webSample')
        .width('100%')
        .height('50')
        .onClick(() => {
        })
    }
    .height('100%')
    .width('100%')
  }
}

【常见FAQ】 Q：如何安装FastWeb预加载组件？ A：可通过ohpm install @hw-agconnect/fast-web实现安装。

更多关于HarmonyOS鸿蒙Next中FastWeb官方组件怎么与WebViewJavascriptBridge结合使用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，FastWeb组件通过@hwfastweb/webview-javascript-bridge库实现与WebViewJavascriptBridge的集成。首先在FA模型或Stage模型的ArkTS页面中导入该库。通过FastWebController获取WebView实例后，调用getJavaScriptBridge()方法初始化桥接对象。

使用callHandler()方法注册Native端Handler，处理前端JS调用；通过callHandler()或send()方法主动调用前端注册的Handler。双向通信需在前端页面引入对应JS桥接文件，并采用相同机制注册和调用Handler。

数据序列化遵循JSON格式，支持基础类型和对象传输。异步回调通过Promise或Callback方式处理。需注意Handler命名唯一性和消息队列的线程安全。

在HarmonyOS Next中，FastWeb组件与WebViewJavascriptBridge结合使用主要通过以下方式实现：

  1. 初始化桥接：在FastWeb组件加载前，通过WebViewJavascriptBridge建立JS与Native的双向通信通道：
WebViewJavascriptBridge.init((message, responseCallback) => {
  // 处理来自Native的消息
})
  1. 注册JS方法供Native调用：
WebViewJavascriptBridge.registerHandler('jsFunction', (data, callback) => {
  // 处理Native传递的数据
  callback({result: 'success'})
})
  1. 调用Native方法：
WebViewJavascriptBridge.callHandler('nativeMethod', {param: 'value'}, (response) => {
  // 处理Native返回的数据
})
  1. 在FastWeb组件中集成：
  • 在页面加载时注入Bridge初始化脚本
  • 通过@JavascriptInterface注解暴露Native方法
  • 使用evaluateJavascript()执行JS回调
  1. 通信安全：
  • 验证消息来源
  • 使用HTTPS协议
  • 对传输数据进行加密

这种结合方式可实现高效的Web-Native交互，同时保持FastWeb组件的性能优势。

回到顶部