HarmonyOS 鸿蒙Next 前端调用原生及原生调用前端的方法

发布于 1周前 作者 wuwangju 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 前端调用原生及原生调用前端的方法

我们目前有这样一个问题就是前端先调用原生原生处理好结果然后将数据上传到前端（先后顺序问题） 安卓端实现的方式：

public void H5CallLiveSurvivalAuth(String param) {
  // ToastUtils.show("H5CallLiveSurvivalAuth");
  Gson gson = new Gson();
  HumanFaceParams humanFaceParams = gson.fromJson(param, HumanFaceParams.class);
  AliFace.getInstance().launch(WebViewActivity.this, humanFaceParams.getCertifyId(), new ICallback() {
    @Override
    public void onResponse(Map<String, String> response) {
      // 不管成功失败，都回调
      runOnUiThread(() -> {
        String responseStr = JSON.toJSONString(response);
        webView.loadUrl("javascript:NativeCallLiveSurvivalAuth('" + responseStr + "')");
      });
    }
  });
}

前端调用原生的方法 原生拉着人脸 然后将返回的结果 上传到前端 这个是我鸿蒙实现的方法:


async H5CallLiveSurvivalAuth(param:string): Promise<string> {
  // ToastUtil.showToast("H5调用人脸");
  let data=JSONUtils.json2Bean(HumanFaceParams,param);
  let certifyId=data?.certifyId;
  let faceResult: MPFaceResult = await MPFace.startVerify(certifyId);
  let toast = '';
  if (faceResult.isSuccess()) {
  //客户端认证通过，去服务端查询最终结果
  toast = faceResult.msg;
}
else {
  //认证失败
  toast = JSON.stringify(faceResult);
}
SpConstants.TOAST=toast;
return toast;
}

但是如何再次调用方法将返回的结果toast信息上传到前端呢？这个先后顺序如何控制啊？


更多关于HarmonyOS 鸿蒙Next 前端调用原生及原生调用前端的方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

参考此api即可 https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#javascriptproxy

import webview from '@ohos.web.webview';

class WebObj {
controller: WebviewController;
constructor(controller: WebviewController) {
this.controller = controller;
}


webString(): void {
this.controller.runJavaScript(“callback(true)”);
}


}


@Entry
@Component
struct Index {
@State webTestObj: WebObj = new WebObj(new webview.WebviewController());


build() {
Column() {
Web({
src: $rawfile(‘index.html’),
controller: this.webTestObj.controller
})
.onControllerAttached(()=>{
this.webTestObj.controller.registerJavaScriptProxy(this.webTestObj, “objTestName”, [“webString”]);
this.webTestObj.controller.refresh();
})
}
}
}


<!Document>
<html>


<head>
<title>测试</title>
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
</head>
<style>
html,
body {
margin: 0px;
padding: 0px;
}


<span class="hljs-tag">button</span> <span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">100</span>%</span></span>;
  <span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">50</span>px</span></span>;
<span class="hljs-rule">}</span></span>

</style>


<body>
<div>
<div>
<div>test.html</div>
<button id=“echo”>人脸识别</button>
</div>
</div>
<script>


document.querySelector(<span class="hljs-string">'#echo'</span>).addEventListener(<span class="hljs-string">'click'</span>, async () =&gt; {
  objTestName.webString({<span class="hljs-string">'event'</span>:<span class="hljs-string">'调用人脸识别'</span>})
})
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">callback</span><span class="hljs-params">(type)</span>{</span>
  document.write(type)
}

</script>
</body>


</html>


<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

更多关于HarmonyOS 鸿蒙Next 前端调用原生及原生调用前端的方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next系统中，前端调用原生模块及原生调用前端模块的方法主要通过以下途径实现：

前端调用原生模块：

  1. JS Bridge：利用系统提供的JS Bridge机制，前端JavaScript代码可以通过特定的API调用原生模块的方法。这通常涉及在前端代码中定义调用接口，并在原生代码中实现相应的接口逻辑。

  2. Promise或Callback：为了处理异步调用，前端可以使用Promise或Callback机制来接收原生模块返回的结果。

原生调用前端模块：

  1. 事件机制：原生代码可以通过触发自定义事件的方式，通知前端模块执行相应的操作。前端代码需要监听这些自定义事件，并在事件触发时执行相应的逻辑。

  2. JS Context：在某些情况下，原生代码可以直接操作JavaScript上下文（JS Context），从而调用前端模块的函数或变量。这种方法需要谨慎使用，以避免破坏前端代码的封装性和安全性。

请注意，以上方法的具体实现可能因HarmonyOS鸿蒙Next系统的版本和具体应用场景而有所不同。开发者在实际开发中，应参考最新的官方文档和API指南，以确保代码的正确性和兼容性。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部