HarmonyOS应用开辟Web组件基本属性应用和事故

tsx81429  论坛元老 | 2024-6-13 18:40:09 | 来自手机 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1009|帖子 1009|积分 3027

一、Web 组件概述
Web 组件用于在应用步调中体现 Web 页面内容，为开辟者提供页面加载、页面交互、页面调试等能力。
● 页面加载：Web 组件提供底子的前端页面加载的能力，包括加载网络页面、当地页面、Html 格式文本数据。
● 页面交互：Web 组件提供丰富的页面交互的方式，包括：设置前端页面深色模式，新窗口中加载页面，位置权限管理，Cookie 管理，应用侧使用前端页面 JavaScript 等能力。
● 页面调试：Web 组件支持使用 Devtools 工具调试前端页面。
下面通过常见使用场景举例，来详细介绍 Web 组件功能特性。
二、使用 Web 组件加载页面
页面加载是 Web 组件的基本功能。根据页面加载数据泉源可以分为三种常用场景，包括加载网络页面、加载当地页面、加载 HTML 格式的富文本数据。
页面加载过程中，若涉及网络资源获取，需要配置ohos.permission.INTERNET网络访问权限。
加载网络页面
开辟者可以在 Web 组件创建的时候指定默认加载的网络页面 。在默认页面加载完成后，如果开辟者需要变动此 Web 组件体现的网络页面，可以通过调用loadUrl()接口加载指定网络网页。
在下面的示例中，在 Web 组件加载完“www.example.com”页面后，开辟者可通过 loadUrl 接口将此 Web 组件体现页面变动为
  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview';
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  9.   build() {
  10.     Column() {
  11.       Button('loadUrl')
  12.         .onClick(() => {
  13.           try {
  14.             // 点击按钮时，通过loadUrl，跳转到www.example1.com
  15.             this.webviewController.loadUrl('www.example1.com');
  16.           } catch (error) {
  17.             console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
  18.           }
  19.         })
  20.       // 组件创建时，加载www.example.com
  21.       Web({ src: 'www.example.com', controller: this.webviewController})
  22.     }
  23.   }
  24. }
复制代码
加载当地页面
将当地页面文件放在应用的 rawfile 目次下，开辟者可以在 Web 组件创建的时候指定默认加载的当地页面 ，并且加载完成后可通过调用loadUrl()接口变动当前 Web 组件的页面。
在下面的示例中展示加载当地页面文件的方法：
● 将资源文件放置在应用的 resources/rawfile 目次下。图 1 资源文件路径

● 应用侧代码
  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview';
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  9.   build() {
  10.     Column() {
  11.       Button('loadUrl')
  12.         .onClick(() => {
  13.           try {
  14.             // 点击按钮时，通过loadUrl，跳转到local1.html
  15.             this.webviewController.loadUrl($rawfile("local1.html"));
  16.           } catch (error) {
  17.             console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
  18.           }
  19.         })
  20.       // 组件创建时，通过$rawfile加载本地文件local.html
  21.       Web({ src: $rawfile("local.html"), controller: this.webviewController })
  22.     }
  23.   }
  24. }
复制代码
● local.html 页面代码。
  1. <!-- local.html -->
  2. <!DOCTYPE html>
  3. <html>
  4.   <body>
  5.     <p>Hello World</p>
  6.   </body>
  7. </html>
复制代码
加载 HTML 格式的文本数据
Web 组件可以通过loadData接口实现加载 HTML 格式的文本数据。当开辟者不需要加载整个页面，只需要体现一些页面片断时，可通过此功能来快速加载页面。
  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview';
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController();
  9.   build() {
  10.     Column() {
  11.       Button('loadData')
  12.         .onClick(() => {
  13.           try {
  14.             // 点击按钮时，通过loadData，加载HTML格式的文本数据
  15.             this.controller.loadData(
  16.               '<html><body bgcolor="white">Source:<pre>source</pre></body></html>',
  17.               'text/html',
  18.               'UTF-8'
  19.             );
  20.           } catch (error) {
  21.             console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
  22.           }
  23.         })
  24.       // 组件创建时，加载www.example.com
  25.       Web({ src: 'www.example.com', controller: this.controller })
  26.     }
  27.   }
  28. }
复制代码
三、设置基本属性和事故
设置深色模式
Web 组件支持对前端页面举行深色模式配置。
● 通过darkMode()接口可以配置不同的深色模式，WebDarkMode.Off模式体现关闭深色模式。[WebDarkMode.On]体现开启深色模式，并且深色模式跟随前端页面。WebDarkMode.Auto体现开启深色模式，并且深色模式跟随系统。在下面的示例中, 通过darkMode()接口将页面深色模式配置为跟随系统。
  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview';
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController();
  8.   @State mode: WebDarkMode = WebDarkMode.Auto;
  9.   build() {
  10.     Column() {
  11.       Web({ src: 'www.example.com', controller: this.controller })
  12.         .darkMode(this.mode)
  13.     }
  14.   }
  15. }
复制代码
● 通过forceDarkAccess()接口可将前端页面逼迫配置深色模式，且深色模式不跟随前端页面和系统。配置该模式时候，需要将深色模式配置成 WebDarkMode.On。在下面的示例中, 通过forceDarkAccess()接口将页面逼迫配置为深色模式。
  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview';
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController();
  8.   @State mode: WebDarkMode = WebDarkMode.On;
  9.   @State access: boolean = true;
  10.   build() {
  11.     Column() {
  12.       Web({ src: 'www.example.com', controller: this.controller })
  13.         .darkMode(this.mode)
  14.         .forceDarkAccess(this.access)
  15.     }
  16.   }
  17. }
复制代码
上传文件
Web 组件支持前端页面选择文件上传功能，应用开辟者可以使用onShowFileSelector()接口来处理前端页面文件上传的哀求。
下面的示例中，当用户在前端页面点击文件上传按钮，应用侧在onShowFileSelector()接口中收到文件上传哀求，在此接口中开辟者将上传的当地文件路径设置给前端页面。
● 应用侧代码。
  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview';
  3. @Entry
  4. @Component
  5. struct WebComponent {
  6.   controller: WebController = new WebController()
  7.   build() {
  8.     Column() {
  9.       // 加载本地local.html页面
  10.       Web({ src: $rawfile('local.html'), controller: this.controller })
  11.         .onShowFileSelector((event) => {
  12.             // 开发者设置要上传的文件路径
  13.            let fileList: Array<string> = [
  14.               'xxx/test.png',
  15.            ]
  16.            event.result.handleFileList(fileList)
  17.            return true;
  18.         })
  19.     }
  20.   }
  21. }
复制代码
●local.html页面代码。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Document</title>
  6. </head>
  8. <body>
  9. // 点击文件上传按钮
  10. <input type="file" value="file"></br>
  11. </body>
  12. </html>
复制代码
在新窗口中打开页面
Web 组件提供了在新窗口打开页面的能力，开辟者可以通过multiWindowAccess()接口来设置是否允许网页在新窗口打开。当有新窗口打开时，应用侧会在onWindowNew()接口中收到 Web 组件新窗口事故，开辟者需要在此接口事故中，新建窗口来处理 Web 组件窗口哀求。
说明
● 如果开辟者在onWindowNew()接口关照中不需要打开新窗口，需要将ControllerHandler.setWebController()接口返回值设置成 null。
如下面的当地示例，当用户点击“新窗口中打开网页”按钮时，应用侧会在onWindowNew()接口中收到 Web 组件新窗口事故。
● 应用侧代码。
  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview';
  3. @Entry
  4. @Component
  5. struct WebComponent {
  6.   controller: web_webview.WebviewController = new web_webview.WebviewController();
  7.   build() {
  8.     Column() {
  9.       Web({ src:$rawfile("window.html"), controller: this.controller })
  10.       .multiWindowAccess(true)
  11.       .onWindowNew((event) => {
  12.         console.info("onWindowNew...");
  13.         var popController: web_webview.WebviewController = new web_webview.WebviewController();
  14.         // 开发者需要在此处新建窗口,跟popController关联，并且将popController返回给Web组件。如果不需要打开新窗口请将返回值设置为event.handler.setWebController(null);
  15.         event.handler.setWebController(popController);
  16.       })
  17.     }
  18.   }
  19. }
复制代码
● window.html 页面代码。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>WindowEvent</title>
  6. </head>
  8. <body>
  9. <input type="button" value="新窗口中打开网页" onclick="OpenNewWindow()">
  10. <script type="text/javascript">
  11.     function OpenNewWindow()
  12.     {
  13.         let openedWindow = window.open("about:blank", "", "location=no,status=no,scrollvars=no");
  14.         if (openedWindow) {
  15.             openedWindow.document.body.write("<p>这是我的窗口</p>");
  16.         } else {
  17.             log.innerHTML = "window.open failed";
  18.         }
  19.     }
  20. </script>
  21. </body>
  22. </html>
复制代码
管理位置权限
Web 组件提供位置权限管理能力。开辟者可以通过onGeolocationShow()接口对某个网站举行位置权限管理。Web 组件根据接口相应结果，决定是否赋予前端页面权限。获取设备位置，需要开辟者配置ohos.permission.LOCATION权限。
在下面的示例中，用户点击前端页面"获取位置"按钮，Web 组件通过弹窗的情势关照应用侧位置权限哀求消息，示例代码如下：
● 前端页面代码。
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <p id="locationInfo">位置信息</p>
  5. <button onclick="getLocation()">获取位置</button>
  6. <script>
  7. var locationInfo=document.getElementById("locationInfo");
  8. function getLocation(){
  9.   if (navigator.geolocation) {
  10.     <!-- 前端页面访问设备地理位置 -->
  11.     navigator.geolocation.getCurrentPosition(showPosition);
  12.   }
  13. }
  14. function showPosition(position){
  15.   locationInfo.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;
  16. }
  17. </script>
  18. </body>
  19. </html>
复制代码
● 应用代码。
  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview';
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController();
  8.   build() {
  9.     Column() {
  10.       Web({ src:$rawfile('getLocation.html'), controller:this.controller })
  11.         .geolocationAccess(true)
  12.         .onGeolocationShow((event) => {  // 地理位置权限申请通知
  13.           AlertDialog.show({
  14.             title: '位置权限请求',
  15.             message: '是否允许获取位置信息',
  16.             primaryButton: {
  17.               value: 'cancel',
  18.               action: () => {
  19.                 event.geolocation.invoke(event.origin, false, false);   // 不允许此站点地理位置权限请求
  20.               }
  21.             },
  22.             secondaryButton: {
  23.               value: 'ok',
  24.               action: () => {
  25.                 event.geolocation.invoke(event.origin, true, false);    // 允许此站点地理位置权限请求
  26.               }
复制代码
末了在这里分享一份《鸿蒙（HarmonyOS）开辟学习指南》，需要的朋友可以扫码免费领取！！！
《鸿蒙（HarmonyOS）开辟学习指南》

第一章 快速入门
1、开辟预备
2、构建第一个ArkTS应用（Stage模子）
3、构建第一个ArkTS应用（FA模子）
4、构建第一个JS应用（FA模子）
5、…

第二章 开辟底子知识
1、应用步调包底子知识
2、应用配置文件（Stage模子）
3、应用配置文件概述（FA模子）
4、…

第三章 资源分类与访问
1、 资源分类与访问
2、 创建资源目次和资源文件
3、 资源访问
4、…

第四章 学习ArkTs语言
1、初识ArkTS语言
2、基本语法
3、状态管理
4、其他状态管理
5、渲染控制
6、…

第五章 UI开辟
1.方舟开辟框架（ArkUI）概述
2.基于ArkTS声明式开辟范式
3.兼容JS的类Web开辟范式
4…

第六章 Web开辟
1.Web组件概述
2.使用Web组件加载页面
3.设置基本属性和事故
4.在应用中使用前端页面JavaScript
5.ArkTS语言底子类库概述
6.并发
7…

11.网络与毗连
12.电话服务
13.数据管理
14.文件管理
15.背景任务管理
16.设备管理
17…

第七章 应用模子
1.应用模子概述
2.Stage模子开辟指导
3.FA模子开辟指导
4…

扫描下方二维码免费领取，《鸿蒙（HarmonyOS）开辟学习指南》


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

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

tsx81429

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表