前言

系统环境：Mac mini M2 14.5 (23F79)
开发IDE：DevEco Studio 5.0.1 Release

示例

第一步：创建一个Empty Ability工程

第二步：先run一下，确定工程初步化正常，模拟器正常启动应用（要先提前配置与启动手机模拟器）

效果如下，是的，就是那个熟悉的Hello World

第三步：简单修改下pages目录下的Index文件中的代码，把Hello World替换成一个webview组件，并加载百度首页


修改后的代码如下所示：

import {webview } from '@kit.ArkWeb'

@Entry
@Component
struct Index {
  @State webViewController: webview.WebviewController = new webview.WebviewController();

  build() {
    RelativeContainer() {
      // 添加ArkWeb组件，加载一个网页
      Web({
        src: 'https://www.baidu.com',
        controller: this.webViewController
      })
        .width('100%')
        .height('100%');
    }
    .height('100%')
    .width('100%')
  }
}

是的，没有改几行代码，运行看下效果吧（你会遇到一个空白页面，没关系我们看下log

第四步：申请网络访问权限
打开module.json5，添加如下代码，申请网络权限

   "requestPermissions": [
      {"name": "ohos.permission.INTERNET"}
    ]

再运行一下，搞定

搜索功能也正常使用

总结

不需要显示引入相关库，只需要注意申请网络访问权限！

后续

深入使用看官方文档：ArkWeb（方舟Web）