Android中webview与JS交互,互调方法实例详解

  

<强> Android中webview与JS交互,互调方法实例详解

  

<强>前言:

  

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

  

<强>对于原生调用JS的方法

  

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

  如

        webView_。setWebViewClient(新WebViewClient () {   公共空间>   webView_.getSettings () s.setJavaScriptEnabled(真正);      

<强>对于JS调用原生方法,稍微复杂一些

  

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

  

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

  

JS中代码是这样的

        var用户信息=JSON.parse (window.JSUserInfoInterface.getUserInfo ());      

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

        公共接口JSUserInfoInterface {      @JavascriptInterface   字符串getUserInfo ();      }      之前      

接口名方法名一致
  

  

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

     =new JSUserInfoInterface method3 JSUserInfoInterface () {      @Override   @JavascriptInterface   公共字符串getUserInfo () {   .getSharedPreferences .getApplicationContext SharedPreferences SharedPreferences=getActivity () () (   “共享”,Context.MODE_PRIVATE);   电话=sharedPreferences.getString(常量字符串。KEY_USERNAME”、“);   字符串标识=sharedPreferences。getString(“标识”、“”);   返回“{\“user_id \”, \“+用户名+“\”,\“user_tel \”, \“+电话+“\”}”;   }      };      之前      

注意不能忘了@JavascriptInterface注解

  

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

        webView_。addJavascriptInterface (method3 JSUserInfoInterface);      

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

  

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

  

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

  

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

        JSDialogInterface method2=new JSDialogInterface () {      @Override   @JavascriptInterface   公共空间changeDialog(字符串arg0) {   Observable.just (arg0)   .observeOn (AndroidSchedulers.mainThread ())   .subscribe(混乱→{   如果(mess.equals(“秀”)){   ld_.show ();   其他}{   ld_.dismiss ();   }   });   }   };      之前      

<强>最后

  

一点小建议

  

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

  

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Android中webview与JS交互,互调方法实例详解