Android中webview与JS交互互调方法

Posted 2022-12-09 gengqiquan

尊重他人的劳动成果，转载请标明出处：http://blog.csdn.net/gengqiquan/article/details/53288394， 本文出自:【gengqiquan的博客】

对于试水的功能，一般公司都会采用H5的方式来开发，可以用很少的资源与很短的项目工期来完成。
但许多情况下，H5页面会需要一些原生持有的一些如用户信息之类的数据，一些交互也需要调用原生的，如toast之类要保持同一个手机风格一致的交互行为。这个时候就需要能够让JS主动调用原生的方法来进行操作或者获取数据。或者是原生调用JS的方法在H5加载的时候传递一些参数。

对于原生调用JS的方法

我们需要实现一个WebViewClient，在这个WebViewClient里面进行JS方法加载的替换
如

  webView_.setWebViewClient(new WebViewClient() 
            public void onPageFinished(WebView view, String url) 
                view.loadUrl(MessageFormat.format("javascript:initEvaluationPage(0)",
                        Util.wrapGetParameter(json)
                ));
            
        );

这里的initEvaluationPage必须要和JS的方法名一致

建议传递json格式数据作为参数。

不要忘了允许WebView执行JS代码

webView_.getSettings()s.setJavaScriptEnabled(true);

对于JS调用原生方法，稍微复杂一些

首先，需要本地定义一个接口，接口名需要和JS内写的一致

比如JS需要客户端保存的用户信息

JS中代码是这样的

    var userInfo = JSON.parse(window.JSUserInfoInterface.getUserInfo());

那么我们本地也需要定义一个对应的接口

public interface JSUserInfoInterface 

    @JavascriptInterface
    String getUserInfo();

接口名方法名一致
实例化这个接口，在实例方法内返回我们的用户信息

 JSUserInfoInterface method3 = new JSUserInfoInterface() 

            @Override
            @JavascriptInterface
            public String getUserInfo() 
                SharedPreferences sharedPreferences = getActivity().getApplicationContext().getSharedPreferences(
                        "share", Context.MODE_PRIVATE);
                String tel = sharedPreferences.getString(Constant.KEY_USERNAME, "");
                String userid = sharedPreferences.getString("userid", "");
                return "\\"user_id\\":\\"" + userid + "\\",\\"user_tel\\":\\"" + tel + "\\"";
            

        ;

注意不能忘了 @JavascriptInterface注解

然后将这个接口方法加入到webView_中，注意第二个参数就是接口名，需要和JS中的一致。

   webView_.addJavascriptInterface(method3, "JSUserInfoInterface");

这样就可以在JS调用window.JSUserInfoInterface.getUserInfo()的时候返回我们实例里面给的数据

同样的，我们也可以不返回数据直接执行。比如弹一个原生的Dialog。

需要注意的是JS里面是没有主线程子线程的概念的，当JS进行网络请求的时候，webview会默认给他开子线程。具体机制大家感兴趣可以去了解。不过这也就意味着你不能直接在给JS掉的原生方法中进行UI操作。你可以选择发送给主线程执行。

比如下面的代码我是用rxjava来切换线程的

  JSDialogInterface method2 = new JSDialogInterface() 

            @Override
            @JavascriptInterface
            public void changeDialog(String arg0) 
                Observable.just(arg0)
                        .observeOn(androidSchedulers.mainThread())
                        .subscribe(mess -> 
                            if (mess.equals("show")) 
                                ld_.show();
                             else 
                                ld_.dismiss();
                            
                        );
            
        ;

最后

一点小建议

如果你的项目中有很多或者一定数量的JS交互，建议写一个有返回值的接口。然后通过JSON参数来进行控制。内部制定一个解析协议，根据JSON的数据来决定要做什么事，避免大量定义接口 ，也避免构建太多的实例消耗资源

有什么意见和疑惑欢迎留言

如果我的博客对您有帮助，请点个赞吧

我建了一个QQ群（群号：121606151），用于大家讨论交流Android技术问题，有兴趣的可以加下，大家一起进步。