当前位置：首页 > news >正文

HarmonyOS NEXT——【鸿蒙原生应用加载Web页面】

news 来源：原创 2025/6/6 22:29:36

鸿蒙客户端加载Web页面：

在鸿蒙原生应用中，我们需要使用前端页面做混合开发，方法之一是使用Web组件直接加载前端页面，其中WebView提供了一系列相关的方法适配鸿蒙原生与web之间的使用。

效果

web页面展示：

Column() {
  //this.homeOtherLayoutCJModel.Url
  Web({ src: CommonConstants.ZXUrl, controller: this.controller })
    .height('100%')
    .width('100%')
    .nestedScroll({
      scrollForward: NestedScrollMode.SELF_FIRST,
      scrollBackward: NestedScrollMode.SELF_FIRST,
    })
    .layoutMode(WebLayoutMode.FIT_CONTENT)
    .javaScriptAccess(true)
    .overviewModeAccess(true)
    .multiWindowAccess(true)// 设置是否开启多窗口权限
    .onPageBegin(() => {
    })
    .onWindowNew((event) => {
      Logger.debug('poll', JSON.stringify(event))
      if (event.isAlert == false && event.isUserTrigger) {
        JumpTool.jumpToWebview(event.targetUrl, '新闻详情')
      }
      event.handler.setWebController(null)
    })
}

跳转到WebPage页面

// 跳转webview
static jumpToWebview(url: string, title: string = '') {
  router.pushUrl({
    url: 'pages/WebPage',
    params: {
      url: url,
      title: title
    }
  })
}

WebPage页面代码：

//pages/WebPage.ets
import web_webview from '@ohos.web.webview'
import router from '@ohos.router'
import NavigationHeader from '../view/NavigationHeader'
import { WindowUtils } from '../common/constants/WindowUtils'


@Entrywe
@Component
struct WebPage {
  @StorageLink("statusBarHeight") headerHeight: number = 0
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  params: RouterParamsClass = {} as RouterParamsClass

  aboutToAppear() {
    this.params = router.getParams() as RouterParamsClass
  }

  build() {
    Column() {
      NavigationHeader({
        text: this.params?.title ?? '', isWebPage: true, backAction: () => {
          let backwardIsWeb = this.controller.accessBackward()
          if (backwardIsWeb) {
          //判断如果已经是最外层web，才返回到客户端页面，否则只返回一层web页面
            this.controller.backward()
          } else {
            WindowUtils.getRouter().back()
          }
        }
      })
      Web({ src: this.params.url, controller: this.controller })
        .backgroundColor(Color.White)
        .overviewModeAccess(false)
        .layoutWeight(1)
    }
  }
}

class RouterParamsClass {
  url: string = ''
  title: string = ''
}

嵌套web页面效果：