harmony 鸿蒙组件描述

2025-06-12
浏览 (4)

组件描述

提供具有网页显示能力的Web组件，@ohos.web.webview提供web控制能力。

说明：

该组件从API version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

示例效果请以真机运行为准，当前DevEco Studio预览器不支持。

需要权限

访问在线网页时需添加网络权限：ohos.permission.INTERNET，具体申请方式请参考声明权限。

子组件

无

接口

Web(value: WebOptions)

说明：

不支持转场动画。

同一页面的多个Web组件，必须绑定不同的WebviewController。

系统能力： SystemCapability.Web.Webview.Core

参数：

参数名	类型	必填	说明
value	WebOptions	是	定义Web选项。

示例：

加载在线网页。

  // xxx.ets
  import { webview } from '@kit.ArkWeb';

  @Entry
  @Component
  struct WebComponent {
    controller: webview.WebviewController = new webview.WebviewController();

    build() {
      Column() {
        Web({ src: 'www.example.com', controller: this.controller })
      }
    }
  }

隐私模式Webview加载在线网页。

  // xxx.ets
  import { webview } from '@kit.ArkWeb';

  @Entry
  @Component
  struct WebComponent {
    controller: webview.WebviewController = new webview.WebviewController();

    build() {
      Column() {
        Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
      }
    }
  }

Web组件同步渲染模式。

  // xxx.ets
  import { webview } from '@kit.ArkWeb';

  @Entry
  @Component
  struct WebComponent {
    controller: webview.WebviewController = new webview.WebviewController();

    build() {
      Column() {
        Web({ src: 'www.example.com', controller: this.controller, renderMode: RenderMode.SYNC_RENDER })
      }
    }
  }

Web组件指定共享渲染进程。

  // xxx.ets
  import { webview } from '@kit.ArkWeb';

  @Entry
  @Component
  struct WebComponent {
    controller: webview.WebviewController = new webview.WebviewController();

    build() {
      Column() {
        Web({ src: 'www.example.com', controller: this.controller, sharedRenderProcessToken: "111" })
        Web({ src: 'www.w3.org', controller: this.controller, sharedRenderProcessToken: "111" })
      }
    }
  }

加载本地网页。

通过$rawfile方式加载。

  // xxx.ets
  import { webview } from '@kit.ArkWeb';

  @Entry
  @Component
  struct WebComponent {
    controller: webview.WebviewController = new webview.WebviewController();

    build() {
      Column() {
        // 通过$rawfile加载本地资源文件。
        Web({ src: $rawfile("index.html"), controller: this.controller })
      }
    }
  }

通过resources协议加载，适用Webview加载带有”#“路由的链接。

使用 resource://rawfile/ 协议前缀可以避免常规 $rawfile 方式在处理带有”#“路由链接时的局限性。当URL中包含”#“号时，”#“后面的内容会被视为锚点（fragment）。

  // xxx.ets
  import { webview } from '@kit.ArkWeb';

  @Entry
  @Component
  struct WebComponent {
    controller: webview.WebviewController = new webview.WebviewController();

    build() {
      Column() {
        // 通过resource协议加载本地资源文件。
        Web({ src: "resource://rawfile/index.html#home", controller: this.controller })
      }
    }
  }

在“src\main\resources\rawfile”文件夹下创建index.html：

<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<div id="content"></div>

<script>
	function loadContent() {
	  var hash = window.location.hash;
	  var contentDiv = document.getElementById('content');

	  if (hash === '#home') {
		contentDiv.innerHTML = '<h1>Home Page</h1><p>Welcome to the Home Page!</p>';
	  } else {
		contentDiv.innerHTML = '<h1>Default Page</h1><p>This is the default content.</p>';
	  }
	}

	// 加载界面
	window.addEventListener('load', loadContent);

	// 当hash变化时，更新界面
	window.addEventListener('hashchange', loadContent);
</script>
</body>
</html>

加载沙箱路径下的本地资源文件，需要开启应用中文件系统的访问fileAccess权限。

通过构造的单例对象GlobalContext获取沙箱路径。

   // GlobalContext.ets
   export class GlobalContext {
     private constructor() {}
     private static instance: GlobalContext;
     private _objects = new Map<string, Object>();

     public static getContext(): GlobalContext {
       if (!GlobalContext.instance) {
         GlobalContext.instance = new GlobalContext();
       }
       return GlobalContext.instance;
     }

     getObject(value: string): Object|undefined {
       return this._objects.get(value);
     }

     setObject(key: string, objectClass: Object): void {
       this._objects.set(key, objectClass);
     }
   }

   // xxx.ets
   import { webview } from '@kit.ArkWeb';
   import { GlobalContext } from '../GlobalContext';

   let url = 'file://' + GlobalContext.getContext().getObject("filesDir") + '/index.html';

   @Entry
   @Component
   struct WebComponent {
     controller: webview.WebviewController = new webview.WebviewController();

     build() {
       Column() {
         // 加载沙箱路径文件。
         Web({ src: url, controller: this.controller })
         .fileAccess(true)
       }
     }
   }

修改EntryAbility.ets。

以filesDir为例，获取沙箱路径。若想获取其他路径，请参考应用文件路径。

   // xxx.ets
   import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
   import { webview } from '@kit.ArkWeb';
   import { GlobalContext } from '../GlobalContext';

   export default class EntryAbility extends UIAbility {
     onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
       // 通过在GlobalContext对象上绑定filesDir，可以实现UIAbility组件与UI之间的数据同步。
       GlobalContext.getContext().setObject("filesDir", this.context.filesDir);
       console.log("Sandbox path is " + GlobalContext.getContext().getObject("filesDir"));
     }
   }

加载的html文件。

   <!-- index.html -->
   <!DOCTYPE html>
   <html>
       <body>
           <p>Hello World</p>
       </body>
   </html>

你可能感兴趣的鸿蒙文章

harmony 鸿蒙ArkWeb（方舟Web）

harmony 鸿蒙ArkWeb_AnyNativeAPI

harmony 鸿蒙ArkWeb_ComponentAPI

harmony 鸿蒙ArkWeb_ControllerAPI

harmony 鸿蒙ArkWeb_CookieManagerAPI

harmony 鸿蒙ArkWeb_JavaScriptBridgeData

harmony 鸿蒙ArkWeb_JavaScriptObject

harmony 鸿蒙ArkWeb_JavaScriptValueAPI

harmony 鸿蒙ArkWeb_ProxyMethod

harmony 鸿蒙ArkWeb_ProxyMethodWithResult

0 赞

所属分类： 后端技术
本文标签：
版权声明： 原创文章如转载，请注明本文链接: https://m.seaxiang.com/blog/xvaiNG

harmony 鸿蒙组件描述

组件描述

需要权限

子组件

接口

你可能感兴趣的鸿蒙文章

热门推荐

标签云

最新文章

本文目录