js与native通讯安卓、iOS实现原理，及微信jssdk实现

一、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