鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Web）上篇

2401_84181253

已于 2024-04-21 08:04:13 修改

阅读量667

点赞数 5

分类专栏： 2024年程序员学习文章标签： harmonyos 前端华为

于 2024-04-21 08:04:12 首次发布

本文链接：https://blog.youkuaiyun.com/2401_84181253/article/details/138021322

版权

本文详细介绍了在鸿蒙HarmonyOS中使用ArkTS进行声明式Web应用开发时，如何配置各种手势及权限，包括domStorageAccess、fileAccess、imageAccess等。通过示例代码展示了如何开启和使用这些功能，以便开发者更好地控制Web应用的行为和安全。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新HarmonyOS鸿蒙全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

htt

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip204888 （备注鸿蒙）

正文

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

修改EntryAbility.ts。

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

// xxx.ts
import UIAbility from ‘@ohos.app.ability.UIAbility’;
import AbilityConstant from ‘@ohos.app.ability.AbilityConstant’;
import Want from ‘@ohos.app.ability.Want’;
import web_webview from ‘@ohos.web.webview’;
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文件。

Hello World

属性

通用属性仅支持aspectRatio、backdropBlur、backgroundColor、bindContentCover、bindContextMenu、bindMenu、bindSheet、borderColor、borderRadius、borderStyle、borderWidth、clip、constraintSize、defaultFocus、focusable、tabIndex、groupDefaultFocus、focusOnTouch、displayPriority、enabled、flexBasis、flexGrow、flexShrink、layoutWeight、id、gridOffset、gridSpan、useSizeType、height、touchable、margin、markAnchor、offset、width、zIndex、visibility、scale、transform、responseRegion、size、stateStyles、opacity、shadow、sharedTransition、transition。

domStorageAccess

domStorageAccess(domStorageAccess: boolean)

设置是否开启文档对象模型存储接口（DOM Storage API）权限，默认未开启。

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

参数：

参数名	参数类型	必填	默认值	参数描述
domStorageAccess	boolean	是	false	设置是否开启文档对象模型存储接口（DOM Storage API）权限。

示例：

// xxx.ets
import web_webview from ‘@ohos.web.webview’

@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: ‘www.example.com’, controller: this.controller })
.domStorageAccess(true)
}
}
}

fileAccess

fileAccess(fileAccess: boolean)

设置是否开启应用中文件系统的访问，默认启用。$rawfile(filepath/filename)")中rawfile路径的文件不受该属性影响而限制访问。

参数：

参数名	参数类型	必填	默认值	参数描述
fileAccess	boolean	是	true	设置是否开启应用中文件系统的访问，默认启用。

示例：

// xxx.ets
import web_webview from ‘@ohos.web.webview’

imageAccess

imageAccess(imageAccess: boolean)

设置是否允许自动加载图片资源，默认允许。

参数：

参数名	参数类型	必填	默认值	参数描述
imageAccess	boolean	是	true	设置是否允许自动加载图片资源。

示例：

// xxx.ets
import web_webview from ‘@ohos.web.webview’

javaScriptProxy

javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Array, controller: WebviewController | WebController})

注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。所有参数不支持更新。此接口只支持注册一个对象，若需要注册多个对象请使用registerJavaScriptProxy9+。

参数：

参数名	参数类型	必填	默认值	参数描述
object	object	是	-	参与注册的对象。只能声明方法，不能声明属性。
name	string	是	-	注册对象的名称，与window中调用的对象名一致。
m