ios/android webview 与 H5 通讯方案

api.js


import {
    IOS,
    ANDROID
} from './native.js'

function navigateToPage(path, options) {
    // bridge方式调用的时候如果有业务回调调话，暂不支持多个业务兵法进行，一个业务完成后再进行另外一个业务
    var params = {};
    params.business = "navigateToPage"; // business表示业务名称,跳到新的webview页面
    params.value = path;
    if(options) {
        params.params = options;
    }

    params.moduleName = "h5"; // 模块名指的是H打包出来的文件夹名称
    if (IOS) {
        window.webkit.messageHandlers.bridge.postMessage(params);
    } else if (ANDROID) {
        var jsonStr = JSON.stringify(params);
        window.messageHandlers.bridge(jsonStr);
    }
}

function popPage() {
    var params = {};
    params.business = "popPage"; // 返回上一个原生界面
    params.offset = 1; // 返回到前面多少级页面，不填默认为1
    if (IOS) {
        window.webkit.messageHandlers.bridge.postMessage(params);
    } else if (ANDROID) {
        var jsonStr = JSON.stringify(params);
        window.messageHandlers.bridge(jsonStr);
    }
}

function popHistoryOrPage() {
    var params = {};
    params.business = "popHistoryOrPage"; // 如果有历史则返回上一个历史界面，否则返回上一个原生界面
    if (IOS) {
        window.webkit.messageHandlers.bridge.postMessage(params);
    } else if (ANDROID) {
        var jsonStr = JSON.stringify(params);
        window.messageHandlers.bridge(jsonStr);
    }
}

function saveData(key, value) {
    var params = {};
    params.business = "saveData";
    params.key = key;
    params.value = value;
    if (IOS) {
        window.webkit.messageHandlers.bridge.postMessage(params);
    } else if (ANDROID) {
        var jsonStr = JSON.stringify(params);
        window.messageHandlers.bridge(jsonStr);
    }
}

function getUuiD(randomLength) {
    var num = Math.random().toString().substr(2, randomLength);
    var date = Date.now();
    return Number(num + date).toString(36);
}

function getJSCallBackFunName() {
    var callBackFunName = "a" + getUuiD(10) + "b";
    return callBackFunName;
}

function getData(key, callBackFun) {
    var callBackFunName = getJSCallBackFunName();
    // 原生只能回调全局的函数，局部函数无法调用
    window[callBackFunName] = function(resp) {
        // 释放回调函数
        window[callBackFunName] = null;
        callBackFun(resp);
    };
    var params = {};
    params.business = "getData";
    params.key = key;
    params.callBackFun = callBackFunName;
    if (IOS) {
        window.webkit.messageHandlers.bridge.postMessage(params);
    } else if (ANDROID) {
        var jsonStr = JSON.stringify(params);
        window.messageHandlers.bridge(jsonStr);
    }
}

function deleteData(key) {
    var params = {};
    params.business = "deleteData";
    params.key = key;
    if (IOS) {
        window.webkit.messageHandlers.bridge.postMessage(params);
    } else if (ANDROID) {
        var jsonStr = JSON.stringify(params);
        window.messageHandlers.bridge(jsonStr);
    }
}

// 回到首页
function backToMainPage() {
    var params = {};
    params.business = "backToMainPage";
    if (IOS) {
        window.webkit.messageHandlers.bridge.postMessage(params);
    } else if (ANDROID) {
        var jsonStr = JSON.stringify(params);
        window.messageHandlers.bridge(jsonStr);
    }
}

function httpRequest(requestParams, callBackFun) {
    var callBackFunName = getJSCallBackFunName();
    // 原生只能回调全局的函数，局部函数无法调用
    window[callBackFunName] = function(resp) {
        // 释放回调函数
        window[callBackFunName] = null;
        callBackFun(resp);
    };

    var params = {};
    params.business = "httpRequest";
    params.params = requestParams;
    params.callBackFun = callBackFunName;
    if (IOS) {
        window.webkit.messageHandlers.bridge.postMessage(params);
    } else if (ANDROID) {
        var jsonStr = JSON.stringify(params);
        window.messageHandlers.bridge(jsonStr);
    }
}

function logout() {
    var params = {};
    params.business = "logout";
    if (IOS) {
        window.webkit.messageHandlers.bridge.postMessage(params);
    } else if (ANDROID) {
        var jsonStr = JSON.stringify(params);
        window.messageHandlers.bridge(jsonStr);
    }
}

function getUserInfo(callBackFun) {
    var callBackFunName = getJSCallBackFunName();
    // 原生只能回调全局的函数，局部函数无法调用
    window[callBackFunName] = function(resp) {
        // 释放回调函数
        window[callBackFunName] = null;
        callBackFun(resp);
    };
    var params = {};
    params.business = "getUserInfo";
    params.callBackFun = callBackFunName;
    if (IOS) {
        window.webkit.messageHandlers.bridge.postMessage(params);
    } else if (ANDROID) {
        var jsonStr = JSON.stringify(params);
        window.messageHandlers.bridge(jsonStr);
    }
}

function downloadH5Resource(options, callBackFun) {
    var callBackFunName = getJSCallBackFunName();
    // 原生只能回调全局的函数，局部函数无法调用 
    window[callBackFunName] = function(resp) {
        var code = resp.code;
        if (code == 0) { // 下载成功
            var file = resp.file;
            window[callBackFunName] = null;
        } else if (code == 2) { // 下载进度
            var progress = resp.progress;
        } else if (code == 1) { // 下载失败
            var msg = resp.msg;
            window[callBackFunName] = null;
        }
        callBackFun(resp);
    };
    var params = {};
    params.business = "downloadH5Resource";
    params.params = options;
    params.callBackFun = callBackFunName;
    if (IOS) {
        window.webkit.messageHandlers.bridge.postMessage(params);
    } else if (ANDROID) {
        var jsonStr = JSON.stringify(params);
        window.messageHandlers.bridge(jsonStr);
    }
}

// 解压替换本地H5资源包
function unzipUpgradeLocalH5Resource(callBackFun) {
    var callBackFunName = getJSCallBackFunName();
    // 原生只能回调全局的函数，局部函数无法调用
    window[callBackFunName] = function() {
        // 释放回调函数
        window[callBackFunName] = null;
        callBackFun();
    };
    var params = {};
    params.business = "unzipUpgradeLocalH5Resource";
    params.callBackFun = callBackFunName;
    if (IOS) {
        window.webkit.messageHandlers.bridge.postMessage(params);
    } else if (ANDROID) {
        var jsonStr = JSON.stringify(params);
        window.messageHandlers.bridge(jsonStr);
    }
}

function reload() {
    var params = {};
    params.business = "reload";
    if (IOS) {
        window.webkit.messageHandlers.bridge.postMessage(params);
    } else if (ANDROID) {
        var jsonStr = JSON.stringify(params);
        window.messageHandlers.bridge(jsonStr);
    }
}

// 返回key: isSave
function getSaveCameraPhotoToAlbum(options, callBackFun) {
    var callBackFunName = getJSCallBackFunName();
    // 原生只能回调全局的函数，局部函数无法调用
    window[callBackFunName] = function(resp) {
        // 释放回调函数
        var code = resp.code;
        if (code == 0) { // 上传成功
            
            window[callBackFunName] = null;
        } else if (code == 2) { // 上传进度
            
        } else if (code == 1) { // 上传失败
            window[callBackFunName] = null;
        }
        callBackFun(resp);
    };
    var params = {};
    params.params = options;
    params.business = "getSaveCameraPhotoToAlbum";
    params.callBackFun = callBackFunName;
    if (IOS) {
        window.webkit.messageHandlers.bridge.postMessage(params);
    } else if (ANDROID) {
        var jsonStr = JSON.stringify(params);
        window.messageHandlers.bridge(jsonStr);
    }
}

function setSaveCameraPhotoToAlbum(isSave) {
    var callBackFunName = getJSCallBackFunName();
    // 原生只能回调全局的函数，局部函数无法调用
    window[callBackFunName] = function(resp) {
        // 释放回调函数
        var code = resp.code;
        if (code == 0) { // 上传成功
            
            window[callBackFunName] = null;
        } else if (code == 2) { // 上传进度
            
        } else if (code == 1) { // 上传失败
            window[callBackFunName] = null;
        }
        callBackFun(resp);
    };
    var params = {};
    params.params = {isSave: isSave};
    params.business = "setSaveCameraPhotoToAlbum";
    params.callBackFun = callBackFunName;
    if (IOS) {
        window.webkit.messageHandlers.bridge.postMessage(params);
    } else if (ANDROID) {
        var jsonStr = JSON.stringify(params);
        window.messageHandlers.bridge(jsonStr);
    }
}

function selectImage(options, callBackFun) {
    var callBackFunName = getJSCallBackFunName();
    // 原生只能回调全局的函数，局部函数无法调用
    window[callBackFunName] = function(resp) {
        // 释放回调函数
        var code = resp.code;
        if (code == 0) { // 上传成功
            
            window[callBackFunName] = null;
        } else if (code == 2) { // 上传进度
            
        } else if (code == 1) { // 上传失败
            window[callBackFunName] = null;
        }
        callBackFun(resp);
    };
    var params = {};
    params.params = options;
    params.business = "selectImage";
    params.callBackFun = callBackFunName;
    if (IOS) {
        window.webkit.messageHandlers.bridge.postMessage(params);
    } else if (ANDROID) {
        var jsonStr = JSON.stringify(params);
        window.messageHandlers.bridge(jsonStr);
    }
}

function checkPermissions(callBackFun) {
    var callBackFunName = getJSCallBackFunName();
    // 原生只能回调全局的函数，局部函数无法调用
    window[callBackFunName] = function(resp) {
        // 释放回调函数
        window[callBackFunName] = null;
        callBackFun(resp);
    };
    var params = {};
    params.business = "checkPermissions";
    params.callBackFun = callBackFunName;
    if(IOS) {
        
    } else if(ANDROID) {
        params.permissions = ["android.permission.WRITE_EXTERNAL_STORAGE",
        "android.permission.READ_EXTERNAL_STORAGE"
        ];
    }
    if (IOS) {
        window.webkit.messageHandlers.bridge.postMessage(params);
    } else if (ANDROID) {
        var jsonStr = JSON.stringify(params);
        window.messageHandlers.bridge(jsonStr);
    }
}

function log(msg) {
    var params = {};
    params.business = "log";
    params.msg = msg;
    if (IOS) {
        window.webkit.messageHandlers.bridge.postMessage(params);
    } else if (ANDROID) {
        var jsonStr = JSON.stringify(params);
        window.messageHandlers.bridge(jsonStr);
    }
}

function sendEvent(options) {
    var params = {};
    params.business = "sendEvent";
    params.params = options;
    if (IOS) {
        window.webkit.messageHandlers.bridge.postMessage(params);
    } else if (ANDROID) {
        var jsonStr = JSON.stringify(params);
        window.messageHandlers.bridge(jsonStr);
    }
}

function setTopBar(options) {
    var params = {};
    params.business = "setTopBar";
    params.params = options;
    if (IOS) {
        window.webkit.messageHandlers.bridge.postMessage(params);
    } else if (ANDROID) {
        var jsonStr = JSON.stringify(params);
        window.messageHandlers.bridge(jsonStr);
    }
}

function setWebViewHeight(width, height) {
    var params = {};
    params.business = "setWebViewHeight";
    params.params = {
        width: width,
        height: height
    }; // 单位px
    if (IOS) {
        window.webkit.messageHandlers.bridge.postMessage(params);
    } else if (ANDROID) {
        var jsonStr = JSON.stringify(params);
        window.messageHandlers.bridge(jsonStr);
    }
}

function getInterfaceHost(callBackFun) {
    var callBackFunName = getJSCallBackFunName();
    // 原生只能回调全局的函数，局部函数无法调用
    window[callBackFunName] = function(resp) {
        // 释放回调函数
        window[callBackFunName] = null;
        callBackFun(resp);
    };
    var params = {};
    params.business = "getInterfaceHost";
    params.callBackFun = callBackFunName;
    if (IOS) {
        window.webkit.messageHandlers.bridge.postMessage(params);
    } else if (ANDROID) {
        var jsonStr = JSON.stringify(params);
        window.messageHandlers.bridge(jsonStr);
    }
}

function selectLocation(options, callBackFun) {
    var callBackFunName = getJSCallBackFunName();
    // 原生只能回调全局的函数，局部函数无法调用
    window[callBackFunName] = function(resp) {
        // 释放回调函数
        window[callBackFunName] = null;
        callBackFun(resp);
    };
    var params = {};
    params.business = "selectLocation";
    params.params = options;
    params.callBackFun = callBackFunName;
    if (IOS) {
        window.webkit.messageHandlers.bridge.postMessage(params);
    } else if (ANDROID) {
        var jsonStr = JSON.stringify(params);
        window.messageHandlers.bridge(jsonStr);
    }
}

function getStatusBarHeight(callBackFun) {
    var callBackFunName = getJSCallBackFunName();
    // 原生只能回调全局的函数，局部函数无法调用
    window[callBackFunName] = function(resp) {
        // 释放回调函数
        window[callBackFunName] = null;
        callBackFun(resp);
    };
    var params = {};
    params.business = "getStatusBarHeight";
    params.callBackFun = callBackFunName;
    if (IOS) {
        window.webkit.messageHandlers.bridge.postMessage(params);
    } else if (ANDROID) {
        var jsonStr = JSON.stringify(params);
        window.messageHandlers.bridge(jsonStr);
    }
}

function getWindowHeight(callBackFun) {
    var callBackFunName = getJSCallBackFunName();
    // 原生只能回调全局的函数，局部函数无法调用
    window[callBackFunName] = function(resp) {
        // 释放回调函数
        window[callBackFunName] = null;
        callBackFun(resp);
    };
    var params = {};
    params.business = "getWindowHeight";
    params.callBackFun = callBackFunName;
    if (IOS) {
        window.webkit.messageHandlers.bridge.postMessage(params);
    } else if (ANDROID) {
        var jsonStr = JSON.stringify(params);
        window.messageHandlers.bridge(jsonStr);
    }
}

 // 梯智眼七牛云视频对讲
function videoTalkback(videoParams) {
    var callBackFunName = getJSCallBackFunName();
    // 原生只能回调全局的函数，局部函数无法调用
    window[callBackFunName] = function(resp) {
        // 释放回调函数
        window[callBackFunName] = null;
        callBackFun(resp);
    };
    var params = {};
    params.business = "videoTalkback";
    params.params =videoParams; // 单位px
    if (IOS) {
        window.webkit.messageHandlers.bridge.postMessage(params);
    } else if (ANDROID) {
        var jsonStr = JSON.stringify(params);
        window.messageHandlers.bridge(jsonStr);
    }
}

// 进去工单补录详情页面
function toWorkOrderAdditioinalRecordDetailPage(workOrderParams) {
    var params = {};
    params.business = "toWorkOrderAdditioinalRecordDetailPage";
    params.params =workOrderParams; 
    if (IOS) {
        window.webkit.messageHandlers.bridge.postMessage(params);
    } else if (ANDROID) {
        var jsonStr = JSON.stringify(params);
        window.messageHandlers.bridge(jsonStr);
    }
}


export {
    setStatusBarColor,
    navigateToPage,
    popPage,
    saveData,
    getData,
    deleteData,
    dataDataStatistic,
    backToMainPage,
    httpRequest,
    logout,
    getUserInfo,
    downloadH5Resource,
    unzipUpgradeLocalH5Resource,
    reload,
    selectImage,
    checkPermissions,
    log,
    sendEvent,
    setTopBar,
    todoStateChange,
    setWebViewHeight,
    getInterfaceHost,
    selectLocation,
    getStatusBarHeight,
    getWindowHeight,
    videoTalkback,
    toWorkOrderAdditioinalRecordDetailPage,
    toNewPage
}

native.js


    var browser={
        versions:function(){
            var u = navigator.userAgent;
            var app = navigator.appVersion;
            return {
                trident: u.indexOf('Trident') > -1, //IE内核
                presto: u.indexOf('Presto') > -1, //opera内核
                webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
                mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                    android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
                    iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
                    iPad: u.indexOf('iPad') > -1, //是否iPad
                    webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
                    weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
                    qq: u.match(/\sQQ/i) == " qq" //是否QQ
                    };
                    }(),
                language:(navigator.browserLanguage || navigator.language).toLowerCase()
    }
    var IOS = browser.versions.ios;
    var ANDROID = browser.versions.android;
export {IOS, ANDROID}
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容