初识移动端跨平台（JavaScript篇）

因为最近项目需要跨平台，在网上找到这个demo。

本文主要讲WebViewJavascriptBridge在ios端怎么样使用。

首先简单说一下跨平台。

由于现在很多产品都是有安卓版跟ios版，就意味着同一样东西要出两套，由两组人去完成，不仅增加了开发成本，也大大加剧了维护成本。近期提出了跨平台的思路，用html写页面，分别用webview（ios），（安卓）来加载，对某些html无法调用的硬件，通过双方的交互来实现方法的互调和传值。这个过程就是跨平台。实践证明除了各平台浏览器内核的兼容性问题需要解决（虽然都是Webkit内核），其余都没什么大问题，包括调用原生功能。

/********************************** native Api 列表 ******************************* * nativebridge.send 方法 *      var data = "{'method':'Login_timeout'}" *      var data = "{'method':'Progress','type':'show'}" *      var data = "{'method':'Progress','type':'dismiss'}" *      var data = "{'method':'Progress','type':'showSuccess','message':'你好'}" *      var data = "{'method':'Progress','type':'showError','message':'你好'}" *      var data = "{'method':'Progress','type':'dismissSuccess','message':'你好'}" *      var data = "{'method':'Progress','type':'dismissError','message':'你好'}" *      var data = "{'method':'NewWindow','url':'http://baidu','title':'你好'}" *      var data = "{'method':'NativeBack','type':'isRoot'}" *      var data = "{'method':'QRCodeReader'}" * * 备注: 所有data可以拓展参数,入:var data = "{'method':'QRCodeReader','event':'button1'}" * 将在 nativeBridgeInit 的回调方法里被返回 **********************************************************************************//******************************** native Api 调用方式 ****************************** * 1. 初始化 * nativeBridgeInit(function(nativeResponse) * { *      // nativeResponse,即app native回传的参数,如二维码扫描的结果值 *      // 格式(在调用send方法发送的data数据上附加结果数据): *      // 如:var data = "{'method':'QRCodeReader','event':'button1'}" *      // nativeResponse = "{'method':'QRCodeReader','event':'button1', '':''}" * }); *  * 2. 调用响应appNative接口 * nativebridge.send(data, responseCallback); *  * 例子: * var data = "{'method':'Progress','type':'show'}"; * nativebridge.send(data, function(nativeResponse){ *      // nativeResponse:  {\"ret\":\"1\",\"message\":\"success\"} *      // web端处理代码,可通过ret值判断native接口是否调用成功,做响应处理 * }); ***********************************************************************************/         // debug模式开关var isDebug = true;/**********************************************************************************//************************************** 调试方法 **********************************//**********************************************************************************//** * 打印控制台错误信息 */ window.onerror = function(sMsg, sUrl, sLine) {    if(isDebug){        var oErrorLog = document.createElement("div");        oErrorLog.innerHTML = "<b>Console log msg：</b><p>";        oErrorLog.innerHTML += "Error: " + sMsg + "<br>";        oErrorLog.innerHTML += "Line: " + sLine + "<br>";        oErrorLog.innerHTML += "URL: " + sUrl + "<br>";        document.getElementsByTagName("body")[0].appendChild(oErrorLog);     }    return false;}/** * 打印debug日志 */ function log(message, data) {    if(isDebug){        var oDebugLog = document.createElement("div");        var el = document.createElement('div');        if(data){            el.innerHTML = "msg：" + message + "，data：" + JSON.stringify(data) + "<br/>";        }else{            el.innerHTML = "msg：" + message + "<br/>";         }        if (oDebugLog.children.length) {            oDebugLog.insertBefore(el, oDebugLog.children[0]);        } else {            oDebugLog.appendChild(el);        }        document.getElementsByTagName("body")[0].appendChild(oDebugLog);    } }/**********************************************************************************//*********************************** 原生约定的核心方法 *****************************//**********************************************************************************/var nativebridge; function nativeBridgeInit(method){    log("nativeBridgeInit: 1");    connectWebViewJavascriptBridge(function(bridge) {        log("nativeBridgeInit: 2", bridge);        //创建桥梁并带初始化参数        nativebridge = bridge;        bridge.init(function(nativeResponse, responseCallback)         {            log("nativeBridgeInit: 3", nativeResponse);            // 执行回调函数            method(nativeResponse);            log("nativeBridgeInit: 4");            if(nativeResponse.ret==1){                // 响应native(native通过该参数判断web是否成功接收到native发送的参数)                var responseToNative = "{\"ret\":\"1\",\"message\":\"success\"}";                responseCallback(responseToNative);            }            log("nativeBridgeInit: 5");        });   })}function connectWebViewJavascriptBridge(callback) {    log("connectWebViewJavascriptBridge: 1");    if (window.WebViewJavascriptBridge) {        log("connectWebViewJavascriptBridge: 2");        callback(WebViewJavascriptBridge);    } else {        log("connectWebViewJavascriptBridge: 3");        document.addEventListener('WebViewJavascriptBridgeReady', function() {            log("connectWebViewJavascriptBridge: 4");            callback(WebViewJavascriptBridge);            log("connectWebViewJavascriptBridge: 5");        }, false);        log("connectWebViewJavascriptBridge: 6");    } }function nativebridgeRegisterHandler(methodName,callbackMethod){    log("nativebridgeRegisterHandler: 1");    nativebridge.registerHandler(methodName,callbackMethod)    log("nativebridgeRegisterHandler: 2");}

调用函数

// 初始化本地接口连接nativeBridgeInit();//PhotoBrowser是与App端约定的方法名。imageURL是key值，url是传向App端的参数，nativeResponse是返回的回调函数值。function PhotoBrowser(url){    nativebridge.callHandler('PhotoBrowser',{'imageURL': url },     function(nativeResponse){     })}