WebView与APP交互
WebView与APP交互,即网页通过JSBrige
调用APP的功能,APP也可以通过JSBrige
调用网页提供的方法。最近刚好接触到这一块,记录一下前端侧的实际操作过程,这篇文章适合还没接触过这一块的同学们,这里不讲原理,直接开始实战的过程。
准备工作
与客户端同学沟通好使用的JSBrige库,我这里使用的是下面这两个库:
iOS(1.1w+ Star): https://github.com/marcuswestin/WebViewJavascriptBridge
Android(6k+ Star): https://github.com/lzyzsd/JsBridge
Star数量比较高,使用的企业也比较多,所以还是比较可靠的,可以在它们的文档中示例代码。
注意: github上有很多这样的库,但最好配套使用,即iOS和Android注入的jsBrige名称一致,我们前端使用时比较方便统一。
开发步骤
1. 统一封装APP注入的JSBrige
ios和android注入的jsbrige可能会有些差异,所以在使用前我们需要抹平不同客户端的差异。
如果app的同学使用了上面说的库,安卓和iOS会在WebView中的window下注入一个WebViewJavascriptBridge
的对象,iOS有可能是注入WVJBCallbacks
的数组,也有可能需要通过iframe
来注入。iOS的文档中给出了一个兼容的示例代码:
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'https://__bridge_loaded__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
我们可以直接使用上面的代码,为了使用方便,在页面onload后,我们将这个函数挂在window下:
window.onload = function () {
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'https://__bridge_loaded__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
window.setupWebViewJavascriptBridge = setupWebViewJavascriptBridge
}
window.setupWebViewJavascriptBridge
这个函数,就是我们所说的JSBridge
,即WebView与APP交互的桥梁。
2. JS调用APP的方法
APP端的同学需要先用库提供的方法在APP端实现一个方法,方法名比如:playMusic(musicId)
,可以传递参数musicId
,表示让APP开始播放某一首音乐。js调用时如:
window.setupWebViewJavascriptBridge(function (bridge) {
bridge.callHandler('playMusic', { musicId: 1 }, function (data) {
console.log('app触发成功了,音乐正在播放。。。APP回调返回的数据:', data)
})
})
上面相当于向app发起了一个playMusic
请求,app收到请求后,执行相关的动作,然后可以callback
,网页可以拿到回调并继续做相关动作(需要的话)。
3. APP调JS提供的方法
同样的道理,若想APP能调用JS提供的方法,JS中要先注册这个方法,方法名比如stateChange(state)
,JS注册方法:
window.setupWebViewJavascriptBridge(function (bridge) {
bridge.registerHandler('stateChange', function (data, responseCallback) {
console.log('收到APP请求stateChange事件,请求的数据是:', data)
// 可以返回给app一个回调
responseCallback('朕已经收到APP爱卿的请求了,且退下!')
})
})
到这里,WebView与app的交互其实就完成了,就是这么简单。
注意事项
1. window.onload
时就callHandler
可能不成功
一般在Android中会出现这个问题,这是因为APP注入的WebViewJavascriptBridge
还不存在,JS就调用其中的方法了,所以就会没有效果。而Android的库也给出了这个注意事项,所以得这样写:
window.onload = function () {
function registerAppEvent () {
window.setupWebViewJavascriptBridge(function (bridge) {
bridge.registerHandler('stateChange', function (data, responseCallback) {
console.log('收到APP请求,请求的数据是:', data)
// 可以返回给app一个回调
responseCallback('朕已经收到APP爱卿的请求了,且退下!')
})
})
}
// 兼容写法
if (window.WebViewJavascriptBridge) {
registerAppEvent()
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady'
, function() {
registerAppEvent()
},
false
)
}
}
但这里没有考虑到iOS的情况,在最新的iOS中WebViewJavascriptBridge
可能是不存在的,所以上面写法registerAppEvent()
在iOS可能无法执行。为了避免多次注入事件,我这里用了setTimeout
,兼容两端的流程:
let isInitBridgeEvent = false // 作为是否已注册过事件的标记
if (window.WebViewJavascriptBridge) {
registerAppEvent()
isInitBridgeEvent = true
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady',
function () {
registerAppEvent()
isInitBridgeEvent = true
},
false
)
// 如果还没注册则再注册一次
setTimeout(() => {
if (!isInitBridgeEvent) {
registerAppEvent()
isInitBridgeEvent = true
}
}, 100)
这坨代码写的很挫,让我尴尬癌都犯了,有没有热心的小伙伴帮我优化下写法[送花花]。
2. js调用安卓后callback
回调不成功,js收不到app返回的消息
这个问题其实github上有issue,这是安卓1.0.4版本没有解决的问题,最新的代码已经解决了。
解决办法是:安卓需要引入最新的master的代码,而不要使用1.0.4版本的代码。
「一键投喂 软糖/蛋糕/布丁/牛奶/冰阔乐!」
(๑>ڡ<)☆谢谢老板~
使用微信扫描二维码完成支付