鴻蒙客戶端加載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頁面效果：
