HarmonyOS 鸿蒙Next 如何实现像 IOS webview javaScriptProxy设置对象属性调用

发布于 1周前 作者 phonegap100 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 如何实现像 IOS webview javaScriptProxy设置对象属性调用

在webview与h5服务交互，h5端通过javaScriptProxy注册的对象属性（innoPlus.native.getLocationCoordinate）调用鸿蒙端提供的原生方法失效。

由于第三方推进适配鸿蒙化无法确定，希望webview能够像ios一样兼容通过对象的属性调用webview的方法，或者有其他什么方法。

/**
 * 定位获取地理位置经纬度
 */
getLocationCoordinate: function (callback) {
  if (deviceType == 'IOS') {
    innoPlus.native.getLocationCoordinate(function (data) {
      callback && callback(data)
    })
  } else if (deviceType == 'ANDROID') {
    window.appGetLocationCoordinate = function (data) {
      typeof data === 'string' ? callback(JSON.parse(data)) : callback(data)
    }

    try {
      android.getLocationCoordinate('appGetLocationCoordinate')
      return true
    } catch (e) {
      return false
    }
  }
},

更多关于HarmonyOS 鸿蒙Next 如何实现像 IOS webview javaScriptProxy设置对象属性调用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

官网示例就有的吧，我给个Demo吧

H5端：

<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="callArkTS()">Click Me!</button>
<button type="button" onclick="callArkTS1()">Click Me!</button>
<p id="demo"></p>
<p id="demo1"></p>
<script>
function callArkTS() {
let str = testObjName.test();
document.getElementById("demo").innerHTML = str;
console.info('ArkTS Hello World! :' + str);
}
function callArkTS1() {
let str = testObjName.gettest1();
document.getElementById("demo1").innerHTML = str;
console.info('ArkTS Hello World! :' + str);
}
</script>
</body>
</html>

原生端：

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

class testClass {
constructor() {}
test1:string="我是属性！"

test(): string {
return '我是方法!';
}
gettest1():string{
return this.test1
}
}

@Entry
@Component
struct WebComponent {
webviewController: webview.WebviewController = new webview.WebviewController();
// 声明需要注册的对象
@State testObj: testClass = new testClass();
build() {
Column() {
// Web组件加载本地index.html页面
Web({ src: $rawfile('index.html'), controller: this.webviewController})
// 将对象注入到web端
.javaScriptProxy({
object: this.testObj,
name: "testObjName",
methodList: ["test","gettest1"],
controller: this.webviewController
})
}
}
}

更多关于HarmonyOS 鸿蒙Next 如何实现像 IOS webview javaScriptProxy设置对象属性调用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙）系统中，实现类似iOS WebView中通过javaScriptProxy设置对象属性并调用的功能，可以通过鸿蒙提供的JS桥接机制来完成。具体步骤如下：

  1. 创建WebView组件：在鸿蒙应用的布局文件中添加WebView组件，用于加载网页内容。

  2. 加载网页并启用JS交互：在代码中加载指定的网页，并启用JavaScript交互。这通常涉及到设置WebView的某些属性或调用相应的方法以允许JavaScript与原生代码通信。

  3. 定义JS接口对象：在鸿蒙原生代码中定义一个接口对象，该对象将暴露给WebView中的JavaScript环境。这个对象可以包含多个方法，用于处理JavaScript端的调用。

  4. 注册JS接口：将定义的接口对象注册到WebView中，使其能够被JavaScript访问。这通常是通过WebView提供的API完成的。

  5. 在JavaScript中调用：在网页的JavaScript代码中，通过特定的方式（如window.yourInterfaceName.methodName()）调用原生接口提供的方法。

  6. 处理回调：如果JavaScript调用需要返回结果或触发某些动作，原生代码可以处理这些回调，并将结果返回给JavaScript端。

请注意，鸿蒙系统的API和具体实现细节可能与iOS有所不同，因此需要根据鸿蒙的官方文档和API参考进行具体实现。

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

回到顶部