關于safe-java-js-webView-bridge庫與JsBridge庫的對比
1.庫的地址：
safe-java-js-webView-bridge：https://github.com/pedant/safe-java-js-webview-bridge
JsBridge：https://github.com/lzyzsd/JsBridge
2.safe-java-js-webView-bridge
2.1.schema設計
eg:{"method":"alert","types":["string"],"args":["我是確認框"]}
2.2.如何使用
1.java調用js，不帶回調
還是使用Android自帶的API：
webView.loadUrl(javascript:method());
2.java調用js，帶回調
目前好像只能在webView.loadUrl(javascript:method());的Javascript.method()中再另外實現一個方法HostApp.method(params)//HostApp為注入到js的類名稱，下同來實現回調，所以算不上回調，而且方法量會越來越多。
3.js調用java，不帶回調
HostApp.method(params);
4.js調用java，帶回調
//js的代碼
HostApp.delayJsCallBack(3, 'call back haha', function (msg) {
HostApp.alert(msg);
});
//native的代碼
public static void delayJsCallBack(WebView view, int ms, final String backMsg, final JsCallback jsCallback) {
TaskExecutor.scheduleTaskOnUiThread(ms * 1000, new Runnable() {
@Override
public void run() {
try {
jsCallback.apply(backMsg);
} catch (JsCallback.JsCallbackException je) {
je.printStackTrace();
}
}
});
而其中的jsCallback.apply(backMsg)的方法里面最終還是調用了如下方法實現回調
String execJs = String.format(CALLBACK_JS_FORMAT, mInjectedName,
mIndex, mIsPermanent, sb.toString());
mWebViewRef.get().loadUrl(execJs);
本質上還是用了java調用js那套方法。
2.3.注入原理
1.注入的方法
private void initWebView() {
WebSettings ws = wv.getSettings();
ws.setJavaScriptEnabled(true);
wv.setWebChromeClient(
//“HostApp”為注入到js的類名稱，HostJsScope.class為注入到js的方法
new CustomChromeClient("HostApp", HostJsScope.class)
);
wv.loadUrl("file:///android_asset/demo6.html");
}
public class CustomChromeClient extends InjectedChromeClient {
public CustomChromeClient (String injectedName, Class injectedCls) {
super(injectedName, injectedCls);
}
@Override
public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
// to do your work
// ...
return super.onJsAlert(view, url, message, result);
}
@Override
public void onProgressChanged (WebView view, int newProgress) {
super.onProgressChanged(view, newProgress);
// to do your work
// ...
}
@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
// to do your work
// ...
return super.onJsPrompt(view, url, message, defaultValue, result);
}
}
接著就是實現HostJsScope這個類，而方法的第一個參數要是webView，而且必須為public static，eg：
public static void alert(WebView webView, int msg) {
alert(webView, String.valueOf(msg));
}
2.注入原理
2.1何時注入
在InjectedChromeClient類的onProgressChanged()函數中，注釋有講解
/**
* 進度條改變的回調函數
* @param view
* @param newProgress
*/
@Override
public void onProgressChanged(WebView view, int newProgress) {
//為什么要在這里注入JS
//1 OnPageStarted中注入有可能全局注入不成功，導致頁面腳本上所有接口任何時候都不可用
//2 OnPageFinished中注入，雖然最后都會全局注入成功，但是完成時間有可能太晚，當頁面在初始化調用接口函數時會等待時間過長
//3 在進度變化時注入，剛好可以在上面兩個問題中得到一個折中處理
//為什么是進度大于25%才進行注入，因為從測試看來只有進度大于這個數字頁面才真正得到框架刷新加載，保證100%注入成功
if (newProgress <= 25) {
mIsInjectedJS = false;
}
//進度大于25%時開始注入
else if (!mIsInjectedJS) {
//在js中執行已經拼接好的代碼，實行java代碼注入到js
//js中拼接好的代碼的作用是根據事件，匹配出java中的方法
view.loadUrl(mJsCallJava.getPreloadInterfaceJS());
mIsInjectedJS = true;
Log.d(TAG, " inject js interface completely on progress " + newProgress);
}
super.onProgressChanged(view, newProgress);
}
2.2如何注入
1.先留意到view.loadUrl(mJsCallJava.getPreloadInterfaceJS());是將拼接好的js代碼注入到js中。
2.繼續追蹤，發現在jsCallJava類的構造方法中，實現了拼接js代碼的方法，而拼接的內容如下：
javascript:(function(b)
{
console.log("HostApp initialization begin");
var a={
queue:[],callback:function(){
var d=Array.prototype.slice.call(arguments,0);
var c=d.shift();
var e=d.shift();
this.queue[c].apply(this,d);
if(!e){
delete this.queue[c]
}
}
};
a.alert=a.alert=a.alert=a.delayJsCallBack=a.getIMSI=a.getOsSdk=a.goBack=a.overloadMethod=a.overloadMethod=a.passJson2Java=a.passLongType=a.retBackPassJson=a.retJavaObject=a.testLossTime=a.toast=a.toast=function(){
var f=Array.prototype.slice.call(arguments,0);
if(f.length<1){
throw"HostApp call error, message:miss method name"
}
var e=[];
for(var h=1;h<f.length;h++){
var c=f[h];
var j=typeof c;
e[e.length]=j;
if(j=="function"){
var d=a.queue.length;
a.queue[d]=c;
f[h]=d
}
}
//拼接出jsonStr，ep:{"method":"retBackPassJson","types":["object"],"args":[{"b1":"back-value1","b2":"back-value2"}]}
var g=JSON.parse(prompt(JSON.stringify({
method:f.shift(),types:e,args:f
})));
if(g.code!=200){
throw"HostApp call error, code:"+g.code+", message:"+g.result
}
return g.result
};
Object.getOwnPropertyNames(a).forEach(function(d){
var c=a[d];
if(typeof c==="function"&&d!=="callback"){
a[d]=function(){
return c.apply(a,[d].concat(Array.prototype.slice.call(arguments,0)))
}
}
});
b.HostApp=a;
console.log("HostApp initialization end")
})(window);
留意這段拼接的js代碼
a.alert=a.alert=a.alert=a.delayJsCallBack=
a.getIMSI=a.getOsSdk=a.goBack=
a.overloadMethod=a.overloadMethod=
a.passJson2Java=a.passLongType=
a.retBackPassJson=a.retJavaObject=
a.testLossTime=a.toast=a.toast=function(){
//。。。
}
其中a.alert=。。。這些一連串的方法是native通過反射獲取HostJsScope這個類中的所有方法，并過濾出public static 與 第一個參數為webView的方法。
繼續留意拼接的js代碼
var g=JSON.parse(prompt(JSON.stringify({
method:f.shift(),types:e,args:f
})));
if(g.code!=200){
throw"HostApp call error, code:"+g.code+", message:"+g.result
}
return g.result
這里的prompt是會回調native的onJsPrompt()方法，而看參數是拼接出的schema
繼續往前看onJsPrompt()方法
@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
String endResult = mJsCallJava.call(view, message);
result.confirm(endResult);
return true;
}
這里的mJsCallJava.call(view,message)就是根據之前定下來的schema來拆分message這個參數，找到對應的類、方法、參數就能通過反射執行
...
//利用反射執行HostJsScope的方法
return getReturn(jsonStr, 200, currMethod.invoke(null, values));
...
留意getReturn這個方法，會根據執行的結果與要返回的值拼接json數據
eg:result:{"code": 200, "result": 14102300951321236}
最后這個result是返回到拼接的js代碼中的
var g=JSON.parse(prompt(JSON.stringify({
method:f.shift(),types:e,args:f
})));
if(g.code!=200){
throw"HostApp call error, code:"+g.code+", message:"+g.result
}
return g.result
所以這里js調用java代碼的順序是：
1：第一次執行，native拼接js代碼注入到H5中，一個類似過濾器的函數來根據觸發的事件拼接出對應的schema。
2：H5觸發事件—>回調到java的onJsPrompt()方法中—>調用jsCallJava.call()來根據schema找到對應的方法參數等—>執行完成將result拼成jsonStr回調到js中—>js再將參數傳遞到下一個方法（假如需要傳遞的話）。
以上是safe-java-js-webView-bridge庫的介紹，JsBridge庫請看下篇
