简单使用
1，在模块的 module.json5 中添加权限
{
"module": {
...
"requestPermissions": [
{
"name": "ohos.permission.STORE_PERSISTENT_DATA"
},
],
...
}
}
2，page 中加载网页
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('Load Web Page').onClick(() => this.controller.loadUrl('https://www.baidu.com');)
Web({ src: 'https://www.baidu.com', controller: this.controller})
}
}
}
功能扩展
属性
1，onControllerAttached ：注入js对象、设置用户代理
onControllerAttached 在WebviewController 成功绑定到 Web 组件时触发
.onControllerAttached(() => {
this.controller.registerJavaScriptProxy('customObj', {
customMethod: (arg) => { }
});
this.webController.setCustomUserAgent('xx')
})
2，onlineImageAccess: 是否允许从网络加载图片资源
无图模式
3，javaScriptAccess：是否允许执行 JavaScript 代码
执行js代码、app与网页交互
4，domStorageAccess：是否允许Web应用在客户端存储数据
5，darkMode： 设置深浅模式/黑白皮肤
搭配 forceDarkAccess 使用，forceDarkAccess：强制web应用深色模式
6，imageAccess：对设备上图像的访问和管理
7，mixedMode：如何处理加载超文本传输协议（HTTP）和超文本传输安全协议（HTTPS）混合内容，
- MixedMode.None ：不加载任何混合内容；默认
- MixedMode.Compatible ：兼容模式，允许加载混合内容
- MixedMode.Strict ：严格模式，只加载 HTTPS 内容，拒绝 HTTP 内容
8，textAutosizing：自动调整文本大小以适应不同的屏幕尺寸和用户偏好； 可以根据用户的字体大小设置或设备的屏幕尺寸自动调整文本大小
9，nestedScroll ：处理 Web 组件嵌套滚动的属性
属性：scrollForward和scrollBackward控制滚动的方向和行为
- NestedScrollMode.SELF_ONLY ：仅当前滚动容器滚动，不与父容器联动。
- NestedScrollMode.SELF_FIRST ：当前滚动容器先滚动，滚动至边缘后父容器继续滚动。
- NestedScrollMode.PARENT_FIRST ：父容器先滚动，滚动至边缘后当前滚动容器继续滚动。
- NestedScrollMode.PARALLEL ：父容器与当前滚动容器同时滚动
.nestedScroll({
scrollForward: NestedScrollMode.SELF_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST
})
10，verticalScrollBarAccess ：控制垂直滚动条的显示和隐藏
horizontalScrollBarAccess ：控制横向滚动条的显示和隐藏
11，defaultFixedFontSize defaultFontSize minFontSize minLogicalFontSize
- defaultFixedFontSize ：设置网页的默认等宽字体大小
- defaultFontSize：设置网页的默认字体大小
- minFontSize ：设置网页字体大小最小值
- minLogicalFontSize：设置网页逻辑字体大小最小值。
事件
1，onTitleReceive：标题获取与更改时触发的函数
2，onLoadIntercept：在页面加载之前拦截请求，允许开发者检查 URL、修改请求或直接返回自定义内容
.onLoadIntercept((event) => {
//特殊处理
if(res[0] === '1'){//外部浏览器打开
RouterUtil.jumpSystemBrowser(originUrl);
return true //拦截请求
}
// 对于其他请求，不进行拦截
return false
})
3，onBeforeUnload：刷新或关闭场景下，在即将离开当前页面时触发此回调
onResourceLoad：通知Web组件所加载的资源文件url信息。
4，onPageEnd：在用户即将离开当前页面（例如通过导航或关闭标签页）时被触发。
这个事件可以用于提示用户确认是否真的要离开页面，或者用于执行一些清理操作，如保存草稿、清除定时器等。
5，onPermissionRequest ：在 Web 页面请求权限时进行自定义处理。
例如，显示自定义的权限请求对话框，或者根据应用的逻辑决定是否允许权限请求
.onPermissionRequest((event) => {
//权限申请
let reqPermissions = event?.request.getAccessibleResource();
if (reqPermissions) {
let permissions: Array<Permissions> = []; //
permissions.forEach((per: string) => {
if (per === this.permission_CAMERA) {
permissions.push('ohos.permission.CAMERA');
} else if (per === this.permission_AUDIO) {
permissions.push('ohos.permission.WRITE_AUDIO');
}
})
let rst = PermissionUtil.checkAccessTokens(permissions);
if (rst.length === 0) {
//都已授权
event?.request.grant(permissions);
} else {
this.showPermissionDialog(rst, () => {
event?.request.grant(permissions);
}, () => {
event?.request.deny();
});
}
}
})
6，onAlert: 允许开发者拦截并自定义 alert() 对话框的行为，
例如，用应用内的消息提示框替换默认的浏览器对话框，或者执行一些额外的逻辑
7，onShowFileSelector 选择文件，拉起文件\图库选择器
8，onProgressChange 网页加载进度变化时触发该回调。
9，onRequestSelected 当Web组件获得焦点时触发该回调
10，onErrorReceive 网页加载遇到错误时触发该回调；在无网络的情况下，触发此回调
交互
1，返回事件
（1）与原生标题栏的，返回icon 交互
Image(this.backIcon).onClick(() => {
// 判断是否可以回退网页
let canBack = this.webController.accessBackward()
if(canBack){
this.webController.backward()
}else{
RouterUtil.jumpBack()
}
})
（2）返回手势的交互
onBackPress(): boolean | void {
if(this.webController.accessBackward()){
this.webController.backward()
return true
}
}
2，代理对象交互。javaScriptProxy：将本地对象暴露给h5，使得网页可以调用本地对象的方法或访问其属性，实现h5和应用通信
功能：
- 本地对象暴露：将本地对象及其方法和属性暴露给网页中的 JavaScript 代码。
- 网页交互：允许网页通过 JavaScript 调用本地对象的方法，或监听本地对象的事件。
- 数据绑定：可以实现数据的双向绑定，即网页中的数据变化可以实时反映到本地对象中，反之亦然。
private webViewJs:NativeJs= new NativeJs(this.webController);
Web() .javaScriptProxy({
object: this.webViewJs,
name: "AppJs",
methodList: this.webViewJs.getMethodList(),
controller: this.webController
})
...
export class NativeJs{
/**
* 提供给H5使用的方法，需要把方法名放在这里
*/
getMethodList(): string[] {
return ['getDeviceInfo','getPhoneNumber','jumpToNewPage']
}
/**
* 获取注册手机号 js方法
*/
getPhoneNumber() : string{
let result = '171xxxxxxxx'
return result
}
}
