HarmonyOS 鸿蒙Next中@State url赋值后,web不加载

HarmonyOS 鸿蒙Next中@State url赋值后,web不加载 通过web加载H5页面,H5的url不同的方式获取,web的加载不一样。两种方式会自动加载,两种方式不会加载。直接赋值,或者取前面页面传过来的参数都可以自动加载。但是通过方法获取再赋值后,web不加载。这个是什么原因?

代码如下

@Component
export struct Portal {
  private context = getContext(this) as common.UIAbilityContext;
  webViewController: webview.WebviewController = new webview.WebviewController();
  [@State](/user/State) url: string = '';
  private backPressedTime: number = 0
  [@State](/user/State) webViewBridge: WebViewBridge = new WebViewBridge(this.webviewController)
  [@State](/user/State) showProgressDialog: boolean = false

  aboutToAppear():void {
    // 检查隐私政策更新状态
    Logger.debug('Portal => about to appear')
    Logger.debug('Portal => param is : ', '' + Router.getRouter(RouterConstants.ENTRY_ROUTER_NAME)
      .getParamByName('Portal'))

    // 这样写wew不会自动加载
    OfflineModuleManage
      .queryModuleUrl(OfflineModuleConstants.OFFLINE_MODULE_HOMEPAGE_MODULE_ID,'/mypage/homepage')
      .then((data:string) => {
        Logger.debug('Portal => queryModuleUrl data is : ' + data)
        this.url = 'xxxxxx/homepage'
        Logger.debug('Portal => queryModuleUrl data is : ' + data)
      })
      .catch((err:BusinessError) => {
        Logger.error(`Portal => queryModuleUrl异常,code is : ${err.code}`, `message is : ${err.message}`)
      })

    // 定义一个eventId为1的事件
    let event: emitter.InnerEvent = {
      eventId: WebConstants.SHOW_PROGRESS_DIALOG_NOTIFICATION_EVENT_ID
    }

    // 收到eventId为1的事件后执行该回调
    let callback = (eventData: emitter.EventData): void => {
      Logger.info('event callback:' + JSON.stringify(eventData));
      this.showProgressDialog = eventData.data?.isShow
    }

    // 订阅eventId为1的事件
    emitter.on(event, callback)

    Logger.debug('路由全路径:' + JSON.stringify(Router.getRouter(RouterConstants.ENTRY_ROUTER_NAME)
      .getAllPathName()))
    Logger.debug('自己记录的路由全路径:' + JSON.stringify(Router.getRouterTrack(RouterConstants.ENTRY_ROUTER_NAME)))
  }

  build() {
    NavDestination() {
      Stack({ alignContent: Alignment.Center }) {
        Web({
          src: this.url,
          controller: this.webviewController
        })
          .javaScriptAccess(true)
          .onControllerAttached(() => {
            Logger.debug('WebBuilder => onControllerAttached')
            WebUtil.registerJavaScriptProxy(this.webviewController)
          })
          .onPageBegin((event) => {
            Logger.debug('WebBuilder => onPageBegin')
          })
          .onInterceptRequest((event) => {
            Logger.debug('WebBuilder => onInterceptRequest : ', '' + event?.request.getRequestUrl())
            return null
          })
          .onPageEnd((event) => {
            Logger.debug('WebBuilder => onPageEnd')
          })
          .onErrorReceive((event) => {
            Logger.debug('WebBuilder => onErrorReceive is : url is : ' + event?.request.getRequestUrl() + ';method is : ' + event?.request.getRequestMethod() + ';header is : ' + event?.request.getRequestHeader())
            Logger.debug('WebBuilder => onErrorReceive code is : ' + event?.error.getErrorCode() + ', info is : ' + event?.error.getErrorInfo())
          })
          .domStorageAccess(true)
          .width('100%')
          .height('100%')

        if (this.showProgressDialog) {
          LoadingLayout()
        }
      }
    }
    .hideTitleBar(true)
    .onBackPressed(() => {
      if (systemDateTime.getTime(false) - this.backPressedTime > 2000) {
        promptAction
          .showToast({
            message: '再按一次退出程序',
            duration: 2000
          })
        this.backPressedTime = systemDateTime.getTime(false)
      } else {
        this.context?.terminateSelf()
      }

      return true
    })
    .onShown(() => {
      Logger.debug('路由全路径:' + JSON.stringify(Router.getRouter(RouterConstants.ENTRY_ROUTER_NAME)
        .getAllPathName()))
      Logger.debug('自己记录的路由全路径:' + JSON.stringify(Router.getRouterTrack(RouterConstants.ENTRY_ROUTER_NAME)))
    })
  }
}

更多关于HarmonyOS 鸿蒙Next中@State url赋值后,web不加载的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

可以通过webviewController.loadUrl()解决。

更多关于HarmonyOS 鸿蒙Next中@State url赋值后,web不加载的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中,使用[@State](/user/State)装饰器声明的url变量赋值后,如果Web组件未加载内容,可能是由于以下原因:

  1. 状态更新未触发UI刷新:[@State](/user/State)装饰的变量在赋值后会自动触发UI刷新,但如果赋值操作未正确触发状态更新,Web组件可能不会重新加载。确保赋值操作是在UI线程中执行的。

  2. Web组件未正确绑定url:检查Web组件的src属性是否与[@State](/user/State)装饰的url变量正确绑定。例如:

    [@State](/user/State) url: string = 'https://example.com';
    build() {
      Web({ src: this.url })
    }
    
  3. url赋值时机问题:如果url在组件初始化后才被赋值,可能需要手动调用this.update()来触发UI刷新。

  4. 网络或URL问题:确保url是有效的网络地址,且设备网络连接正常。无效的URL或网络问题会导致Web组件无法加载内容。

  5. Web组件生命周期问题:Web组件可能未在url赋值后正确加载内容。检查Web组件的生命周期方法,确保其在url更新后重新加载。

  6. 鸿蒙Next版本兼容性:某些鸿蒙Next版本可能存在Web组件加载的兼容性问题,确保使用的是最新版本的鸿蒙Next。

  7. 权限问题:确保应用已获取必要的网络权限,如ohos.permission.INTERNET

如果以上问题均已排查且问题依旧存在,建议检查鸿蒙Next的官方文档或更新日志,确认是否存在已知问题或修复补丁。

在HarmonyOS鸿蒙Next中,@State用于声明状态变量,当url赋值后,Web组件没有加载可能有以下几个原因:

  1. URL格式错误:确保url是有效的URL格式,如http://https://开头。
  2. Web组件未正确使用:确保使用了Web组件,并且src属性绑定到了url状态变量。
  3. 状态更新未触发:确保url的更新触发了UI的重新渲染。
  4. 网络权限:检查是否在config.json中声明了网络权限。

示例代码:

@State url: string = 'https://example.com';

build() {
  Web({ src: this.url })
}

检查上述问题,确保Web组件正确加载。

回到顶部