鸿蒙实现Web组件开发

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.comthis.controller.loadUrl('www.example1.com');} catch (error) {console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);}})// 组件创建时，加载www.example.comWeb({ src: 'www.baidu.com', controller: this.controller})}}
}

3、加载本地页面

<!-- local.html -->
<!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.htmlthis.webviewController.loadUrl($rawfile("index.html"));} catch (error) {console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);}})// 组件创建时，通过$rawfile加载本地文件local.htmlWeb({ 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.comWeb({ 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 = nullbuild() {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);   // 不允许此站点地理位置权限请求}})})}}
}