HarmonyOS鸿蒙Next中Web组件加载网页布局异常问题

定位思路：

1. 加载网络资源，确认网页可以在浏览器上正常打开，以及手机连接网络。
2. 确认Web组件使用时，项目声明了网络权限ohos.permission.INTERNET。
3. 排查H5页面使用到哪些非常规能力，确认这些能力需要的权限是否配置。

解决方案 按照定位思路，确认网络环境正常，权限声明已配置，Web组件使用时配置以下权限：

Web({ src: $rawfile('index.html'), controller: this.controller })
  .domStorageAccess(true)
  .onlineImageAccess(true)
  .imageAccess(true)
  .fileAccess(true)
  .javaScriptAccess(true)

domStorageAccess：文档对象模型存储接口（DOM Storage API）权限，涉及sessionStorage、localStorage前端存储时需要开启。 onlineImageAccess：从网络加载图片资源权限，默认开启，可不配置。 imageAccess：允许自动加载图片资源权限，默认开启，可不配置。 fileAccess：应用中文件系统的访问权限，涉及文件上传下载操作时需要开启。 javaScriptAccess：允许执行JavaScript脚本权限，默认开启，可不配置。

除上述权限原因外，还存在一些特殊情况造成加载H5页面白屏，例如：

1. 加载H5资源时同时存在HTTP和HTTPS两种协议的资源，Web组件默认不允许加载HTTP和HTTPS混合内容，因此需要额外配置.mixedMode(MixedMode.ALL)。
2. 加载H5本地离线包时，H5页面存在使用相对路径的资源引用链接，Web组件内核不允许file协议或者resource协议访问URL上下文中来自跨域的请求，需要使用http或者https等协议替代原本使用的file协议或者resource协议进行加载。
3. 有些H5页面通过UserAgent对设备进行了判断，如果不符合条件，默认不加载或者加载固定错误页面，需要在.onControllerAttached函数中通过WebviewController设置UserAgent值。

通过以上分析给出能够正常展示的代码：

Web({
        src: "https://www.jingback.com/tiandimap/positionmap.html",
        controller: this.controller,
        renderMode: RenderMode.ASYNC_RENDER
      })
        .backgroundColor(Color.White)
        .onControllerAttached(() => {
        })
        .domStorageAccess(true)
        .javaScriptAccess(true)
        .fileAccess(true)
        .mixedMode(MixedMode.All)

运行之后正常：

总结：

1. 优先检查权限配置，尤其是网络权限和存储权限；
2. 协议与跨域问题是白屏常见诱因，通过拦截请求或混合模式解决；
3. 复杂场景结合DevTools调试，定位资源加载或脚本异常。