鸿蒙实现Web组件开辟

惊雷无声 · 2024-12-11 08:35:22

1、简介&使用场景

Web是一种基于互联网的技术和资源的网络服务体系。它是指由许多互连的计算机组成的环球性计算机网络，使用户能够通过欣赏器访问和交互式使用各种信息和资源，如网页、文档、图片、视频、音频等。通过Web，用户可以欣赏网页、发送电子邮件、参与在线社交网络、进行在线购物等各种运动。Web的焦点技术包括超文本传输协议（HTTP），超文本标记语言（HTML）和同一资源定位器（URL）。
使用场景：
鸿蒙的应用有时需要集成别的项目H5等入口页面，如html等大概是网络所在的形式；这个就需要使用到鸿蒙加载html页面大概网络所在等。
2、加载网络页面

"requestPermissions": [
{
"name": "ohos.permission.INTERNET" // 使用网络权限
}
]

复制代码

import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Button('愚公博客首页')
.onClick(() => {
try {
// 点击按钮时，通过loadUrl，跳转到www.example1.com
this.controller.loadUrl('www.example1.com');
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
// 组件创建时，加载www.example.com
Web({ src: 'www.baidu.com', controller: this.controller})
}
}
}

复制代码

3、加载本地页面

<!DOCTYPE html>
<html>
<body>
<p>Hello World</p>
</body>
</html>

复制代码

// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
webviewController: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('loadUrl')
.onClick(() => {
try {
// 点击按钮时，通过loadUrl，跳转到local1.html
this.webviewController.loadUrl($rawfile("index.html"));
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
// 组件创建时，通过$rawfile加载本地文件local.html
Web({ src: $rawfile("index.html"), controller: this.webviewController })
}
}
}

复制代码

4、加载HTML格式的文本数据

// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('loadData')
.onClick(() => {
try {
// 点击按钮时，通过loadData，加载HTML格式的文本数据
this.controller.loadData(
"<html><body bgcolor="white">Source:<pre>source</pre></body></html>",
"text/html",
"UTF-8"
);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
// 组件创建时，加载www.example.com
Web({ src: 'www.example.com', controller: this.controller })
}
}
}

复制代码

5、设置深色模式

通过darkMode()接口可以设置不同的深色模式。

WebDarkMode.Off模式表现关闭深色模式。
WebDarkMode.On表现开启深色模式，且深色模式跟随前端页面。
WebDarkMode.Auto表现开启深色模式，且深色模式跟随体系。
forceDarkAccess()接口可将前端页面强制设置深色模式，且深色模式不跟随前端页面和体系。设置该模式时候，需要将深色模式设置成WebDarkMode.On。

// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
@State mode: WebDarkMode = WebDarkMode.On;
@State access: boolean = true;
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.darkMode(this.mode)
.forceDarkAccess(this.access)
}
}
}

复制代码

6、上传文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
// 点击文件上传按钮
<input type="file" value="file"></br>
</body>
</html>

复制代码

// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
// 加载本地local.html页面
Web({ src: $rawfile('index.html'), controller: this.controller })
.onShowFileSelector((event) => {
// 开发者设置要上传的文件路径
let fileList: Array<string> = [
'xxx/test.png',
]
event.result.handleFileList(fileList)
return true;
})
}
}
}

复制代码

7、在新窗口中打开页面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WindowEvent</title>
</head>
<body>
<input type="button" value="新窗口中打开网页" onclick="OpenNewWindow()">
<script type="text/javascript">
function OpenNewWindow()
{
let openedWindow = window.open("about:blank", "", "location=no,status=no,scrollvars=no");
openedWindow.document.write("<p>这是我的新窗口</p>");
openedWindow.focus();
}
</script>
</body>
</html>

复制代码

开辟者可以使用multiWindowAccess()接口来设置网页是否可以在新窗口中打开。通过调用此接口并传入相应的参数，可以控制网页是否允许使用新窗口。
当网页请求在新窗口中打开时，应用将收到Web组件的新窗口事件，可以通过onWindowNew()接口来处理此事件。在此接口中，开辟者可以根据需要创建新的窗口来处理Web组件的窗口请求。

// xxx.ets
import web_webview from '@ohos.web.webview'
//在同一page页有两个web组件。在WebComponent新开窗口时，会跳转到NewWebViewComp。
@CustomDialog
struct NewWebViewComp {
controller?: CustomDialogController
webviewController1: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: "", controller: this.webviewController1 })
.javaScriptAccess(true)
.multiWindowAccess(false)
.onWindowExit(()=> {
console.info("NewWebViewComp onWindowExit")
if (this.controller) {
this.controller.close()
}
})
}
}
}
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
dialogController: CustomDialogController | null = null
build() {
Column() {
Web({ src:$rawfile("window.html"), controller: this.controller })
.javaScriptAccess(true)
//需要使能multiWindowAccess
.multiWindowAccess(true)
.allowWindowOpenMethod(true)
.onWindowNew((event) => {
if (this.dialogController) {
this.dialogController.close()
}
let popController:web_webview.WebviewController = new web_webview.WebviewController()
this.dialogController = new CustomDialogController({
builder: NewWebViewComp({webviewController1: popController})
})
this.dialogController.open()
//将新窗口对应WebviewController返回给Web内核。
//如果不需要打开新窗口请调用event.handler.setWebController接口设置成null。
//若不调用event.handler.setWebController接口，会造成render进程阻塞。
event.handler.setWebController(popController)
})
}
}
}

复制代码

8、管理位置权限

<!DOCTYPE html>
<html>
<body>
<p id="locationInfo">位置信息</p>
<button onclick="getLocation()">获取位置</button>
<script>
var locationInfo=document.getElementById("locationInfo");
function getLocation(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
}
function showPosition(position){
locationInfo.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>

复制代码

// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Web({ src:$rawfile('getLocation.html'), controller:this.controller })
.geolocationAccess(true)
.onGeolocationShow((event) => { // 地理位置权限申请通知
AlertDialog.show({
title: '位置权限请求',
message: '是否允许获取位置信息',
primaryButton: {
value: 'cancel',
action: () => {
event.geolocation.invoke(event.origin, false, false); // 不允许此站点地理位置权限请求
}
},
secondaryButton: {
value: 'ok',
action: () => {
event.geolocation.invoke(event.origin, true, false); // 允许此站点地理位置权限请求
}
},
cancel: () => {
event.geolocation.invoke(event.origin, false, false); // 不允许此站点地理位置权限请求
}
})
})
}
}
}

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

鸿蒙实现Web组件开辟

0 个回复

快速回复

楼主热帖

标签云