通过注册window的方式,实现h5与端内通信
/**
* h5发送消息,请求端内方法
* 实现原理:h5注册window方法,通过这一方法传递参数,bridge接收window方法完成操作
* JSBright为双方决定的通讯桥梁的名字
* postMessage为移动端方法名
* type和data为移动端方法名的参数,根据项目需求自行配置。这里的type用作定义操作类型名称,如刷新、跳转、回退等操作,data为具体参数,如'refresh'、{ name: 'xxx' }等
*/
const postMsg = (type, data) = {
window.JSBright.postMessage(JSON.stringify({ type, data }))
}
// 假设h5需要调用移动端的刷新方法,约定移动端的刷新操作名为REFRESH_PAGE,参数为refresh,h5的调用如下:
postMsg('REFRESH_PAGE', 'refresh')
/**
* h5接收消息,根据端内通知完成相关操作
* 实现原理:h5注册window事件,bridge调用window事件后,h5在window事件中完成操作
*/
window.receiveMessage = (msg) => {
if (typeof msg === 'string') {
const data = JSON.parse(msg)
const { type } = data
if (+type = ?) { // 约定不同type,h5可以实现不同操作
// ...
} else {
Toast.info('返回数据格式错误')
}
} else {
Toast.info('返回数据必须string类型')
}
}
移动端调h5方法,本质就是执行一个javascript语句,具体两种方法:
一种直接执行,一种带返回值。
/** h5JsFn为h5中自定义的全局方法,一般注册到window上
* 如何判断h5JsFn是否可执行:在h5的控制台,直接输入h5JsFn,观察是否有输出
* params为传递参数,h5接收后可以做一些自己的处理
*/
// 直接执行js中的方法
webView.loadUrl("javascript:h5JsFn(params)");
webView.evaluateJavascript("javascript:h5JsFn(params)", new ValueCallback<String>() {
// 接收js返回值
});