鸿蒙(HarmonyOS)应用开发——web组件

简述

在开发的工作中,可能存在一个场景,我们有一个问卷调查的h5页面,需要切入到app 中。这个时候,就需要从app 端操作,切换到web端操作。不管是安卓、ios、小程序都提供有web组件。那么harmonyos 中也提供web组件来在应用内加载浏览器

语法

javascript 复制代码
web(options:{src:string, controller?:WebController})

src

设置网页资源地址,可以是本地资源,也可以是网络资源;

  • 本地资源
    src:$rawfile('index.html')
  • 网络资源
    网络资源需添加网络权限:ohos.permission.INTERNET

controller控制器

可以控制web组件的各种行为,如前进、后退等操作

forward

按照历史栈,前进一个页面

backward

按照历史栈,后退一个页面

runJavaScript

异步执行javascript脚本,病通过回调方式返回脚本执行的结果

  • 在main/resource/rawfile目录下新建index.html页面
javascript 复制代码
function test(){
 console.log(111)
}
  • web组件调用runJavaScript方法可以执行html中的javascript脚本
javascript 复制代码
controller: WebController = new WebController();
Button().
	onclick(()=>{
		this.controller.runJavaScript({script: 'test()'})
})

支持的属性

属性 fileAccess javaScriptAccess imageAccess zoomAccess textZoomAtio ....

  • fileAccess

    fileAccess(boolean): 设置是否开启通过$rawfile('filepath/filename')访问应用中的rawfile路径的文件。默认时启用

  • javaScriptAccess

    javaScriptAccess(boolean): 设置是否运行执行javascript脚本

  • imageAccess

    imageAccess(boolean): 设置是否允许自动加载图片资源

  • zoomAccess

    zoomAccess(boolean): 用于设置是否支持手势进行缩放,默认允许执行缩放;但是这个要求,网页自身支持缩放,这个属性才会生效。

  • textZoomAtio

    textZoomAtio(number): 用于设置页面的文本缩放百分比,默认值为100,表示100%。

支持方法

  • onConfirm
  • onAlert
  • onBeforeUnload
  • onConsole
相关推荐
江城开朗的豌豆5 分钟前
Vue路由钩子全攻略:让你的页面跳转更丝滑!
前端·javascript·vue.js
江城开朗的豌豆7 分钟前
Vue的data去哪儿了?生命周期寻宝记
前端·javascript·vue.js
玲小珑20 分钟前
Next.js 教程系列(十三)Server Actions:新一代全栈能力
前端·next.js
toooooop822 分钟前
elementUI vue2 前端表格table数据导出(二)
前端
逻极25 分钟前
HarmonyOS从入门到精通:自定义组件开发指南(二):组件属性与参数传递
华为·harmonyos·arkts·鸿蒙·自定义组件
山河木马40 分钟前
前端学习C++之:创建对象
前端·javascript·c++
汪子熙43 分钟前
web 应用本地开发中的 LiveReload 协议深度解析
前端·javascript
UI设计和前端开发从业者1 小时前
大数据时代UI前端的智能化转型之路:以数据为驱动的产品创新
大数据·前端·ui
全宝1 小时前
前端也能这么丝滑!Node + Vue3 实现 SSE 流式文本输出全流程
前端·javascript·node.js
前端小巷子1 小时前
Web缓存:原理、策略与优化
前端·面试