HarmonyOS 鸿蒙Next web组件 加载web页面 异常

HarmonyOS 鸿蒙Next web组件 加载web页面 异常 1、A页面通过Navigation组件 跳转到B页面 B页面中是一个web组件加载web页面，
2、启动应用，第一次用户点击A页面中的某入口跳转到B页面 B页面展示web页面展示正常， B页面返回到A页面 再次进入B页面 web页面异常（页面顶部内容被遮挡 页面错乱）

2 回复

可以给web设置一个具体的高度来解决，通过getRectangleById方法获取到整个NavDestination的高度，来动态设置web的高度。可以使用以下demo验证下：

//WebView.ets
import { webview } from '@kit.ArkWeb'
import componentUtils from '@ohos.arkui.componentUtils'
// 跳转页面入口函数
@Builder
export function WebViewBuilder() {
  WebView()
}
@Component
struct WebView {
  webviewController: webview.WebviewController = new webview.WebviewController()
  @State webHeight:number=0;
  build() {
    NavDestination() {
      Web({ src: '<a href="https://downloads.teamshub.com/oncon-jssdk/index" target="_blank">https://downloads.teamshub.com/oncon-jssdk/index</a>', controller: this.webviewController})
        .height(this.webHeight)
    }
    .title('服务协议')
    .hideTitleBar(false)
    .width('100%')
    .height('100%')
    .id('NavDestination')
    .onShown(()=>{
      let info = componentUtils.getRectangleById('NavDestination') //通过id获取整个NavDestination区域的大小
      this.webHeight = px2vp(info.size.height)
      console.log('高度：'+this.webHeight.toString())
    })
  }
}

更多关于HarmonyOS 鸿蒙Next web组件 加载web页面 异常的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对“HarmonyOS 鸿蒙Next web组件 加载web页面 异常”的问题，可能的原因及解决方案如下：

  1. URL错误：检查加载的web页面URL是否正确，确保没有拼写错误或路径错误。

  2. 网络问题：确认设备是否连接到互联网或指定的局域网，并检查网络连接是否稳定。

  3. 权限设置：检查应用是否具备访问网络的权限，以及是否有权限加载指定的web页面资源。

  4. 组件配置：检查Next web组件的配置是否正确，包括组件的版本、支持的浏览器内核等。

  5. 页面兼容性问题：确认web页面是否与HarmonyOS的Next web组件兼容，包括页面使用的技术栈、资源格式等。

  6. 缓存问题：尝试清除应用缓存或组件缓存，然后重新加载web页面。

  7. 组件Bug：如果以上均检查无误，可能是Next web组件本身存在Bug。此时，可以关注华为鸿蒙系统的官方更新，看是否有相关的修复补丁。

如果问题依旧没法解决请联系官网客服，官网地址是 https://www.itying.com/category-93-b0.html 。在这里，你可以获得更专业的技术支持和解决方案。

回到顶部