js与native交互之safe-java-js-webView
关于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库请看下篇
