Web加载客服聊天网页，HarmonyOS 鸿蒙Next js的 tap 事件点击无响应

Web加载客服聊天网页，HarmonyOS 鸿蒙Next js的 tap 事件点击无响应 【设备信息】Mate60
【API版本】Api12
【DevEco Studio版本】5.0.3.910
【问题描述】Web加载客服聊天网页，js的 tap 事件点击无响应

2 回复

许多网站会在代码判断当前的UserAgent包含的关键字，如果包含android那就是andorid手机，代码里会专门适配android的情况，如果是ios同理。但是现在HarmonyOS没正式发布，所以许多网页的开发人员没做这块适配。正常情况，应该是HarmonyOS这块不需要考虑，让各大网站的开发人员根据UserAgent去判断Harmony关键字，自己去适配。

参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs-V5/faqs-arkweb-30-V5

但现在如果就想让它以手机样式显示，那就主动修改UserAgent，添加Android字样，让浏览器误断是android环境显示。例如下面这样：

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

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({ src: 'https://online.bankgz.com/IMClient/h5/login/chat?enter=DMT_FUNCTION_1', controller: this.controller })
        .onControllerAttached(() => {
          /*自定义UA*/
          let userAgent = this.controller.getUserAgent()
          let newUserAgent = userAgent.replace("OpenHarmony", "Android")
          this.controller.setCustomUserAgent(newUserAgent);
        })
    }
  }
}

如果不想在鸿蒙侧修改UserAgent，也可以修改H5端代码

["Android","iPhone","SymbianOS","Windows Phone","iPad","iPod"]

更多关于Web加载客服聊天网页，HarmonyOS 鸿蒙Next js的 tap 事件点击无响应的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，使用JavaScript开发的Web页面如果遇到tap事件点击无响应的问题，可能是由于事件绑定或事件传播机制的处理不当导致的。鸿蒙系统提供了@ohos.web.webview API来加载Web页面，并通过onTouchEvent等方法处理触摸事件。如果tap事件未触发，可以检查以下几个方面：

  1. 事件绑定：确保tap事件正确绑定到目标元素上。可以使用addEventListener方法，确保事件类型为touchstart或touchend，而不是click，因为鸿蒙系统对触摸事件的处理可能与传统的Web浏览器有所不同。

  2. 事件传播：鸿蒙系统可能对事件的传播机制有特定处理。如果事件被阻止冒泡或捕获阶段出现问题，可能导致tap事件无法触发。可以通过event.stopPropagation()或event.preventDefault()来检查事件传播是否被中断。

  3. WebView配置：确保WebView组件的配置正确，特别是setJavaScriptEnabled(true)，以启用JavaScript支持。如果JavaScript未启用，可能导致事件绑定失败。

  4. 系统兼容性：鸿蒙Next版本可能对某些Web API的支持存在差异。可以检查鸿蒙开发者文档，确认tap事件或相关触摸事件在鸿蒙系统中的兼容性。

  5. 调试工具：使用鸿蒙系统提供的调试工具，检查事件是否被正确触发。可以通过日志输出或调试器查看事件流，确认tap事件的处理流程。

如果以上检查均无问题，可能需要进一步分析Web页面的具体实现，确认是否存在其他逻辑或样式问题导致事件无法响应。

回到顶部