鸿蒙客户端加载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页面效果: