## 前言 感谢名师堂的小伙伴提供的代码参考。 以下的方法并没有核心的计算，只是对一些方法参数以及常用通讯函数进行了处理，作为与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 } ~~~