初识移动端跨平台（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){
     })
}