JSBridge
1.? Why do we need JSBridge?
2.? Why is “JS”Bridge?
3.? What is JSBridge?
Why do we need JSBridge?
背景
隨著HTML5的不斷普及及優(yōu)化袍祖，其在移動端開發(fā)的應用也越來越多。
why?
H5是跨平臺的
依托瀏覽器運行广辰，不用區(qū)分ios或者安卓去做不同的版本的開發(fā)拂酣，這樣可以節(jié)約開發(fā)成本缨历。當然在ios和安卓各種機型下是需要去適配的，比如大家比較熟悉的rem布局以及flex布局等等献酗。
客戶端發(fā)版限制
尤其是ios傲醉，要審核。比如要急著上線一個功能或者活動零如，那么這時就需要h5躏将。還有就是一些可能會頻繁改動或者新增的功能，比如商品詳情這種埠况，新增品類啊耸携，某種品類新增類目啊等等，更新頻繁的辕翰，如果用native開發(fā)的話夺衍，要頻繁的發(fā)版，這就不大現(xiàn)實喜命。這也是為什么現(xiàn)在大家比較推崇的Hybird混合開發(fā)沟沙。
顧名思義河劝，JSBridge是一座用JavaScript搭建起來的橋，一端是H5矛紫，一端是native赎瞎。我們搭建這座橋的目的也很簡單，讓native可以調用H5的js代碼颊咬，讓H5可以“調用”原生的代碼务甥。
Why is “JS”Bridge
為什么是JSbridge ?，而不是iOS/安卓 bridge喳篇，那是因為這個橋敞临，是通過js來搭建的，也就是用js來寫的麸澜。
這個比較容易理解挺尿，web端支持JavaScript，native有webview炊邦，webview可以在所加載的頁面加載完成后調用頁面的JavaScript代碼编矾。所以，使用JavaScript就理所當然了馁害。
What is JSBridge?
1.Android
2.? IOS
Android調用JS
WebView.loadUrl(“javascript:function()”)
mWebView.loadUrl("javascript:JSBridge.onFinish(port,jsonObj);");
JS調用Android
WebView的JavascriptInterface
WebViewClient.shouldOverrideUrlLoading()
WebChromeClient.onConsoleMessage()
WebChromeClient.onJsPrompt()
WebView的JavascriptInterface
是Android官方提供的工js和Native通信方案
1窄俏，實現(xiàn)一個java類
public class JavascriptInterface {
@JavascriptInterface
public void showToast(String toast) {
Toast.makeText(MainActivity.this, toast, Toast.LENGTH_SHORT).show();
}
2，在webView中注冊這個類
webView.addJavascriptInterface(new JavascriptInterface(), "javascriptInterface");
3蜗细，在js中直接調用這個接口
function showToast(text){
window.javascriptInterface.showToast(text);
}
WebViewClient.shouldOverrideUrlLoading()
這個方法是攔截所有webView的跳轉裆操，頁面可以構造一個特殊格式的Url跳轉怒详，shouldOverrideUrlLoading攔截Url后判斷其格式炉媒，然后Native就能執(zhí)行自身的邏輯了
比如用 iframe 打開一個schema協(xié)議
public class CustomWebViewClient extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (isJsBridgeUrl(url)) {
// JSbridge的處理邏輯
return true;
}
return super.shouldOverrideUrlLoading(view, url);
WebChromeClient.onConsoleMessage()
在js中執(zhí)行console.log(), 會進入Android的WebChromeClient.consoleMessage()回調
public class CustomWebChromeClient extends WebChromeClient {
@Override
public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
super.onConsoleMessage(consoleMessage);
String msg = consoleMessage.message();//Javascript輸入的Log內容
}
}
WebChromeClient.onJsPrompt()
在js中執(zhí)行alert、confirm和prompt這三個方法時昆烁，會進入Android的onJsAlert吊骤、onJsConfirm和onJsPrompt回調
由于prompt的使用頻率較低，因此通常采用prompt實現(xiàn)js和Native的通信
1. 設計schema
和網站的http協(xié)議一樣静尼，約定一個js和Android的通信協(xié)議
var JSBridgeUrl = 'JSBridge://className:callbackAddress/methodName?jsonObj';
// className: 表示java的類名
// callbackAddress： js回調的標識
// methodName： java中的方法名
// jsonObj： 接口數(shù)據(jù)
2白粉，在js中，可以采用如下方法調用安卓的方法
var JSBridge = {
call: function(className, method, params, callback){
var uri = 'JSBridge://' + className + ':' + callback + '/' + method + '?' + params;
window.prompt(uri, "");
}
}
// 下面會調用java中的 bridge.showToast方法
JSBridge.call('bridge','showToast',{'msg':'Hello JSBridge'},
function(res){alert(JSON.stringify(res))});
3鼠渺，在java中鸭巴， 可以如下實現(xiàn)：
public class JSBridgeWebChromeClient extends WebChromeClient {
@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
result.confirm(JSBridge.callJava(view, message));
return true;
}
}
// 調用java邏輯
public class JSBridge {
...
public static String callJava(WebView webView, String uriString) {
String methodName = "";
String className = "";
String param = "{}";
String port = "";
if (!TextUtils.isEmpty(uriString) && uriString.startsWith("JSBridge")) {
Uri uri = Uri.parse(uriString);
className = uri.getHost();
param = uri.getQuery();
port = uri.getPort() + "";
String path = uri.getPath();
if (!TextUtils.isEmpty(path)) {
methodName = path.replace("/", "");
}
}
// 基于上面的className、methodName和port path調用對應類的方法if (exposedMethods.containsKey(className)) {? ? HashMapmethodHashMap = exposedMethods.get(className);
if (methodHashMap != null && methodHashMap.size() != 0 && methodHashMap.containsKey(methodName)) {
Method method = methodHashMap.get(methodName);
if (method != null) {
try {
method.invoke(null, webView, new JSONObject(param), new Callback(webView, port));
} catch (Exception e) {
e.printStackTrace();
}
}
}
}
return null;
}
}
// 直接進入showToast函數(shù)的實現(xiàn)
public static void showToast(WebView webView, JSONObject param, final Callback callback) {
String message = param.optString("msg");
Toast.makeText(webView.getContext(), message, Toast.LENGTH_SHORT).show();
if (null != callback) {
try {
JSONObject object = new JSONObject();
object.put("key", "value");
object.put("key1", "value1");
callback.apply(getJSONObject(0, "ok", object));
} catch (Exception e) {
e.printStackTrace();
}
}
}
// 上述程序的callback.apply方法實現(xiàn)如下： 即通過webView.loadUrl實現(xiàn)java調用js的方法
public class Callback {? ? private static Handler mHandler = new Handler(Looper.getMainLooper());? ??
private static final String CALLBACK_JS_FORMAT = "javascript:JSBridge.onFinish('%s', %s);";? ?
?private String mPort;? ??
private WeakReferencemWebViewRef;
public Callback(WebView view, String port) {
mWebViewRef = new WeakReference<>(view);
mPort = port;
}
public void apply(JSONObject jsonObject) {
final String execJs = String.format(CALLBACK_JS_FORMAT, mPort, String.valueOf(jsonObject));
if (mWebViewRef != null && mWebViewRef.get() != null) {
mHandler.post(new Runnable() {
@Override
public void run() {
mWebViewRef.get().loadUrl(execJs);
}
});
}
}
}
IOS調用JS
先了解下ios 提供的UIWebView
UIWebView是iOS內置的瀏覽器控件拦盹，UIWebView用于在APP中嵌入網頁鹃祖，通常是html網頁，也可以是PDF普舆、txt文檔等恬口。但需要注意的是校读，Safari瀏覽器使用的瀏覽器控件和UIwebView組件并不是同一個，兩者在性能上有很大的差距祖能。幸運的是歉秫，蘋果發(fā)布iOS8的時候，新增了一個WKWebView組件养铸，如果你的APP只考慮支持iOS8及以上版本雁芙，那么你就可以使用這個新的瀏覽器控件了。
UIWebView有一些方法：
loadData：? 設置頁面的內容钞螟，MIME類型却特，編碼，基礎url
loadRequest：加載網絡內容
loadHTMLString：加載本地HTML文件
stopLoading：停止加載
goBack：后退
goForward：前進
reload：重新加載
stringByEvaluatingJavaScriptFromString：執(zhí)行一段js腳本筛圆，并且返回執(zhí)行結果
iOS（Objective-C或Swift）調用Javascript方法
// Swift1裂明，通過UIWebView組件的stringByEvaluatingJavaScriptFromString方法來實現(xiàn)的，該方法返回js腳本的執(zhí)行結果
webview.stringByEvaluatingJavaScriptFromString("Math.random()")
// OC
[webView stringByEvaluatingJavaScriptFromString:@"Math.random();"];
舉個例子：（比如要彈出一個alert）
NSString *jsStr = [NSString stringWithFormat:@"showAlert('%@')",@"這里是JS中alert彈出的message"];
[_webView stringByEvaluatingJavaScriptFromString:jsStr];
注意：該方法會同步返回一個字符串太援，因此是一個同步方法闽晦，可能會阻塞UI。
官方推薦使用WKWebView的evaluateJavaScript:completionHandler:代替這個方法
function asyncAlert(content) {
setTimeout(function(){
alert(content);
},1);
}
2提岔，JavaScriptCore
首先導入JavaScriptCore庫, 然后在OC中獲取JS的上下文
JSContext *context =
[self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
NSString *textJS = @"showAlert('這里是JS中alert彈出的message')";
[context evaluateScript:textJS];
JS調用IOS方法
1仙蛉，UIWebView有個特性：在UIWebView內發(fā)起的所有網絡請求，都可以通過delegate函數(shù)在Native層得到通知碱蒙。
那么我們就可以在UIWebView內發(fā)起一個自定義的(schema協(xié)議)網絡請求荠瘪，比如這樣的格式：jsbridge://methodName?param1=value1?m2=value2
于是在UIWebView的delegate函數(shù)中，我們只要發(fā)現(xiàn)是jsbridge://開頭的地址赛惩，就不進行內容的加載哀墓，轉而執(zhí)行相應的調用邏輯。?
H5喚起IOS的分享組件
JS代碼
var JSBridgeUrl = 'JSBridge://doAction?title=分享標題&desc=分享描述&link=http%3A%2F%2Fwww.ffan.com';
var iframe = document.createElement('iframe');
iframe.style.width = '1px';
iframe.style.height = '1px';
iframe.style.display = 'none';
iframe.src = url;
document.body.appendChild(iframe);
setTimeout(function() {
iframe.remove();
}, 100);
IOS代碼
func webView(webView: UIWebView, shouldStartLoadWithRequest request: NSURLRequest, navigationType: UIWebViewNavigationType) -> Bool {
print("shouldStartLoadWithRequest")
let url = request.URL
let scheme = url?.scheme
let method = url?.host
let query = url?.query
if url != nil && scheme == "jsbridge" {
print("scheme == \(scheme)")
print("method == \(method)")
print("query == \(query)")
switch method! {
case "getData":
self.getData()
case "putData":
self.putData()
case "gotoWebview":
self.gotoWebview()
case "gotoNative":
self.gotoNative()
case "doAction":
self.doAction()
case "configNative":
self.configNative()
default:
print("default")
}
return false
} else {
return true
}
}
JSBridge.doAction('share', {
title: data.title
desc: data.desc
link: data.link
imgs_url: data.img
});
回調的話喷兼，native 另外用 stringByEvaluatingJavaScriptFromString 方法通知 js篮绰。
2，JavaScriptCore
IOS代碼
JSContext *context =
[self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
JSContext *context =
[self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//定義好JS要調用的方法, share就是調用的share方法名
context[@"share"] = ^() {
NSLog(@"+++++++Begin Log+++++++");
NSArray *args = [JSContext currentArguments];
UIAlertView *alertView =
[[UIAlertView alloc] initWithTitle:@"方式二" message:@"這是OC原生的彈出窗"
delegate:self cancelButtonTitle:@"收到" otherButtonTitles:nil];
[alertView show];
for (JSValue *jsVal in args) {
NSLog(@"%@", jsVal.toString);
}
NSLog(@"-------End Log-------");
};
}
H5代碼
最后說下參數(shù)傳遞
1季惯，將參數(shù)以 JSON 的形式傳遞吠各，但是因為要附加在 url 之后，所以我們將 JSON 進行了 Base64 編碼勉抓，以保證 url 中不會出現(xiàn)一些非法的字符贾漏。
2，用 JSON 傳遞參數(shù)藕筋，但是將 JSON 放在 UIWebView 中的一個全局數(shù)組中纵散，UIWebView 當需要讀取參數(shù)時，通過讀取這個全局數(shù)組來獲得相應的參數(shù)。
