HarmonyOS鸿蒙Next中前端调用ArkTS侧方法，ArkTS侧调用前端的方法
HarmonyOS鸿蒙Next中前端调用ArkTS侧方法，ArkTS侧调用前端的方法
我们目前有这样一个问题就是前端先调用原生原生处理好结果然后将数据上传到前端（先后顺序问题）
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中前端调用ArkTS侧方法，ArkTS侧调用前端的方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
3 回复
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;
}
button {
width: 100%;
height: 50px;
}
</style>
<body>
<div>
<div>
<div>test.html</div>
<button id="echo">人脸识别</button>
</div>
</div>
<script>
document.querySelector('#echo').addEventListener('click', async () => {
objTestName.webString({'event':'调用人脸识别'})
})
function callback(type){
document.write(type)
}
</script>
</body>
</html>更多关于HarmonyOS鸿蒙Next中前端调用ArkTS侧方法，ArkTS侧调用前端的方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中，前端与ArkTS侧的交互可以通过@ohos.worker模块实现。前端调用ArkTS侧方法时，可以使用Worker线程进行通信。前端通过postMessage发送消息，ArkTS侧通过onmessage接收并处理消息。ArkTS侧调用前端方法时，同样通过postMessage发送消息，前端通过onmessage接收并处理消息。具体实现如下：
-
前端调用ArkTS侧方法：
- 前端创建
Worker实例，指定ArkTS侧脚本路径。 - 前端使用
postMessage发送消息到ArkTS侧。 - ArkTS侧在
onmessage中接收消息并执行相应逻辑。
- 前端创建
-
ArkTS侧调用前端方法：
- ArkTS侧使用
postMessage发送消息到前端。 - 前端在
onmessage中接收消息并执行相应逻辑。
- ArkTS侧使用
示例代码：
// 前端代码
const worker = new Worker('arkts_worker.js');
worker.postMessage({ type: 'callArkTSMethod', data: 'Hello ArkTS' });
worker.onmessage = (event) => {
console.log('Received from ArkTS:', event.data);
};
// ArkTS侧代码 (arkts_worker.js)
onmessage = (event) => {
if (event.data.type === 'callArkTSMethod') {
console.log('Received from frontend:', event.data.data);
postMessage({ type: 'response', data: 'Hello Frontend' });
}
};通过这种方式，前端与ArkTS侧可以实现双向通信。
