鸿蒙应用开发搬砖经验之-ArkWeb加载页面的超简单示例

前言

系统环境：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）