之前一段时间公司花费了很长一段时间投入开发的App终于面世了,Android和IOS的各有一版,同时开发。Android App已经在各大App应用商店上架了,而IOS的还是依旧在一次次的卡审核,先默哀个!~

 

在最初的版本中,因为进度问题,部分页面采取了嵌套html页面的方法来处理(不过后来已经改成了全部原生App页面了),所以就多少会涉及到一些App和嵌套页面之间的JS交互问题。这里的JS交互主要指的是App调用html内的JS方法和页面内JS调用App的方法两个部分

 

相对而言,在Android的App内置浏览器嵌套的html页面中执行App的内置方法比ios的更加容易处理,就目前而言在Android上基本不用过多的特殊处理。而在IOS上就不一样了,IOS App中,App是可以直接调用被嵌套页面的JS方法的,但是反过来想要通过嵌套的Html页面来调用IOS App的开发就行不通了。这时候我们需要借助一个WebViewJavascriptBridge来实现处理了,附上WebViewJavascriptBridge的Git地址

 

https://github.com/marcuswestin/WebViewJavascriptBridge

 

对于WebViewJavascriptBridge的使用网上有很多开发者写过的文章说明,Git上也有基本的Demo说明,直接参照即可,但是实际在开发的时候我就犯难了,因为网上几乎90%以上的开发者写的说明文章都是作为Object-C的IOS开发者写的如何在App中引用并调用该插件的方法,并没有详细的提到作为在被调用的Html页面,应该如何写来配合App的调用或者调用App的方法。

 

因为是整站的很多js如果像Demo里那样去把所需要的大量的JS方法写在

connectWebViewJavascriptBridge(function(bridge))

中的话,又会显得格外的臃肿,影响原本html站点代码的整体性效果,需要判断当前调用的是IOS还安卓的app,然后加载不同的js,同样的方法需要写在不同的js文件中,如果有修改的话,就会需要同时改两个地方,实在是非常的不方便。经过努力,在多方查找之后发现插件在执行后会在浏览器中创建一个WebViewJavascriptBridge对象,即window.WebViewJavascriptBridge,所以经过整理和测试之后得到如下思路编写新的页面js代码的方法,在原本的站点的js中新增一个js文件,例如AppPlugin.js,文件开头执行如下代码,并引用到其他js文件之前执行。

if(typeof(connectWebViewJavascriptBridge) != 'function'){
function connectWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener('WebViewJavascriptBridgeReady', function() {
callback(WebViewJavascriptBridge)
}, false)
}
}
connectWebViewJavascriptBridge(function(bridge) {
bridge.init(function(message, responseCallback) { })
})
}

而后面的页面上方法的js写法基本方法如下,以一个AppPlugin的对象为例

var AppPlugin = {
config:{
},
APP_User_Info:function(user){
//Android
try{
App.personDetail(user);
}catch (e){
try{
//IOS
window.WebViewJavascriptBridge.callHandler('App.personDetail', {user:user}, function(response) {});
}catch(exception){
//do nothing
console.log('No available app js!');
}
}
}
}

因为IOS中的特性,Html页面无法直接执行App的方法,所以会走入第二个Try逻辑中,执行window.WebViewJavascriptBridge来调用App的方法。这样就可以达成同一个页面,同一样的代码同时满足Android和IOS App的调用并且可以进行Js交互了。比如上面的代码,在用户名的html标签中写上“onclick=’AppPlugin.APP_User_Info(3301285) ‘”即可。