HarmonyOS鸿蒙Next中web组件以post形式加载url和参数，打开第一个H5页面后，在第一个页面跳转第二个页面后，点击第二个页面左上角返回第一个页面白屏

HarmonyOS鸿蒙Next中web组件以post形式加载url和参数，打开第一个H5页面后，在第一个页面跳转第二个页面后，点击第二个页面左上角返回第一个页面白屏

Web({ src: '', controller: this.webController })// 将对象注入到web端
  .javaScriptProxy({
    object: this.webHandle,
    name: "webHandle",
    methodList: ["GoBackToApp", "OpenWallet", "PaySDK"],
    controller: this.webController
  })//这里有一个问题，鸿蒙web组件加载post形式url（第一页面）时，选择了缓存，但从第二页面返回第一页时，出现白屏
    //按照子锋老师定论：从第二页面返回第一页面时直接退出sdk
    //后续提交工单咨询鸿蒙技术选择缓存时，为何返回第一页面失败
  .webViewLifeCycle(1, this.webController, undefined, this.url)
  .onProgressChange((event: OnProgressChangeEvent) => {
    console.debug('webview load progress', event?.newProgress)
    this.loadProgress = event?.newProgress;

    if (event?.newProgress === 100) {
      this.isLoading = false;
    }
  })
  .fileAccess(true)
  .domStorageAccess(true)// Default CacheMode.Default  默认行为。使用未过期的缓存资源，如果缓存不存在或已过期，则从网络加载。
    // None CacheMode.None 不校验缓存。此模式允许加载HTTP和HTTPS混合内容。
    // Online CacheMode.Online 仅使用网络。加载资源时不使用缓存，全部从网络中获取。
    // Only CacheMode.Only 仅使用缓存。只从缓存中加载资源，不联网。
  .cacheMode(CacheMode.Default)

@Extend(Web)
function webViewLifeCycle(jump: number, webviewController: webview.WebviewController,
  backResultListener?: BackResultListener, urlConstant?: string) {
  .onLoadIntercept((event) => {
    if (event) {

      let url = event.data.getRequestUrl()
      console.log('--zrzf---- 操作之前jump:' + jump)

      //这里有一个问题，鸿蒙web组件加载post形式url（第一页面）时，选择了缓存，但从第二页面返回第一页时，出现白屏
      //暂时按照：从第二页面返回第一页面时直接退出sdk
      //后续提交工单咨询鸿蒙技术选择缓存时，为何返回第一页面失败
      if (urlConstant != url) {
        jump++
      }

      if (url === urlConstant && jump > 1) {
        router.back()
        return true
      }

    }
    // 返回true表示阻止此次加载，否则允许此次加载
    return false
  })
  .onPageEnd((event) => {
    webviewController.runJavaScript("sdkInterface('new')")
    if (event) {
      console.log('--zrzf----onPageEnd url:' + event.url);

    }
  })
  .domStorageAccess(true)
}

在生命周期aboutToAppear中进行如下代码进行加载
setTimeout(() => {
  try {
    let postData = new ArrayBuffer(10000);
    if (this.postParams) {
      postData = this.paramsToArrayBuffer(this.postParams as Record<string, string>);
    }

    // 数据转化为ArrayBuffer类型。
    this.webController.postUrl(this.url, postData);
  } catch (error) {
    console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
  }
}, 0); // 立即执行，确保页面已经显示

更多关于HarmonyOS鸿蒙Next中web组件以post形式加载url和参数，打开第一个H5页面后，在第一个页面跳转第二个页面后，点击第二个页面左上角返回第一个页面白屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

1.楼主这个方法在onPageEnd里面注入会不会晚了些

.onPageEnd((event) => {
    webviewController.runJavaScript("sdkInterface('new')")
    if (event) {
      console.log('--zrzf----onPageEnd url:' + event.url);
    }
  })

2.确实有点没有明白楼主出问题的步骤是哪里

更多关于HarmonyOS鸿蒙Next中web组件以post形式加载url和参数，打开第一个H5页面后，在第一个页面跳转第二个页面后，点击第二个页面左上角返回第一个页面白屏的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


鸿蒙Next中Web组件使用post方式加载URL参数后，页面跳转返回白屏问题，主要原因是页面状态未正确恢复或缓存失效。需检查页面生命周期管理，确保跳转前后数据持久化。可尝试在Web组件配置中启用缓存或调整页面重载策略。若使用页面路由，需验证参数传递机制是否完整。

在HarmonyOS Next中，Web组件使用POST方式加载URL后，从第二页面返回第一页面出现白屏的问题，主要与缓存机制和页面生命周期处理有关。

从代码分析来看，问题可能出现在以下几个方面：

  1. 缓存模式设置：当前使用CacheMode.Default模式，当从第二页面返回时，系统可能直接返回缓存的POST请求结果，但由于POST请求的特殊性，缓存内容可能无法正确还原页面状态。

  2. 页面跳转拦截逻辑：在onLoadIntercept中，当检测到URL与初始URL相同且jump计数大于1时，直接执行router.back()并返回true阻止加载，这可能导致页面无法正常重新加载。

  3. POST数据重新加载：返回第一页面时，系统没有重新执行POST请求，而是依赖缓存，但POST请求的参数数据可能丢失。

解决方案建议：

  1. 调整缓存策略：尝试将cacheMode设置为CacheMode.None，避免缓存干扰：
.cacheMode(CacheMode.None)
  1. 优化页面拦截逻辑：修改onLoadIntercept中的处理，避免在返回时直接阻止页面加载：
if (url === urlConstant && jump > 1) {
  // 重新加载POST数据而不是直接返回
  this.webController.postUrl(this.url, postData);
  return true; // 阻止默认加载，使用自定义POST加载
}

  1. 确保POST数据重新发送：在页面恢复时重新执行POST请求，可以在aboutToAppear或页面显示回调中重新调用postUrl。

  2. 检查页面生命周期：确认在页面返回时是否触发了正确的生命周期回调，确保Web组件能够重新初始化和加载。

通过调整缓存策略和优化页面加载拦截逻辑，应该能够解决返回第一页面时的白屏问题。

回到顶部