之前一段时间公司花费了很长一段时间投入开发的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) ‘”即可。
发表评论