android webview与js简单的交互方案

Posted 2020-11-09 HappyCoding，Coding Hard

最近研究webview与js交互,看了几个开源库实现,感觉不尽如人意，存在主要问题是，耦合较高，使用不够简洁，后来参考Uri设定规则，格局Uri类似协议自定义了类似的js交互协议

比较简洁，自定义协议内容样式如：jsbridge://android-app/method123?a=123&b=345#jsMethod1(p1,p2)

协议说明:

scheme定义为jsbridge，用于区分别的网络请求(http),
authority定义为android-app，区分不同平台处理
path定义为 调用本地方法名称    method123
Query定义为调用本地方法参数    a=123&b=345
Fragment定义为回调js方法    #jsMethod1(p1,p2)

 

这样就可以做到精简，灵活，良好的可扩展，灵活使用的特点。再看解析实现·

 public boolean parseJsBridge(String url,WebAppInterface webNative){//WebAppInterface为被调用本地方法类实例
        if(!isProtocol(url)) return false;
        int i = -1;
        Uri uri = Uri.parse(url);//借助URI解析协议
        String methodName = uri.getPath();//调用本地方法，method123
        methodName = methodName.replace("/", "");

        String params = uri.getQuery();//调用本地方法参数。a=123&b=345
        String callback = uri.getFragment();//解析js回调方法，#jsMethod1(p1,p2)

        i = callback.lastIndexOf(‘(‘);
        String jsMethod = callback.substring(0,i);
        String jsParams = callback.substring(i+1,callback.length()-1);
//将解析的结果封装为JsResponse，便于后续使用
        mJsRes = new JsResponse(methodName,jsMethod);
        mJsRes.parseJsCallbackParams(jsParams);
        mJsRes.parseNativeParams(params);
//这里通过反射方式调用本地方法
        String[] args = mJsRes.getMethodArgs();
        if(null==args){//使用反射调用无参数方法
            jsCallNoParamMethod(webNative,methodName);
        }else{//调用反射有参数方法
            int count = args.length;
            Class[] javaParamsType = new Class[count];
            for(int t=0;t<count;t++){
                javaParamsType[t] = String.class;
            }
            jsCallParamMethod(webNative,methodName,javaParamsType,mJsRes.getMethodArgs());
        }
        return true;
    }

 

协议解析完整实现类：

public class JsProcessor {

//    private JsProcessor(){}

    private JsResponse  mJsRes;

    public  JsResponse getJsResponse(){
        return mJsRes;
    }

    public static boolean isProtocol(String url) {
        return !TextUtils.isEmpty(url) && url.startsWith("jsbridge://");
    }

//    jsbridge://android-app/method123?a=123&b=345#jsMethod1(p1,p2)"
    public boolean parseJsBridge(String url,WebAppInterface webNative){
        if(!isProtocol(url)) return false;
        int i = -1;
        Uri uri = Uri.parse(url);
        String methodName = uri.getPath();//method1
        methodName = methodName.replace("/", "");

        String params = uri.getQuery();//a=123&b=345
        String callback = uri.getFragment();//#jsMethod1(p1,p2)

        i = callback.lastIndexOf(‘(‘);
        String jsMethod = callback.substring(0,i);
        String jsParams = callback.substring(i+1,callback.length()-1);

        mJsRes = new JsResponse(methodName,jsMethod);
        mJsRes.parseJsCallbackParams(jsParams);
        mJsRes.parseNativeParams(params);

        String[] args = mJsRes.getMethodArgs();
        if(null==args){
            jsCallNoParamMethod(webNative,methodName);
        }else{
            int count = args.length;
            Class[] javaParamsType = new Class[count];
            for(int t=0;t<count;t++){
                javaParamsType[t] = String.class;
            }
            jsCallParamMethod(webNative,methodName,javaParamsType,mJsRes.getMethodArgs());
        }
        return true;
    }

    public boolean jsCallNoParamMethod(Object obj,String mName){
        boolean success = false;
        try {
            Method method=obj.getClass().getMethod(mName);
            method.invoke(obj);
            success = true;
        } catch (NoSuchMethodException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }catch (Exception ex){
            ex.printStackTrace();
        }
        return success;
    }

    //getMethod("sayHello", String.class,int.class);
    public boolean jsCallParamMethod(Object obj,String mName,Class<?>[] parameterTypes,Object[] args){
        if(parameterTypes.length!=args.length) return false;
        boolean success = false;
        try {
            Method method = obj.getClass().getMethod(mName,parameterTypes);
            method.invoke(obj, args);
            success = true;
        } catch (NoSuchMethodException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }catch (Exception ex){
            ex.printStackTrace();
        }
        return success;
    }

}

 

JSResponse解析后的封装实体类

public class JsResponse {
    //call native
    public String methodName;
    private Map<String,String> nativeParams = new HashMap<>();
    //callback js method
    public String callJsMethod;
//    public Map<String,String> jsParams = new HashMap<>();
    private int jsParamCount;

    public JsResponse(String javaMethod,String jsMethod){
        this.methodName = javaMethod;
        this.callJsMethod = jsMethod;
    }

    public String[] getMethodArgs(){
        if(0==nativeParams.size()) return null;
        String[] params = new String[nativeParams.size()];
        int n = 0;
        for(Map.Entry<String,String> entry:nativeParams.entrySet()){
            params[n] = entry.getValue();
            n++;
        }
        return params;
    }

    public void parseNativeParams(String params){
//        int i = 0,len = params.length();
        if(!nativeParams.isEmpty())
            nativeParams.clear();

        String[] eles = params.split("&");
        for(String ele:eles){
            int eq = ele.indexOf(‘=‘);
            String value = ele.substring(eq + 1);
            String name = ele.substring(0,eq);
            nativeParams.put(name,value);
        }

    }

    public void parseJsCallbackParams(String jsparams){
        String[] eles = jsparams.split(",");
        jsParamCount = eles.length;
    }

}

 

js使用规则协议，触发调用本地方法如下，即可

function startRequest()
    {
        var iframe = document.createElement(‘iframe‘);
        iframe.setAttribute(‘src‘, ‘jsbridge://android-app/showHello?a=hello-&b=i_from_js&#callbackHello(p1,p2)‘);
        document.body.appendChild(iframe);
        iframe.parentNode.removeChild(iframe);
        iframe = null;
    }

 本地调用js回调方法

  void executeJsCmd(String jsCmd){
        Log.d(TAG,"pending execute js command="+jsCmd);

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            //async execute
            mWebView.evaluatejavascript(jsCmd, new ValueCallback<String>() {
                @Override
                public void onReceiveValue(String value) {
                    Log.d(TAG,"async execute result="+value);
                }
            });
        }else {
            // This code is BAD and will block the UI thread
            mWebView.loadUrl(jsCmd);
        }
    }

 

下面就是js与本地通信了，通过WebViewClient的shouldOverrideUrlLoading拦截内容判断处理

 private class MonitorWebClient extends WebViewClient {
        WebAppInterface webCallapp = new WebAppInterface(activity);
        .......

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            boolean handle = super.shouldOverrideUrlLoading(view, url);
            JsProcessor jsPro = null;
            if (!handle) {
                jsPro = new JsProcessor();
                handle = jsPro.parseJsBridge(url,webCallapp);
            }
            if(handle){
                handleJsCallback(jsPro,"hello","callback js method");
            }
            return handle;
        }

        @Override
        public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
            //如果需要传文件,拦截WebView的资源请求，将文件以流的形式进行通讯
            //return new WebResourceResponse("image/jpeg", "UTF-8", new FileInputStream(new File("xxxx");
            return super.shouldInterceptRequest(view, request);
        }
    }

 

void handleJsCallback(JsProcessor jsPro,String... args){
//javascript:showJavaMessage(‘javaResult‘)"
//拼接js要执行方法名字与参数规则，如上样例
        String jsM = jsPro.getJsResponse().callJsMethod;
        if(!TextUtils.isEmpty(jsM)){
//            String jsCmd = new StringBuilder().append("javascript:").append(jsM).
//                    append(‘(‘).append("\‘java\‘").append(‘,‘).append("\‘hello\‘").append(‘)‘).toString();
            StringBuilder buf = new StringBuilder().append("javascript:").append(jsM).append(‘(‘);
            if(args!=null && args.length>0){
//                int pos = buf.length()-1;
                for(String p:args) {
                    buf.append(‘\‘‘).append(p).append(‘\‘‘).append(‘,‘);
                }
                buf.deleteCharAt(buf.length()-1);
            }
            buf.append(‘)‘);
            executeJsCmd(buf.toString());
        }
    }

 

除了上面shouldOverrideUrlLoading方法拦截处理外，js也可以通过调用 alert，prompt 方法的方式传递数据 ，我们需要重写WebChromeClient 通过回调本地方法onJsAlert(), onJsPrompt()方法即可收到对应函数回调，进行数据处理

private class AppWebChromeClient extends WebChromeClient {
        @Override
        public void onReachedMaxAppCacheSize(long spaceNeeded, long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) {
            quotaUpdater.updateQuota(spaceNeeded * 2);
        }

        @Override
        public boolean onConsoleMessage(ConsoleMessage cm) {
            Log.d("MyApplication", cm.message() + " -- From line "
                    + cm.lineNumber() + " of "
                    + cm.sourceId() );
            return true;
        }

        @Override
        public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
            if("1001".equals(message)){
                //解析参数defaultValue,调用java方法并得到结果
                //textexeJs();
            }
            //给js返回处理结果
            result.confirm("result");
            return false;
        }

        @Override
        public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
            Log.d("MyApplication",url);
            AlertDialog alertDialog = new AlertDialog.Builder(activity).create();
            // Setting Dialog Title
            alertDialog.setTitle("JS come message");
            // Setting Dialog Message
            alertDialog.setMessage(message);
            alertDialog.show();
            return false;
        }
    }

 

 

 

调用本地方法类对象

public class WebAppInterface {

    Context mContext;

    /** Instantiate the interface and set the context */
    WebAppInterface(Context c) {
        mContext = c;
    }

    /** Show a toast from the web page */
    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }

    @JavascriptInterface
    public void showDialog(String dialogMsg){
        AlertDialog alertDialog = new AlertDialog.Builder(mContext).create();
        // Setting Dialog Title
        alertDialog.setTitle("JS triggered Dialog");
        // Setting Dialog Message
        alertDialog.setMessage(dialogMsg);
        alertDialog.show();
    }

    public void showHello(String title,String msg){
        ToastUtils.showLong(mContext,title+msg);
    }

}

 

js示例内容

<html>
<head>
    <style>
  body{
 background-color: #FA5858;
color:#fff;
  }
input{
background-color: #F7D358;
width: 300px;
padding:10px;
color: #000;
 }
 div#content{
 padding:20px;
 background-color: #F7D358;
  color: #000;
 }
 </style>
    <script type="text/javascript">
  function showAndroidToast(toastmsg) {
    Android.showToast(toastmsg);
   }
 function showAndroidDialog(dialogmsg) {
      Android.showDialog(dialogmsg);
   }
  function moveToScreenTwo() {
    Android.moveToNextScreen();
   }
   function showPromptToJava()
   {
      var ret = prompt( "1001", "defaultMessage001" );
     //ret值即为java传回的”result”
     //根据返回内容作相应处理
    }
    function showJavaMessage(result)
    {
        alert("hello！"+result);
    }
    function startRequest()
    {
        var iframe = document.createElement(‘iframe‘);
        iframe.setAttribute(‘src‘, ‘jsbridge://android-app/showHello?a=hello-&b=i_from_js&#callbackHello(p1,p2)‘);
        document.body.appendChild(iframe);
        iframe.parentNode.removeChild(iframe);
        iframe = null;
    }
    function callbackHello(p1,p2)
    {
        console.log("receive callback from app");
        alert("receive callback "+p1+p2);
    }
 </script>
</head>
<body>
<center>
    <h3>Binding JavaScript code to Android code</h3>
    <div id="content">
        //some content here
    </div>
    <div>
        Here are few examples:
    </div>
    <div>
        <input type="button" value="Make Toast" onClick="showAndroidToast(‘Toast made by Javascript‘)" /><br/>
        <input type="button" value="Trigger Dialog" onClick="showAndroidDialog(‘This dialog is triggered by Javascript ‘)" /><br/>
        <input type="button" value="Take me to Next Screen" onClick="showPromptToJava()" /><br/>
        <input type="button" value="jsBridgeHandle" onClick="startRequest()" /><br/>
    </div>
</center>
</body>
</html>

 本地显示

mWebView.loadUrl("file:///android_asset/sample1.html");

以上就是整个js与本地方法调用整体流程

 

备注问题：

js与本地调用会产生的问题:

1,调用js函数参数注意
string 使用‘‘ 需要单引号拼接，直接value或"value"则无法正常匹配
直接value为整数类型

2,onJsPrompt,onJsAlert,返回true，js默认不处理，导致下次无法调用（即无反应事件）