鸿蒙(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
相关推荐
LuciferHuang6 小时前
震惊!三万star开源项目竟有致命Bug?
前端·javascript·debug
HMS Core6 小时前
京东携手HarmonyOS SDK首发家电AR高精摆放功能
华为·ar·harmonyos
GISer_Jing6 小时前
前端实习总结——案例与大纲
前端·javascript
天天进步20157 小时前
前端工程化:Webpack从入门到精通
前端·webpack·node.js
姑苏洛言7 小时前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手8 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言8 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
你的人类朋友9 小时前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手10 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3