HarmonyOS ArkUi ArkWeb加载不出网页问题踩坑

news2024/11/25 23:32:49

使用

使用还是比较简单的，直接贴代码了
别忘了配置网络权限

@Entry
@Component
struct WebPage {
  @State isAttachController: boolean = false
  @State url: string = ''
  @State title: string = ''
  @Prop controller: web_webview.WebviewController = new web_webview.WebviewController()
  // 与前端交互 对象
  jsObj = new JsObj({
    setHeaderContentCallback: (str: string) => {
      this.title = str
    }
  });
  // js 调用App方法: 需要在数组中声明，设置给 methodList：
  jsArray: string[] = ["setHeaderContent", "toLogin", "jumpToBossDetailNew", "jumpToBossDetail", "jumpToCompanyDetail", "openRenewDefaultNavPageLoad", "openRenewPageLoad", "openNewPageLoad", "openBrowser"];

  aboutToAppear(): void {
    this.url = (router.getParams() as RouterParams).url
    if (this.url.indexOf('?') > 0) {
      this.url = this.url + BranchUtils.appendBranchParams()
    } else {
      this.url = this.url + `?${BranchUtils.appendBranchParams()}`
    }
    web_webview.WebviewController.setWebDebuggingAccess(true);
    PreferencesUtil.getString("urlCookie").then((value) => {
      // 如果连接本地调试 一定要写完整的域名  带上http
     //web_webview.WebCookieManager.configCookieSync('http://10.1.65.120:5173/', value)
      // 设置cookie
      web_webview.WebCookieManager.configCookieSync('.sscha.com', value)
    })
    web_webview.once("webInited", () => {

    })
    eventBus.on(EventBusId.ID_LOGIN, () => {
      // todo
    })
  }


  build() {
    Column() {
      PubTitle({ title: this.title, isShowRightBtn: false })
      Web({ src: this.url, controller: this.controller })
        .width('100%')
        .height('100%')
        .mixedMode(MixedMode.All)
        .javaScriptAccess(true)
        .javaScriptProxy({
          object: this.jsObj,
          name: "android",
          methodList: this.jsArray,
          controller: this.controller,
        })
        .onControllerAttached(() => {
        // 官方建议是在这里设置 serAgent
          this.controller.setCustomUserAgent(this.controller.getUserAgent() + BranchUtils.appendBranch())
        })
        .onPageEnd((urlEnd) => {
          console.log("onPageEnd= " + JSON.stringify(urlEnd))
        })
    }
    .width('100%')
  }
}


export interface JSCallback {
  reqResult?: (code: string) => void;
  setHeaderContentCallback?: (msg: string) => void;
}

export class JsObj {
  callback?: JSCallback

  registCallBack(callback: JSCallback) {
    this.callback = callback
  }

  constructor(callback?: JSCallback) {
    this.callback = callback
  }

  // ...省略代码
}

加载网页（这个问题不难但是血坑，搞了好久才定位到问题）

现象：
Android 、Ios 都有线上App 网页都是调试好的
鸿蒙加载有些网页加载不出来（绝大多数都加载不出来），有些能加载出来。个人认为肯定不是ArkWeb的问题，这一块就需要跟前端调试，最后排查出的问题还真是前端的问题
排查结果
前端使用：localStorage，调用时localStorage为null，导致整个界面都加载不出来

经过前端修改，对localStorage是否为null进行判断，网页都可以正常加载出来了