HarmonyOS Web加载网页白屏

在一个组件中请求网络获取到要加载的url，在当前Web中加载出现白屏。

@Component 
export default struct NewsList { 
  // @State newsUrl: string = CommonConstants.NEWS_DEFAULT_URL; 
  @State newsUrl: string = '' 
  webviewController: web_webview.WebviewController = new web_webview.WebviewController(); 
  @State mode: MixedMode = MixedMode.All 
  @State webLoadFinish: boolean = false //新闻列表是否加载完成 
 
  async aboutToAppear(): Promise<void> { 
    let res: Record<string, ESObject> = await getNewsUrl() 
    if (res.data) { 
      this.newsUrl = res.data; 
    } 
  } 
 
  build() { 
    Column() { 
      DDNavigationBarView({ 
        title: '新闻', 
        showBack: false 
      }) 
      Web({ src: this.newsUrl, controller: this.webviewController }) 
        .domStorageAccess(true) 
        .mixedMode(this.mode) 
        .onPageEnd(() => { 
          this.webLoadFinish = true 
        }) 
        .onLoadIntercept((event) => { 
          if (this.webLoadFinish) { 
            if (getPassPort()) { //用户是否登陆 
              let userId: string = getPassPort().user_id; 
              let action = 'yes' 
              let userIcon: string = getPassPort().user_img 
              let userName: string = getPassPort().user_nickname 
              //同步用户数据给新闻页面 
              this.webviewController.loadUrl(`javascript:xyAuth.appAuth("${action}","${userId}","${userIcon}","${userName}")`) 
            } else { //用户未登陆 
              console.log('没有用户数据') 
              let userId: string = ''; 
              let action = 'no' 
              let userIcon: string = '' 
              let userName: string = '' 
              //同步用户数据给新闻页面 
              this.webviewController.loadUrl(`javascript:xyAuth.appAuth("${action}","${userId}","${userIcon}","${userName}")`) 
            } 
            router.pushUrl({ 
              url: 'pages/modules/news/pages/NewsDetailPage', 
              params: { newsDetailsUrl: event.data.getRequestUrl() } 
            }) 
          } 
          return this.webLoadFinish 
        }) 
        .javaScriptAccess(true) 
        .width('100%') 
        .height('100%') 
    } 
    .backgroundColor(Color.White) 
  } 
}

HarmonyOS

FengTianYa

2024-09-05 10:07:16

浏览

回答 1

待解决

回答 1

按赞同

按时间

superinsect

请尝试在异步获取newsUrl后，主动调用loadUrl加载，示例代码如下：

import web_webview from '@ohos.web.webview'; 
 
// 模拟异步请求，3s后返回一个URL 
async function getNewsUrl(): Promise<string> { 
  return new Promise((resolve) => { 
    setTimeout(() => { 
      resolve('https://test.example.com/') 
    }, 3000) 
  }) 
} 
@Entry 
@Component 
export default struct NewsList { 
  @State newsUrl: string = '' 
  webviewController: web_webview.WebviewController = new web_webview.WebviewController(); 
  @State mode: MixedMode = MixedMode.All 
  @State webLoadFinish: boolean = false //新闻列表是否加载完成 
  async aboutToAppear(): Promise<void> { 
    let res = await getNewsUrl() 
    this.newsUrl = res; 
    // 异步更新newsUrl，web组件不会主动重新加载，需要手动调用loadUrl 
    this.webviewController.loadUrl(this.newsUrl) 
  } 
  build() { 
    Column() { 
      Web({ src: this.newsUrl, controller: this.webviewController }) 
        .domStorageAccess(true) 
        .mixedMode(this.mode) 
        .onPageEnd(() => { 
        this.webLoadFinish = true 
      }) 
      .javaScriptAccess(true) 
        .width('100%') 
        .height('100%') 
    } 
    .backgroundColor(Color.White) 
 
  } 
}

2024-09-05 15:55:48

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS Web加载网页白屏

订阅鸿蒙技术特刊，精选内容抢先看