鴻蒙OS開發實例：【Web網頁】
背景
HarmonyOS平臺通過Web控件可支持網頁加載展示，Web在中是作為專項參考的。
本篇文章將從Android和iOS平臺研發角度出發來實踐學習API功能
說明
- 整個示例是以HarmonyOS開發文檔網址作為加載目標
- 頁面布局增加了三個按鈕“后退”，“前進”， “刷新”
效果
準備
- 請參照
熟讀HarmonyOS Web組件指導
2.創建一個Demo工程，選擇Stage模型。
實踐總結
- UA可以設置，但無法通過API拿到自己設置的UA值
- 文件可以下載，但用戶沒有控制權
- 用戶無法控制定位權限申請
- Web控件當前需要將UA設置為Android或者iOS特征的UA，大部分主流網站沒有適配鴻蒙Web
- 鴻蒙UA特征不明顯 Mozilla/5.0 (X11; Linux aarch64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.88 Mobile Safari/537.36
開始
頁面容器設置為沉浸式
import UIAbility from '@ohos.app.ability.UIAbility';
import hilog from '@ohos.hilog';
import window from '@ohos.window';
export default class EntryAbility extends UIAbility {
onWindowStageCreate(windowStage: window.WindowStage) {
// 1.獲取應用主窗口。
let windowClass: window.Window = null;
windowStage.getMainWindow((err, data) = > {
if (err.code) {
console.error('Failed to obtain the main window. Cause: ' + JSON.stringify(err));
return;
}
windowClass = data;
console.info('Succeeded in obtaining the main window. Data: ' + JSON.stringify(data));
// 2.實現沉浸式效果：設置導航欄、狀態欄顯示。
windowClass.setWindowSystemBarEnable(['status','navigation'], (err) = > {
if (err.code) {
console.error('Failed to set the system bar to be visible. Cause:' + JSON.stringify(err));
return;
}
console.info('Succeeded in setting the system bar to be visible.');
});
})
//獲取當前應用內最后顯示的窗口，使用callback異步回調
window.getLastWindow(this.context).then((result: window.Window) = > {
result.setWindowSystemBarEnable(['status', 'navigation'])
result.setWindowLayoutFullScreen(true);
})
windowStage.loadContent('pages/Index', (err, data) = > {
if (err.code) {
hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
return;
}
hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
});
}
}
創建WebView組件
文件路徑
根目錄/ets/entry/src/main/pages/WebView.ts
注冊頁面 main_pages.json
{
"src": [
"pages/Index"
,"pages/WebView"
]
}
功能實現
Cookie管理指導
網頁調試
功能介紹
- 支持多窗口
- 多窗口返回關閉
- 加載進度提示
- 警告框，確認框，提示框
- 權限申請
- 輸出調試日志
- 非http或https協議攔截
import web_webview from '@ohos.web.webview';
import router from '@ohos.router';
import common from '@ohos.app.ability.common';
import Url from '@ohos.url'
web_webview.once("webInited", () = > {
console.log("setCookie")
web_webview.WebCookieManager.setCookie("https://developer.harmonyos.com/", "author=harvey")
})
//在同一page頁有兩個web組件。在WebComponent新開窗口時，會跳轉到NewWebViewComp。
@CustomDialog
struct NewWebViewComp {
private controller?: CustomDialogController
private webviewController: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: "", controller: this.webviewController })
.javaScriptAccess(true)
.multiWindowAccess(false)
.domStorageAccess(true)
.onWindowExit(() = > {
console.info("NewWebViewComp onWindowExit")
if (this.controller) {
this.controller.close()
}
})
}
}
}
@Entry
@Component
struct Index {
//www.useragentinfo.com
// @State webURL: string = 'https://m.bilibili.com/' //'https://developer.harmonyos.com/'
// @State webURL: string = 'https://www.baidu.com'
@State webURL: string = 'https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/start-overview-0000001478061421-V3?catalogVersion=V3'
@State back: boolean = true
@State forward: boolean = false
@State showProgress: boolean = false
@State currentProgress: number = 0
@State buttonColorFocusColor: number = Color.Black
@State buttonColorDisableColor: number = Color.Gray
@State currentButtonColor: number = this.buttonColorFocusColor
private webviewController: web_webview.WebviewController = new web_webview.WebviewController();
private context = getContext(this) as common.UIAbilityContext;
dialogController: CustomDialogController | null = null
aboutToAppear() {
web_webview.WebviewController.setWebDebuggingAccess(true)
let params = router.getParams()
if (params) {
this.webURL = params['targetUrl'];
}
}
build() {
Column() {
Stack() {
Web({ src: this.webURL, controller: this.webviewController })
.width('100%')
.height('100%')
.userAgent('Mozilla/5.0 (Linux; Android 8.0.0; SM-G955U Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Mobile Safari/537.36 HarveyHarmonyOS/1.0.0')
.multiWindowAccess(true)
.javaScriptAccess(true)
.geolocationAccess(true)
.imageAccess(true)
.onlineImageAccess(true)
.domStorageAccess(true)
.fileAccess(true)
.mediaPlayGestureAccess(true)
.mixedMode(MixedMode.Compatible)
.onTitleReceive((info) = > {
console.log('標題欄: ' + info.title)
})
.onProgressChange((progress) = > {
console.log('當前加載進度 ' + progress.newProgress)
this.currentProgress = progress.newProgress
if (progress.newProgress >= 0 && progress.newProgress < 100) {
this.showProgress = true
} else if (progress.newProgress == 100) {
this.showProgress = false
}
if (this.webviewController.accessForward()) {
this.forward = true
this.currentButtonColor = this.buttonColorFocusColor
} else {
this.forward = false
this.currentButtonColor = this.buttonColorDisableColor
}
console.log('userAgent: ' + this.webviewController.getUserAgent())
})
.onErrorReceive((error) = > {
console.log(error.request.getRequestUrl())
console.log(JSON.stringify(error.error))
})
.onHttpErrorReceive((error) = > {
console.log(JSON.stringify(error.response))
})
.onSslErrorEventReceive((info) = > {
})
.onRenderExited(() = > {
console.log('onRenderExited')
})
.onUrlLoadIntercept((info) = > {
if(!info.data.toString().toLowerCase().startsWith("https://") || !info.data.toString().toLowerCase().startsWith("https://")){
console.log('攔截信息: ' + JSON.stringify(info))
return true;
}
console.log('信息: ' + JSON.stringify(info))
//false : 不攔截 true: 攔截
return false
})
.onDownloadStart( (event) = > {
AlertDialog.show({
title: event.url,
message: event.url,
primaryButton: {
value: 'cancel',
action: () = > {
}
}
})
})
.onAlert((event) = > {
AlertDialog.show({
title: event.url,
message: event.message,
confirm: {
value: 'onAlert',
action: () = > {
event.result.handleConfirm()
}
},
cancel: () = > {
event.result.handleCancel()
}
})
return true
})
.onConfirm((event) = > {
AlertDialog.show({
title: event.url,
message: event.message,
confirm: {
value: 'onConfirm',
action: () = > {
event.result.handleConfirm()
}
},
cancel: () = > {
event.result.handleCancel()
}
})
return true;
})
.onPrompt((event) = > {
AlertDialog.show({
title: event.url,
message: event.message,
primaryButton: {
value: 'cancel',
action: () = > {
event.result.handleCancel()
}
},
secondaryButton: {
value: 'ok',
action: () = > {
event.result.handleConfirm()
}
},
cancel: () = > {
event.result.handleCancel()
}
})
return true;
})
.onConsole((msg) = > {
console.error('網頁日志：' + JSON.stringify(msg.message.getMessage()))
return true
})
.onWindowNew((event) = > {
console.log('新開window')
if (!event.isAlert) {
router.pushUrl({ url: 'custompages/WebView', params: {
"targetUrl": event.targetUrl
} })
.then(() = > {
console.info('Succeeded in jumping to the second page.')
}).catch((error) = > {
console.log(error)
})
} else {
if (this.dialogController) {
this.dialogController.close()
}
let popController: web_webview.WebviewController = new web_webview.WebviewController()
this.dialogController = new CustomDialogController({
builder: NewWebViewComp({ webviewController: popController })
})
this.dialogController.open()
//將新窗口對應WebviewController返回給Web內核。
//如果不需要打開新窗口請調用event.handler.setWebController接口設置成null。
//若不調用event.handler.setWebController接口，會造成render進程阻塞。
event.handler.setWebController(popController)
}
})
.onWindowExit(() = > {
console.log('已推出window')
})
.onGeolocationHide(() = > {
console.log('geo隱藏')
})
.onGeolocationShow((info) = > {
info.geolocation.invoke(info.origin, false, false)
console.log(info.origin + ' 有定位需求')
})
.onPageBegin((info) = > {
console.error(info.url)
let host = Url.URL.parseURL(info.url).host
try {
let cookie = web_webview.WebCookieManager.getCookie(host)
console.log('Bcookie: ' + cookie)
} catch (e) {
console.error(e)
}
})
.onPageEnd((info) = > {
let host = Url.URL.parseURL(info.url).host
try {
let cookie = web_webview.WebCookieManager.getCookie(host)
console.log('Bcookie: ' + cookie)
} catch (e) {
console.error(e + ' ' + info.url)
}
})
.onBeforeUnload((info) = > {
return false
})
.onRefreshAccessedHistory((info) = > {
})
.onResourceLoad(() = > {
})
.onFullScreenEnter((info) = > {
})
.onFullScreenExit(() = > {
})
.onPermissionRequest((event) = > {
AlertDialog.show({
title: 'title',
message: event.request.getAccessibleResource()[0],
primaryButton: {
value: 'deny',
action: () = > {
event.request.deny()
}
},
secondaryButton: {
value: 'onConfirm',
action: () = > {
event.request.grant(event.request.getAccessibleResource())
}
},
cancel: () = > {
event.request.deny()
}
})
})
.onInterceptKeyEvent((info) = > {
console.log(info.keyCode + ' ' + info.keyText)
return false
})
.onPageVisible((info) = > {
console.log(info.url)
})
if (this.showProgress) {
Progress({ value: this.currentProgress, total: 100, type: ProgressType.Linear })
.width('100%').height(45)
}
}.height('93%').alignContent(Alignment.TopStart)
Row() {
Text('后退')
.fontSize(18)
.enabled(this.back)
.onClick(() = > {
if (this.webviewController.accessBackward()) {
this.webviewController.backward()
} else {
if ("1" === router.getLength()) {
this.context.terminateSelf()
} else {
router.back()
}
}
})
.width('30%')
.height('100%')
.textAlign(TextAlign.Center)
Text('前進')
.fontSize(18)
.fontColor(this.currentButtonColor)
.onClick(() = > {
if (this.webviewController.accessForward()) {
this.webviewController.forward()
}
})
.width('30%')
.height('100%')
.textAlign(TextAlign.Center)
Text('刷新')
.fontSize(18)
.fontColor(Color.Black)
.onClick(() = > {
this.webviewController.refresh()
})
.width('30%')
.height('100%')
.textAlign(TextAlign.Center)
}.width('100%').height('5%')
.backgroundColor(Color.White)
.justifyContent(FlexAlign.SpaceBetween)
}.width('100%').height('100%')
.padding({ top: px2vp(111) })
}
}
審核編輯 黃宇
聲明：本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人，不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用，如有內容侵權或者其他違規問題，請聯系本站處理。
舉報投訴
-
Web
+關注
關注
2文章
1262瀏覽量
69441 -
鴻蒙
+關注
關注
57文章
2339瀏覽量
42805 -
HarmonyOS
+關注
關注
79文章
1973瀏覽量
30143 -
鴻蒙OS
+關注
關注
0文章
188瀏覽量
4382
發布評論請先 登錄
相關推薦
鴻蒙開發基礎-Web組件之cookie操作
})
...
}
...
本文章主要是對鴻蒙開發當中ArkTS語言的基礎應用實戰，Web組件里的cookie操作。更多的鴻蒙應用開發技
發表于 01-14 21:31
鴻蒙原生應用/元服務實戰-Web隱私聲明
這個位置的隱私申明是需要在WEB網頁下完成的，ArkTS鴻蒙原生應用與元服務開發者，不一定熟悉這塊，一些公司也不一定有自己的服務器和域名、網站網頁
發表于 01-24 15:05
鴻蒙OS應用程序開發
這份學習文檔主要是帶領大家在鴻蒙OS上學習開發一個應用程序，主要知識點如下：1、U-Boot引導文件燒寫方式；2、內核鏡像燒寫方式；3、鏡像運行。
發表于 09-11 14:39
Nodemcu web網頁顯示簡介
Nodemcu-0.96oled-dht11-web網頁顯示簡介1.軟件部分Arduino IDE2.硬件部分NodeMCUOLEDDHT113.知識點Web開發Arduino IDE
發表于 11-01 07:34
鴻蒙 OS 應用開發初體驗
的操作系統平臺和開發框架。HarmonyOS 的目標是實現跨設備的無縫協同和高性能。
DevEco Studio
對標 Android Studio，開發鴻蒙 OS 應用的 IDE。
發表于 11-02 19:38
華為鴻蒙OS 2.0帶來哪些智慧體驗？
華為已經定于12月16日在北京發布鴻蒙OS 2.0手機開發者Beta版本。這不僅是手機鴻蒙OS的首次亮相，同時也意味著手機
鴻蒙OS 2.0手機開發者Beta版發布會在京舉辦
三個月前，鴻蒙OS 2.0正式在華為開發者大會2020亮相。12月16日，鴻蒙OS 2.0手機開發
華為正式推出鴻蒙OS的手機開發者Beta版
12月16日上午消息，華為今日宣布正式推出鴻蒙OS的手機開發者Beta版，華為消費者業務軟件部總裁王成錄表示，今年已有美的、九陽、老板電器、海雀科技搭載鴻蒙
華為開發者大會2021鴻蒙os在哪場
華為開發者大會2021將在10月22日-24日舉辦，地點為東莞松山湖，鴻蒙os 3.0或將與我們見面，那么華為開發者大會2021鴻蒙
通過Web網頁控制開發板LED燈
接下來將介紹如何通過Web網頁來控制開發板上的LED燈，本文只是在網頁上實現功能，并無交互功能，與開發板的交互功能實現將在《
web前端開發和前端開發的區別
、CSS和JavaScript等技術來構建用戶界面，實現用戶與應用程序的交互。Web前端開發包括網頁設計、網頁編碼、前端框架使用以及優化頁面性能等任務。 前端
工商網監
評論