鸿蒙实战案例——程游书苑（第二期_Web功能）

Harmony_QI

已于 2024-10-05 17:18:52 修改

阅读量202

点赞数 3

文章标签： harmonyos 华为鸿蒙

于 2024-10-05 17:01:21 首次发布

本文链接：https://blog.csdn.net/2402_84136989/article/details/142715117

版权

本期主要实现如何将web页面嵌入到设备中，主要包括web组件使用的注意事项、web组件的相关知识点、模拟器运行项目、实机运行项目及签名等相关问题。下面就和小编一起学习web功能吧。

一、Web组件使用注意事项

1.访问在线网页添加网络权限

ohos.permission.INTERNET

1.首先找到module.json5文件。

2.添加网络权限代码。

"requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"    //申请网络权限
      }
    ],

3.点击Sync Now 保存配置。

2.以真机或模拟器运行为准

由于IDE预览器不支持Web效果所以在这里各位开发者朋友们要使用真机或者模拟器。

二、Web组件相关知识点

1.Web组件接口

Web(options: { src: ResourceStr, controller: WebviewController | WebController})

2.接口的传参

通过接口信息可知使用Web组件需要传入了src和controller两大参数，其中这两大参数均为必填项。src为网页资源地址，controller为Web组件的控制器。

三、案例

1.绘制web页面

小编这里以加载在线网页web为例进行展示，小编选择的是oppo2024摄像大赛官网。

网址：https://imagine-if.oppo.com/cn/

//导入Web模块
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebPage {
  
  //创建一个WebviewController实例,用于控制web视图的行为。
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Column() {
      //使用web组件，传入地址和控制器
      Web({ src: 'https://imagine-if.oppo.com/cn/', controller:this.controller})
    }
  }
}