建立网站专业公司,品牌营销优化,wordpress设置支付宝,福州企业名录HarmonyOS WebView
Web组件提供基础的前端页面加载的能力#xff0c;包括加载网络页面、本地页面、html格式文本数据。Web组件提供丰富的页面交互的方式#xff0c;包括#xff1a;设置前端页面深色模式#xff0c;新窗口中加载页面#xff0c;位置权限管理#xff0c;C…HarmonyOS WebView
Web组件提供基础的前端页面加载的能力包括加载网络页面、本地页面、html格式文本数据。Web组件提供丰富的页面交互的方式包括设置前端页面深色模式新窗口中加载页面位置权限管理Cookie管理应用侧使用前端页面JavaScript等能力。
注意使用 webview 一定要去开启网络权限否则页面将无法加载
1.创建一个简单的 webview 页面
1.1 app端 创建 webview 页面
// 1. 引入依赖
import { webview } from kit.ArkWeb;// 2. 创建webview控制器
State message: string webview page
private controller: WebviewController new webview.WebviewController()build () {Column ({ space: 15 }) {Text( this.message ).fontSize( 50 ).fontWeight( FontWeight.Bold )// 2. 利用 Web 组件引入对应的 Web端 内容Web({ src: 自己本地随便启动一个项目地址, controller: this.controller }).width(80%).height(400).backgroundColor(#11dd00)}.height( 100% ).width( 100% )
}2.app端 输出 h5 的日志
正常情况下我们开发会有很多日志输出开发过webview的同学都知道h5的日志不太好看除非使用Vconsole插件鸿蒙对这个情况做的比较好可以直接在app端的日志输出h5的日志使用webvivew属性 OnConsole 监听h5的console.log输出并在控制台输出日志
Web({ src: 自己本地随便启动一个项目地址, controller: this.controller }).width(80%).height(400).backgroundColor(#11dd00).border({width: 1,radius: 5,style: BorderStyle.Solid}).onConsole((event) {console.log(wuwuwu h5 打印的日志 , event?.message.getMessage())return true})3.h5 和 app端 方法调用数据传递
方法1在鸿蒙中 h5 和 app端的交互是通过 window 来进行的 h5 把方法挂载到 window 对象上app端 可以通过固定方法调用app端 也可以通过固定api 把方法挂载到 window 对象上让 h5 调用。如果要做数据传递在方法中加上返参或者回调即可 方法2可以通过双向数据通道进行数据传递 实际上就是通过 postMessage
3.1 app端 调用 h5 的方法
3.1.1 h5 挂载方法到 window 对象上
// 在 h5 中监听window.onload事件挂载方法 testA 到 window 对象上
window.onload () {window.testA () {console.log(testFn 方法被调用)}
}3.1.2 app端 调用 h5 的方法
// app端 创建一个按钮通过按钮触发 h5 中的 testA 方法
Button(调用h5按钮).onClick(() {// 使用 webview 控制器中的方法 runJavaScript 调用 h5 中的 testA 方法this.controller.runJavaScript(testA())console.log(wuwuwu 1. 调用 testFn 方法)})3.2 h5 调用 app端 的方法
3.2.1 app端 挂载方法到 window 对象上
app端 需要创建一个事件对象通过固定api挂载到 window对象上 根据api可以分为两种方式
3.2.1.1 创建事件对象
// 通过 class 创建一个全局公共类里面包含一个方法 testB
class ToWebObject {constructor() {}public testB() {console.log(wuwuwu 我是 App端 的打印信息 App端 的 testB 函数被调用了)}
}3.2.1.2 使用 web 属性 javaScriptProxy 挂载方法到 window 对象上
// app端
// 创建要挂载的内容
State sendObject: ToWebObject new ToWebObject()Web({ src: 自己本地随便启动一个项目地址, controller: this.controller }).width(80%).height(400).backgroundColor(#11dd00).border({width: 1,radius: 5,style: BorderStyle.Solid}).onConsole((event) {console.log(wuwuwu h5 打印的日志 , event?.message.getMessage())return true}).javaScriptProxy({// 挂载的事件对象object: this.sendObject,// 挂载到 window 对象上的属性名name: wuwuwu,// 注册的方法名只有在这个数据中的方法 h5 才可以调用// 比如 object 中有两个方法 testA 和 testBh5 只能调用 testB 方法methodList: [testB],controller: this.controller})3.2.1.3 使用 webview 控制器的方法 registerJavaScriptProxy 挂载方法到 window 对象上使用此方法后必须调用 refresh方法才能生效
// app端
// 创建要挂载的内容
State sendObject: ToWebObject new ToWebObject()
// 控制器
private controller: WebviewController new webview.WebviewController()// web 组件
Web({ src: 自己本地随便启动一个项目地址, controller: this.controller }).width(80%).height(400).backgroundColor(#11dd00).border({width: 1,radius: 5,style: BorderStyle.Solid}).onConsole((event) {console.log(wuwuwu h5 打印的日志 , event?.message.getMessage())return true})// 新建俩按钮用来挂载事件
Row() {Button(注册一些事件).onClick(() {this.controller.registerJavaScriptProxy(this.sendObject,wuwuwu,[testB],)})Button(刷新一下激活事件).onClick(() {this.controller.refresh()})
}3.2.1.4 使用 webview 控制器的方法 registerJavaScriptProxy 挂载方法到 window 对象上可以在声明周期 onControllerAttached 上调用该方法此时 h5 还未加载
Web({ src: 自己本地随便启动一个项目地址, controller: this.controller }).width(80%).height(400).backgroundColor(#11dd00).border({width: 1,radius: 5,style: BorderStyle.Solid}).onConsole((event) {console.log(wuwuwu h5 打印的日志 , event?.message.getMessage())return true}).onControllerAttached(() {this.controller.registerJavaScriptProxy(this.sendObject,wuwuwu,[testB],)// 这块有个问题 ,在这个声明周期中调用onControllerAttached在不调用refresh的情况下 h5 可以正常调用testB// 官方文档中只是说 onControllerAttached 必须要调用 refresh才能生效// 这里不知道是有真的问题 或者是 官方文档没有跟新这部分内容// 我猜测是因为这个生命周期的时候 h5 还没有加载导致相当于 refresh 的作用this.controller.refresh()})3.2.1.5 h5 调用方法不管 app端 咋么调用h5 都通过 window 对象来调用
// h5
// 直接调用 window 方法就行
// window.挂载时的name.要调用的方法名
window.wuwuwu.testB()3.3 建立 app端 和 h5 双向数据通道 1.创建双向数据通道接口 使用的 API webview 控制器方法 createWebMessagePorts() 返回值: 是一个数组, 数组内有两个接口 [ 接口1, 接口2 ][0] : 提供给 h5端 使用的, 需要传递给 h5端, h5端 使用这个接口去监听 App端 发来的消息, 同时也是使用这个接口向 App 端发送消息[1] : 提供给 App端 使用的, App端 使用这个接口去监听 h5端 发来的消息, 同时也是使用这个接口向 h5端 发送消息 2.把属于 h5端 的接口传递过去 注意: 此时不是 App端 和 h5端 建立好通道传递 而是先把建立通道的 “工具” 传递过去所以, 此时是 App端 给 window 发送一个消息( 而不是和 h5端 建立通道连接 ) 3.建立通道 使用 webview 控制器方法 postMessage 把 “接口工具” 发过去App端 和 h5端 都利用 “接口工具” 去建立双向连接通道
3.3.1 创建创建双向数据通道接口并完成事件监听
双向通道数据接口通过 webview 控制器方法 createWebMessagePorts() 创建
// ---------- app端
// 变量private controller: WebviewController new webview.WebviewController()
private posts: webview.WebMessagePort[] []
private appPort: webview.WebMessagePort Object()registerPortMessage() {this.posts this.controller.createWebMessagePorts()// this.posts [ h5端使用的接口, App端使用的接口 ]this.appPort this.posts[1]// 把 h5 使用的接口传递给 h5this.controller.postMessage(__init__port__, [this.posts[0]], *)// 监听 h5 发送的消息this.posts[1].onMessageEvent((event) {this.messageEventHandle(event)})
}messageEventHandle(event: webview.WebMessage) {const resultInfo JSON.parse(event as string) as ResultInfoTypeif (resultInfo.message __awu__) {console.log(wuwuwu app 端 接收到数据了, resultInfo.info.username, resultInfo.info.password, resultInfo.info.msg)// 接收到数据之后告诉 h5 我接收到了数据this.appPort.postMessageEvent(JSON.stringify({message: __awu__,info: 我接收到数据了}))}
}// ----------h5端
// 变量
const count ref(0)
const webPort ref()// 监听 window 消息
window.addEventListener(message,(event){// data 需要和 app端 发送消息的一致if(event.data __init__port__ event.ports[0] ! null){// 表示发来的消息是 __init__port__// 并且携带了属于 h5端 的那个接口webPort.value event.ports[0]// 至此, 你需要给 App端 发送消息的时候, 就可以使用 webPort 发送消息// 利用接口工具建立连接通道// 利用接口工具建立连接通道, 利用的事 App端 发送过来的接口工具webPort.value.onmessage (event:any) {// 接收到 App端 发送的消息 事件处理console.log(messageEventHandler,event.data)}}
})3.3.2 发送消息
发送消息通过 通道 发送
// app端
Button(发送点信息).onClick(() {// 1. 发送数据// this.appPort.postMessageEvent(JSON.stringify({// message: __awu__,// info: 按钮发送的数据// }))// 2. 发送数据this.appPort.postMessageEvent(按钮发送的数据)})// h5 端
const sendMessage (){webPort.value.postMessage(JSON.stringify({message: __awu__,info: { username: admin, password: 1234567,msg:这是发送的第${count.value}消息 }}))count.value
}
