第一次发博客,肯定会有很多问题,还有技术交流方面,我不太会使用专业名词,我会用最通俗的方式来阐明我的观点,一般会把我思路画在图上,如果有用词欠妥的地方希望大家见谅。希望大家多多指正,互帮互助,共同进步。谢谢。
上周公司业务需要,要做android和H5的交互,并且在sdk19以上Native调用js使用webviewde.evaluateJavascript()实现,这可让我头疼,都不知道在jsbridge的什么地方加。以前我也没做过这种,然后加班加点网上各种找,但没有现成的,只能通过自己先弄懂jsbridge的源码才能在其基础上改进。以下就是我的结果。一定要仔细看图,内容都在图里。
本文基于github上android和javascript最流行的交互方式jsbridge,可能很多同学都已经看过了,但是大都数应该马马虎虎,让他说下jsbridge也许会说出个123,但让他说456,就不太清楚了。本文让大家懂得456,并在其基础上添加API19以上Native调用js的方法。当然再深层次的789,大家根据自行需要或兴趣去探索吧。
交互就得互相交流,先说说android调用javascript的方式:
根据这几天的了解,android调用javascirpt的方法采用loadurl(javacriptCmd),这种方式的弊端就是没又返回值,得通过js改变iframe.src把结果返回,这样执行效率较低。sdk19以上采用evaluateJavascript方法,在回调方法里又返回值,效率优于前一种,毕竟当前android 4.4还是有少量的用户的。为了兼顾所有用户和执行效率问题,采用两种方式混合使用。android 4.4以下,请看下图:
android 4.4以上请看下图:
- <span style="font-size:14px;">public void callHandler(String handlerName, String data,final CallBackFunction callBack) {
- if(Build.VERSION.SDK_INT<Build.VERSION_CODES.KITKAT){
- //4.4以下
- Log.i(TAG,"4.4以下版本,dosend被调用");
- doSend(handlerName, data, callBack);
- }else{
- //4.4以上,包括4.4
- Log.i(TAG,"4.4以上版本,使用evaluateJavascript方法调js");
- String jscmd = String.format(BridgeUtil.HIGH_VERSION_CALL_JS,handlerName,data);
- if (Thread.currentThread() == Looper.getMainLooper().getThread()) {
- this.evaluateJavascript(jscmd, new ValueCallback<String>() {
- @Override
- public void onReceiveValue(String value) {
- callBack.onCallBack(value);
- }
- });
- }
- }
- }</span>
在webviewjavascirptbridge.js中添加19以上需要被andorid调用的方法
- function getHandlerAndHandle(handlerName, data) {
- // var responseCallback = function (reponseToNative) {
- // return reponseToNative;
- // }
- var responseDataH;
- console.log("js中getHandlerAndHandle被调用");
- var handler1 = WebViewJavascriptBridge._messageHandler;
- if (handlerName) {
- handler1 = messageHandlers[handlerName];
- }
- //查找指定handler
- try {
- handler1(data, function (reponseToNative) {
- responseDataH = reponseToNative;
- console.log(reponseToNative);
- return reponseToNative;
- });
- return responseDataH;
- }
- catch (exception) {
- if (typeof console != 'undefined') {
- console.log("WebViewJavascriptBridge: WARNING: javascript handler threw.", data, exception);
- }
- }
- }