Android中webview与JS交互、互调方法实例详解
Android中webview与JS交互、互调方法实例详解
创新互联公司专注为客户提供全方位的互联网综合服务,包含不限于网站设计、网站建设、留坝网络推广、成都小程序开发、留坝网络营销、留坝企业策划、留坝品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联公司为所有大学生创业者提供留坝建站搭建服务,24小时服务热线:028-86922220,官方网址:www.cdcxhl.com
前言:
对于试水的功能,一般公司都会采用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的数据来决定要做什么事,避免大量定义接口 ,也避免构建太多的实例消耗资源
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
分享名称:Android中webview与JS交互、互调方法实例详解
新闻来源:http://pwwzsj.com/article/gghdgp.html