HarmonyOS鸿蒙Next中js与原生交互问题

js 页面与鸿蒙原生互调无法跑通，js的写法是与android 进行交互的方式来写的，现在需要把js 的搬过来与鸿蒙原生交互

js侧代码：

var reStr = OcsReadFragment.callClient_json(jsonStr);

android 侧代码：

mWebView.addJavascriptInterface(this, "OcsReadFragment");
@JavascriptInterface
public String callClient_json(String result) {
    JSONObject obj = JSON.parseObject(result);
    String action = obj.getString("action");
    switch (action) {
    case "action_1":
        return result1;
    }
}

更多关于HarmonyOS鸿蒙Next中js与原生交互问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

itying888 1楼•4 天前

参考以下代码示例：

import { router } from '@kit.ArkUI';
import { webview } from '@kit.ArkWeb';

class webResultClass {
  constructor() {}

  result(param: Function): void {
    param("call callback");
  }

  toString(param: String): void {
    console.log('Web Component toString' + param);
    AlertDialog.show({
      title: '恭喜您抽中:' + param,
      message: '',
      autoCancel: true,
      alignment: DialogAlignment.Center,
      offset: { dx: 0, dy: -20 },
      gridCount: 3,
      confirm: {
        value: '确定',
        action: () => {
          console.info('Button-clicking callback')
        }
      },
      cancel: () => {
        console.info('Closed callbacks')
      },
      onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
        console.info("reason=" + JSON.stringify(dismissDialogAction.reason))
        console.log("dialog onWillDismiss")
        if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {
          dismissDialogAction.dismiss()
        }
        if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
          dismissDialogAction.dismiss()
        }
      }
    })
  }
}

@Entry
@Component
export struct LotteryPage {
  private urlPath: Resource = $rawfile("index.html")
  private controller: WebviewController = new webview.WebviewController();
  @State webResultObject: webResultClass = new webResultClass();

  build() {
    Column() {
      Stack({ alignContent: Alignment.TopStart }) {
        Image($r('app.media.background'))
          .width("100%")
          .aspectRatio(ImageFit.Contain)
        Column() {
          Row() {
            Image($r('app.media.ic_back'))
              .width(35)
              .aspectRatio(ImageFit.Contain)
              .margin({ top: 15, left: 20 })
              .onClick(() => {
                router.back()
              })
            Text($r('app.string.joinLottery'))
              .fontColor(Color.Black)
              .fontSize(23)
              .fontWeight(FontWeight.Medium)
              .margin({ top: 15, left: 15 })
          }
          .width("100%")
          Web({ src: this.urlPath, controller: this.controller })
            .javaScriptProxy({
              object: this.webResultObject,
              name: "webResultName",
              methodList: ["result", "toString"],
              controller: this.controller
            })
            .width("100%")
            .height(350)
            .margin({ left: 20, right: 20, top: 30 })
          Text($r('app.string.webComponentInfo'))
            .width("100%")
            .fontSize(23)
            .fontColor(Color.Black)
            .margin({ top: 15 })
            .textAlign(TextAlign.Center)
          Text($r('app.string.localText'))
            .width("100%")
            .fontSize(15)
            .fontColor(Color.Gray)
            .margin({ top: 5 })
            .textAlign(TextAlign.Center)
          Button($r('app.string.clickToLottery'))
            .width("80%")
            .height(35)
            .margin({ top: 35 })
            .onClick(() => {
              this.controller.runJavaScript(`startDraw()`);
            })
        }
        .width("100%")
      }
    }
    .width("100%")
    .height("100%")
  }
}

更多关于HarmonyOS鸿蒙Next中js与原生交互问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

songsunli 2楼•4 天前

在HarmonyOS鸿蒙Next中，JS与原生交互主要通过ArkUI框架实现。ArkUI提供了两种开发范式：基于JS扩展的类Web开发范式和基于TS扩展的声明式开发范式。

JS扩展的类Web开发范式：使用HTML、CSS和JavaScript进行开发，类似于Web开发。通过<js>标签引入JavaScript代码，并通过@Component装饰器定义组件。JS与原生交互主要通过@Entry、@Component等装饰器实现的组件生命周期方法进行。
TS扩展的声明式开发范式：使用TypeScript进行开发，通过@Entry、@Component等装饰器定义组件。TS与原生交互主要通过@State、@Prop等装饰器实现的数据绑定和状态管理进行。

在两种范式中，JS/TS与原生代码的交互主要通过以下方式实现：

Native API调用：通过@ohos模块提供的Native API，JS/TS可以直接调用原生功能，如网络请求、文件操作等。
事件绑定：通过@on装饰器或onClick等事件绑定方法，JS/TS可以监听原生组件的事件并处理。
数据绑定：通过@State、@Prop等装饰器，JS/TS可以与原生组件进行数据绑定，实现数据的双向同步。

此外，ArkUI还提供了@Observed和@ObjectLink装饰器，用于实现复杂数据结构的观察和联动。

总结：在HarmonyOS鸿蒙Next中，JS与原生交互主要通过ArkUI框架提供的装饰器和Native API实现，支持类Web和声明式两种开发范式，能够满足不同场景下的开发需求。

gougou168 3楼•4 天前作者

在HarmonyOS鸿蒙Next中，JS与原生代码的交互主要通过JSBridge实现。具体步骤包括：

注册原生方法：在原生代码中通过register方法注册JS可调用的原生方法。
JS调用原生方法：在JS中通过callNative方法调用已注册的原生方法，并传递参数。
回调处理：原生方法执行完毕后，通过callback将结果返回给JS。

示例：

// 原生代码注册方法
JSBridge.register("nativeMethod", new JSBridge.Callback() {
    @Override
    public void invoke(String data, JSBridge.Callback callback) {
        // 处理逻辑
        callback.invoke("Response from native");
    }
});

// JS调用原生方法
JSBridge.callNative("nativeMethod", "Hello", function(response) {
    console.log(response);
});

通过这种方式，JS与原生代码可以高效、安全地交互。