一、js与native交互流程
avatar
举例说明：
window.JSBridgeEventHandler.callNativeFunction('propose',"hello native，你好",'proposeCallback',onNotify);
native将执行propose方法，并收到传来的"hello native，你好"，并通过window.dispatchEvent('proposeCallback')，通过js的onNotify方法得到调用。
二、具体的业务代码实现
1.安卓、iOS注册js调用函数代码
avatar
根据url拦截的方式监听js发来的消息：
avatar
iOS注册js传来的消息监听：
avatar
2、js端bridge代码
avatar
2、js调用Native代码
avatar
三、js调用native的两种方式对比
| 对比 | 调用native暴露的api方式 | 通过拦截url的方式调用native |
|---|---|---|
| 优点 | a.安卓和iOS可以实现同步调用native暴露的方法，iOS实现难度更高，安卓原生支持； 2.对前端开发而言api更友好 |
不需要考虑系统兼容性，任意安卓和iOS系统都天然支持，不需要考虑安卓版本问题、iOS的UIWebView和WKWebView的适配问题 |
| 缺点 | 如果不考虑实现同步调用native的方法，取得返回值的话，建议采用封装一层调用native的js对象的方式，以实现更好的api友好性； | api不够友好，要拼接特定scheme、host、params的组件给native |
四、微信jsBridge实现方式分析;
1.微信jsBridge调用流程
avatar
2.微信jsbridge的实现
经逆向微信app的实现，对点击js button，调用wx.onMenuShareWeibo，会呼起一个UIWindow对象，对该对象的initWithFrame进行断点，得出完整的调用堆栈，可以得出是调用了webkit的userContentController:didReceiveScriptMessage:,而不是采用拦截特定scheme请求的方式实现的jsbridge。
类似封装如下：
window.wx = {
config: function (appid, timestamp, noncestr, queryApi) {
},
onMenuShareWeibo:function(obj){
//根据obj.success,obj.fail等function，取得md5,生成回调事件名。
if (this.isIOS) {
message = {'methodName': obj.showMenu, 'title': obj.title,'callBackName':callBackName};
if (callBackName) {
window.addEventListener(callBackName, callBack);
}
window.webkit.messageHandlers.JSBridgeEventHandler.postMessage(message);
}
if (this.isAndroid) {
var v = eval('window.Bridge.' + methodName + '(' + JSON.stringify(params) + ');');
var e=new Event(callBackName);
e.msg = v;
callBack(e);
}
}
}
3.微信签名认证的原理
核心在于客户端与服务器约定了一个相同的ticket，因为ticket第三方未知，根据相同的ticket，timestmap，noncestr，相同的规则一定能得出相同的sha1签名值，而timestmap和noncestr，又增加了随机性，被破解的可能性很小。<br
同时，绕过了私钥签名的过程，采用了更简便的方式实现了双向认证。即微信认证调用方是已注册的调用方，同时app也可以对微信进行认证，认证发来的请求是由微信发出。
简单易用，又具有很高的安全性；
avatar
网友评论