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

简述

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

语法

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页面

function test(){
 console.log(111)
}

• web组件调用runJavaScript方法可以执行html中的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