鸿蒙客户端加载Web页面：

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

效果

web页面展示：

Column() {//this.homeOtherLayoutCJModel.UrlWeb({ 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 = 0controller: 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页面效果：