HarmonyOS 鸿蒙Next客户端调用前端h5方法不成功

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

HarmonyOS 鸿蒙Next客户端调用前端h5方法不成功 客户端web页点击标题title回退按钮，需要调用前端h5方法。目前this.controller.runJavaScript()方法无法成功调用前端方法。

Harmonyos Next教程
3 回复

可以参考以下demo：

// xxx.ets
import web_webview from '@ohos.web.webview';
import business_error from '@ohos.base';
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .javaScriptAccess(true)
        .onPageEnd(e => {
          try {
            this.controller.runJavaScript('test().fn1()')
              .then(result => {
                console.log('result: ' + result);
              })
              .catch(error: business_error.BusinessError => {
                console.error("error: " + error);
              })
            if (e) {
              console.info('url: ', e.url);
            }
          } catch (error) {
            let e: business_error.BusinessError = error as business_error.BusinessError;
            console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
          }
        })
    }
  }
}
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="callArkTS()">Click Me!</button>
<p id="demo"></p>
<script>
    function test() {
      let fnList = {
        fn1: () => {
            return 'fn1'
        }
      }
      return fnList
  }
</script>
</body>
</html>

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


你可以通过对象注入方法。

export class ParamClass {

  // 提供H5调用函数
  callArkTS(params: ESObject) {
    // emitter线程通信参数
    let eventData: emitter.EventData = {
      data: params
    };
    // 发送事件
    emitter.emit({eventId: EventEnum.EVENT_ID}, eventData)
  }
}

@State paramClass: ParamClass | null = null;

// 将对象注入到web端
.javaScriptProxy({
  object: this.paramClass,
  name: "paramClass",
  methodList: ["callArkTS"],
  controller: this.webController
})

针对HarmonyOS（鸿蒙）Next客户端调用前端H5方法不成功的问题，可能的原因及解决方案如下：

  1. 权限配置：确保鸿蒙应用已正确配置访问H5页面的权限，包括网络访问、跨域请求等。检查应用的manifest文件或相关配置，确保无遗漏。

  2. 接口调用方式：验证调用H5方法的方式是否正确。鸿蒙可能通过特定的JSBridge或WebView接口与H5进行交互，需确保使用的接口与H5页面中的方法定义匹配。

  3. H5页面代码：检查H5页面中的方法是否已正确暴露给外部调用，包括方法名、参数类型及数量等。同时，确认H5页面已加载完成，且方法处于可调用状态。

  4. 版本兼容性：鸿蒙系统及其WebView组件可能与某些H5技术栈不完全兼容。检查鸿蒙系统版本及WebView组件版本，确认是否支持当前H5页面的技术特性。

  5. 错误日志：查看鸿蒙客户端及H5页面的错误日志，寻找可能的调用失败原因。错误日志通常能提供更详细的失败信息，有助于定位问题。

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

回到顶部