android webview与js简单的交互方案

最近研究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默认不处理，导致下次无法调用（即无反应事件）

巴特西

android webview与js简单的交互方案

最新文章

热门文章