移动网络的发展推动移动APP盛行，目前市场上APP开发技术的类型主要有三种，native开发、hybrid开发、RN/weex开发。
本文主要讲述hybrid APP中js调用native原理。hybrid APP就是利用Android/iOS上webview加载web网页，其实就是相当于用native做了一个外壳，然后里面加载网页。那站在业务层面上，只要没有太依赖性能，都能满足需求，那这里面有可能会用到一些硬件功能，比如：相机、位置等，这时就必须调用native。
1.js 调用 native，Android里面主要通过WebViewClient.shouldOverrideUrlLoading方法拦截指定格式的URL，通过拦截特定URL和获取对应的参数，来调用native对应的功能。这里我们主要通过cordova插件，来做例子说明
var cordova = {
/**
* Plugin callback mechanism.
*/
// Randomize the starting callbackId to avoid collisions after refreshing or navigating.
// This way, it's very unlikely that any new callback would get the same callbackId as an old callback.
callbackId: Math.floor(Math.random() * 2000000000),
callbacks: {},
callbackStatus: {
NO_RESULT: 0,
OK: 1,
CLASS_NOT_FOUND_EXCEPTION: 2,
ILLEGAL_ACCESS_EXCEPTION: 3,
INSTANTIATION_EXCEPTION: 4,
MALFORMED_URL_EXCEPTION: 5,
IO_EXCEPTION: 6,
INVALID_ACTION: 7,
JSON_EXCEPTION: 8,
ERROR: 9
},
/**
* Called by native code when returning successful result from an action.
*/
callbackSuccess: function(callbackId, args) {
cordova.callbackFromNative(callbackId, true, args.status, [args.message], args.keepCallback);
},
/**
* Called by native code when returning error result from an action.
*/
callbackError: function(callbackId, args) {
// TODO: Deprecate callbackSuccess and callbackError in favour of callbackFromNative.
// Derive success from status.
cordova.callbackFromNative(callbackId, false, args.status, [args.message], args.keepCallback);
},
/**
* Called by native code when returning the result from an action.
*/
callbackFromNative: function(callbackId, isSuccess, status, args, keepCallback) {
try {
var callback = cordova.callbacks[callbackId];
if (callback) {
if (isSuccess && status == cordova.callbackStatus.OK) {
callback.success && callback.success.apply(null, args);
} else if (!isSuccess) {
callback.fail && callback.fail.apply(null, args);
}
/*
else
Note, this case is intentionally not caught.
this can happen if isSuccess is true, but callbackStatus is NO_RESULT
which is used to remove a callback from the list without calling the callbacks
typically keepCallback is false in this case
*/
// Clear callback if not expecting any more results
if (!keepCallback) {
delete cordova.callbacks[callbackId];
}
}
}
catch (err) {
var msg = "Error in " + (isSuccess ? "Success" : "Error") + " callbackId: " + callbackId + " : " + err;
console && console.log && console.log(msg);
cordova.fireWindowEvent("cordovacallbackerror", { 'message': msg });
throw err;
}
},
};
上面我们看到cordova的初始化，这里面主要对回调callback进行定义，js调用native之后，native处理完结果，将结果返回js，就是通过callback完成。
- IOSexec，是初始化 jsBridge。
function iOSExec() {
// 初始化jsToNativeModes
if (bridgeMode === undefined) {
bridgeMode = jsToNativeModes.IFRAME_NAV;
}
if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.cordova && window.webkit.messageHandlers.cordova.postMessage) {
bridgeMode = jsToNativeModes.WK_WEBVIEW_BINDING;
}
// 定义成功、错误回调，action参数序列化等
var successCallback, failCallback, service, action, actionArgs, splitCommand;
var callbackId = null;
if (typeof arguments[0] !== "string") {
// FORMAT ONE
successCallback = arguments[0];
failCallback = arguments[1];
service = arguments[2];
action = arguments[3];
actionArgs = arguments[4];
// Since we need to maintain backwards compatibility, we have to pass
// an invalid callbackId even if no callback was provided since plugins
// will be expecting it. The Cordova.exec() implementation allocates
// an invalid callbackId and passes it even if no callbacks were given.
// 设置默认callbackId
callbackId = 'INVALID';
} else {
// FORMAT TWO, REMOVED
try {
splitCommand = arguments[0].split(".");
action = splitCommand.pop();
service = splitCommand.join(".");
actionArgs = Array.prototype.splice.call(arguments, 1);
console.log('The old format of this exec call has been removed (deprecated since 2.1). Change to: ' +
"cordova.exec(null, null, \"" + service + "\", \"" + action + "\"," + JSON.stringify(actionArgs) + ");"
);
return;
} catch (e) {}
}
// If actionArgs is not provided, default to an empty array
actionArgs = actionArgs || [];
// Register the callbacks and add the callbackId to the positional
// arguments if given.
// cordova.callbackId使用后自增，callbackId实际上是一个类名带唯一id的String
if (successCallback || failCallback) {
callbackId = service + cordova.callbackId++;
cordova.callbacks[callbackId] =
{success:successCallback, fail:failCallback};
}
actionArgs = massageArgsJsToNative(actionArgs);
var command = [callbackId, service, action, actionArgs];
// Stringify and queue the command. We stringify to command now to
// effectively clone the command arguments in case they are mutated before
// the command is executed.
commandQueue.push(JSON.stringify(command));
// 参数初始化后，就开始调用pokeNative
if (bridgeMode === jsToNativeModes.WK_WEBVIEW_BINDING) {
window.webkit.messageHandlers.cordova.postMessage(command);
} else {
// If we're in the context of a stringByEvaluatingJavaScriptFromString call,
// then the queue will be flushed when it returns; no need for a poke.
// Also, if there is already a command in the queue, then we've already
// poked the native side, so there is no reason to do so again.
/* 这里的判断条件
isInContextOfEvalJs：在执行上下文，queue会在返回后自动刷新，无需继续执行(这个在下文ative的方法分析中可看出，每 次执行结束仍然会继续掉executePending)
commandQueue同理
*/
if (!isInContextOfEvalJs && commandQueue.length == 1) {
pokeNative();
}
}
}
3.构造链接，并发送链接pokeNative
这里我们看到调用native可以通过iframe和通过XHR完成。
function pokeNative() {
switch (bridgeMode) {
case jsToNativeModes.XHR_NO_PAYLOAD:
case jsToNativeModes.XHR_WITH_PAYLOAD:
case jsToNativeModes.XHR_OPTIONAL_PAYLOAD:
pokeNativeViaXhr();
break;
default: // iframe-based.
pokeNativeViaIframe();
}
}
-通过XHR， 是通过构造XMLHttpRequest对象，然后将链接格式设置为："/!gap_exec?" + (+new Date())，请求数据放置在nativeFetchMessages中，然后native那边拦截对应的XHR和这种格式链接，拦截之后再分发到不同的原生插件中
function pokeNativeViaXhr() {
// This prevents sending an XHR when there is already one being sent.
// This should happen only in rare circumstances (refer to unit tests).
if (execXhr && execXhr.readyState != 4) {
execXhr = null;
}
// Re-using the XHR improves exec() performance by about 10%.
execXhr = execXhr || new XMLHttpRequest();
// Changing this to a GET will make the XHR reach the URIProtocol on 4.2.
// For some reason it still doesn't work though...
// Add a timestamp to the query param to prevent caching.
execXhr.open('HEAD', "/!gap_exec?" + (+new Date()), true);
if (!vcHeaderValue) {
vcHeaderValue = /.*\((.*)\)$/.exec(navigator.userAgent)[1];
}
execXhr.setRequestHeader('vc', vcHeaderValue);
execXhr.setRequestHeader('rc', ++requestCount);
if (shouldBundleCommandJson()) {
execXhr.setRequestHeader('cmds', iOSExec.nativeFetchMessages());
}
execXhr.send(null);
}
-通过建立iframe，src设置为自定的链接格式。
if (execIframe && execIframe.contentWindow) {
execIframe.contentWindow.location = 'gap://ready';
} else {
execIframe = document.createElement('iframe');
execIframe.style.display = 'none';
execIframe.src = 'gap://ready';
document.body.appendChild(execIframe);
}
failSafeTimerId = setTimeout(function() {
if (commandQueue.length) {
// CB-10106 - flush the queue on bridge change
if (!handleBridgeChange()) {
pokeNative();
}
}
}, 50);
这就是js调用native的方式，native完成处理之后，通过webView.addJavascriptInterface调用js中挂载在window对象的方法，这是一个统一的回调nativeCallback ，通过callbackID识别出本次结果需要回调js中的哪个function。然后本次交互就全部完成了
iOSExec.nativeCallback = function(callbackId, status, message, keepCallback) {
return iOSExec.nativeEvalAndFetch(function() {
var success = status === 0 || status === 1;
var args = convertMessageToArgsNativeToJs(message);
cordova.callbackFromNative(callbackId, success, status, args, keepCallback);
});
};
总结一下，主要同理是通过native两个方法：addJavascriptInterface和shouldOverrideUrlLoading完成js和native交互。