## 前言 感謝名師堂的小伙伴提供的代碼參考。 以下的方法并沒有核心的計算，只是對一些方法參數以及常用通訊函數進行了處理，作為與webview通訊的底層類實現。 ## jsBridge.js ~~~ //native調用h5的相關方法和處理邏輯--------------------------------------- //實現eval() var realizeEval = function(data){ try{ var fn = null try { fn = eval(data.methodName); } catch (error) { //方法不存在 handleNativeCallbackError(data); return } var fnData = data.data|| {}; var ownFnData = new fn(fnData); //h5方法返回的私有數據 if(typeof ownFnData != 'object'){ ownFnData = {}; } ownFnData = JSON.stringify(ownFnData); handleNativeCallbackSuccess(data,ownFnData); }catch (error) { //方法內部出錯 handleNativeCallbackFailure(error, data) } } /** * @description native調用h5的方法 * @param {obj} data native調用h5所需的參數 */ var nativeCallH5 = function(data) { try { realizeEval(data); } catch (error) { } } /** * @description native調用h5方法成功且業務處理成功的回調 * @param {obj} data native傳給h5的數據 * @param {obj} ownFnData h5方法中的私有數據 */ var handleNativeCallbackSuccess = function(data,ownFnData) { var param = {}; param.callbackId = data.callbackId; param.code = 1; param.msg = '調用成功'; param.data = {}; if(ownFnData){ //若h5存在私有數據，則返回私有數據 param.data = JSON.parse(ownFnData); } if(window.xhxapp){ window.xhxapp.handleNativeCallback(JSON.stringify(param)) } } /** * @description native調用h5方法時方法不存在的回調 * @param {obj} data native傳給h5的數據 */ var handleNativeCallbackError = function(data) { var param = {}; param.callbackId = data.callbackId; param.msg = data.methodName + '方法不存在'; param.code = 0; if(window.xhxapp){ window.xhxapp.handleNativeCallback(JSON.stringify(param)); } } /** * @description native調用h5方法時成功但處理業務失敗的回調 * @param {obj} data native傳給h5的數據 */ var handleNativeCallbackFailure = function(error, data) { var param = {}; param.callbackId = data.callbackId; param.msg = error, param.code = -1; if(window.xhxapp){ window.xhxapp.handleNativeCallback(JSON.stringify(param)); } } //h5調用native的相關方法和處理邏輯----------------------------------------------- // 存儲callbackId對應的方法 var callbackMap = {}; /** * @description h5調用native的方法 * 約定參數只能為2個或4個 * @param {String} funcName h5調用native的方法 * @param {obj} data h5傳給native的參數 * @param {Function} success h5調用native成功的回調函數 * @param {Function} error h5調用native失敗的回調函數 */ var h5CallNative = function(funcName, data, success, error) { var callbackId = 'xhx' + '_' + new Date().getTime(); if(arguments.length == 4){ callbackMap[callbackId]={}; callbackMap[callbackId]['success'] = success; callbackMap[callbackId]['error'] = error; } var callNativeData = {}; callNativeData['callbackId'] = callbackId; callNativeData['methodName'] = funcName; callNativeData['data'] = data; if(window.xhxapp){ window.xhxapp.h5CallNative(JSON.stringify(callNativeData)); } } /** * @description h5調用native成功或者失敗,native調用h5的回調 * 注意，這里一般對本地函數有一些要求，要求第一個參數時data * @param {OBJ} data 參數 */ var handleH5Callback = function(data) { var callbackId = data.callbackId; var code = data.code; var msg = data.msg; console.log(data,'data'); if(callbackMap[callbackId]){ var callback = callbackMap[callbackId]; if(code != 1){ callback.error(msg); } else { callback.success(data.data); } delete callbackMap.callbackId } } module.exports = { handleH5Callback: handleH5Callback, nativeCallH5: nativeCallH5, h5CallNative: h5CallNative, handleNativeCallbackSuccess: handleNativeCallbackSuccess, // handleNativeCallbackError: handleNativeCallbackError, handleNativeCallbackFailure: handleNativeCallbackFailure } ~~~