组件描述

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

说明

• 该组件从API version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
• 示例效果请以真机运行为准，当前DevEco Studio预览器不支持。

需要权限

支持设备：Phone | PC2in1 | Tablet | Wearable 

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

 子组件

支持设备:  Phone | PC2in1 | Tablet | Wearable

 

接口 

支持设备Phone | PC2in1 | Tablet | Wearable

Web(value: WebOptions)

说明

不支持转场动画。

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

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

参数： 

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

 

示例：

加载在线网页。

// 导入webview
//这行代码从@kit.ArkWeb库中导入webview模块，用于创建和管理Webview组件。
import {webview} from '@kit.ArkWeb'

//使用@Entry和@Component装饰器定义一个名为WebComponent的组件。@Entry表示这是一个入口组件。
@Entry
@Component
struct WebPage {

//初始化控制器
  controller:webview.WebviewController=new webview.WebviewController();

  // 定义build方法，用于构建组件的界面。这里使用Column布局，并在其中嵌入一个Web组件
  // src属性指定要加载的网页URL为www.example.com，controller属性绑定到组件的controller成员变量。
  build() {
    Column() {
      Web({src:'www.example.com',controller:this.controller})
    }
  }
}

效果展示：

 

 

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

//从@kit.ArkWeb库中导入webview模块。
import { webview } from '@kit.ArkWeb';

//使用@Entry和@Component装饰器定义一个名为WebComponent的组件。
@Entry
@Component
struct WebPage {

  //创建一个webview.WebviewController实例，并将其赋值给controller属性。这个控制器将用于管理Web视图。
  controller: webview.WebviewController = new webview.WebviewController();

  //定义build方法，该方法用于构建组件的UI。
  build() {

    //使用Column容器来布局子组件。
    Column() {

      // 在Column中嵌入一个Web组件，指定要加载的网页URL为'www.example.com'
      // 并使用之前创建的controller进行控制，同时开启隐私模式。
      Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
    }
  }
}

效果展示：

 

 

 Web组件同步渲染模式。

// 这行代码从@kit.ArkWeb包中导入webview模块，用于创建和管理Webview。
import { webview } from '@kit.ArkWeb';

//使用@Entry和@Component装饰器定义一个名为WebComponent的组件。@Entry表示这是一个入口组件。
@Entry
@Component
struct WebPage {
  //初始化一个WebviewController实例，用于管理Webview的行为和属性。
  controller: webview.WebviewController = new webview.WebviewController();

  //在build方法中，使用Column布局组件来组织子组件。在这个布局中嵌入一个Web组件，指定要加载的网页源为www.example.com，
  build() {
    Column() {

      //并使用之前初始化的controller，以及设置渲染模式为同步渲染（RenderMode.SYNC_RENDER）。
      Web({ src: 'www.example.com', controller: this.controller, renderMode: RenderMode.SYNC_RENDER })
    }
  }
}

效果展示：

 

 

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

// 导入ArkWeb的webview模块
import { webview } from '@kit.ArkWeb';

// 定义一个名为WebComponent的组件
@Entry
@Component
struct WebPage {
  
  // 初始化一个WebviewController实例
  controller: webview.WebviewController = new webview.WebviewController();

  // 构建组件的界面
  build() {
    
    // 使用Column布局组件来垂直排列子组件
    Column() {
      
      // 创建第一个Web视图，加载www.example.com，使用之前初始化的controller，并指定共享的渲染进程令牌
      Web({ src: 'www.example.com', controller: this.controller, sharedRenderProcessToken: "111" })
      
      // 创建第二个Web视图，加载www.w3.org，使用之前初始化的controller，并指定共享的渲染进程令牌
      Web({ src: 'www.w3.org', controller: this.controller, sharedRenderProcessToken: "111" })
    }
  }
}

  效果展示：

 

加载本地网页。

通过$rawfile方式加载。

//从@kit.ArkWeb库中导入webview模块。
import { webview } from '@kit.ArkWeb';

//定义一个名为WebComponent的组件，使用@Entry和@Component装饰器标识这是一个可以被识别和渲染的组件。
@Entry
@Component
struct WebPage {

  //初始化一个webview.WebviewController实例，用于控制webview的行为。
  controller: webview.WebviewController = new webview.WebviewController();

  //在build方法中定义了组件的UI结构：使用一个Column容器，里面嵌套了一个Web组件。
  build() {
    Column() {

      // Web组件通过$rawfile方法加载名为index.html的本地HTML文件
      // 并使用之前初始化的控制器this.controller来控制该Webview的行为。
      Web({ src: $rawfile("Index.html"), controller: this.controller })
    }
  }
}

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

   效果展示：

 

       

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

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 })
    }
  }
}