HTML5,js与Android native通信
来源:互联网 发布:英美关系知乎 编辑:程序博客网 时间:2024/05/23 19:23
概述
何为h5,js与Android通信?其实说白了就是js调用Android本地方法和Android本地调用js方法之间的一个过程。这篇文章主要是讲述一个简单的通信方式,至于通信间数据的协议我用的是jsonRpc,在这里不做过多的描述,不懂的可以自行查阅,因为大多数人通信时不会用这个。
webview设置
这个应该不是问题,大概的设置就是一些基本项,这里贴一下代码,没有什么特殊的。
private void initWebView() { WebSettings webSettings = webView.getSettings(); webSettings.setJavaScriptEnabled(true); webSettings.setDatabaseEnabled(true);// webSettings.setDatabasePath("/data/data/" + Envi.appContext.getPackageName() + "/localstorage/"); webSettings.setDomStorageEnabled(true); webSettings.setSavePassword(false); webSettings.setSaveFormData(true); webSettings.setSupportZoom(false); webSettings.setGeolocationEnabled(true); webSettings.setDomStorageEnabled(true); webSettings.setAppCacheEnabled(true); webSettings.setAllowFileAccess(true);// webSettings.setAppCacheMaxSize(100 * 1024 * 1024);// webSettings.setAppCachePath("/data/data/" + Envi.appContext.getPackageName() + "/cache/");// webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);// String userAgent = webSettings.getUserAgentString();// userAgent = userAgent + " ganji_" + Envi.customerId + "_" + Envi.versionName;// webSettings.setUserAgentString(userAgent); }
这里可以根据需求注释/打开某些设置。
webView.setWebViewClient(new WebViewClient() { @Override public void onLoadResource(WebView view, String url) { super.onLoadResource(view, url); } @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { return super.shouldOverrideUrlLoading(view, url); } @Override public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) { Log.e("html5", "webview receive error: " + description); super.onReceivedError(view, errorCode, description, failingUrl); mWebViewReceivedError = true; } @Override public void onPageFinished(WebView view, String url) { mPageLoadFinished = true; if (mWebViewReceivedError) {//TODO network is ok? webView.post(new Runnable() { @Override public void run() { webView.setVisibility(View.GONE);// mLoadFailContainer.setVisibility(View.VISIBLE); } }); } } @Override public void onPageStarted(WebView view, String url, Bitmap favicon) { super.onPageStarted(view, url, favicon); } }); webView.setWebChromeClient(new WebChromeClient() { @Override public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback) { callback.invoke(origin, true, false); super.onGeolocationPermissionsShowPrompt(origin, callback); } @Override public boolean onJsAlert(WebView view, String url, String message, JsResult result) { return true; } @Override public boolean onJsConfirm(WebView view, String url, String message, JsResult result) { return true; } @Override public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) { return true; } @Override public void onExceededDatabaseQuota(String url, String databaseIdentifier, long quota, long estimatedDatabaseSize, long totalQuota, WebStorage.QuotaUpdater quotaUpdater) { quotaUpdater.updateQuota(estimatedDatabaseSize * 2); } @Override public void onReachedMaxAppCacheSize(long requiredStorage, long quota, WebStorage.QuotaUpdater quotaUpdater) { quotaUpdater.updateQuota(requiredStorage * 2); } });
这里没什么参考的必要,主要是对两个Client的设置,根据你的需求来。
native 调用js方法
下面说重点,js调用native方法,首先,我贴下我js的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script> function showInfo(str) { document.getElementById("info").innerHTML=str; } </script> </head> <body> 从Android传来的值是:<span id="info"> </span> <br> <a href="#" onclick="window.GJNativeAPI.callAndroid('I am come from android.')"> call Android from javascript </a> </body> </html>
这里比较重要的是,要定义好function方法的名字,native调用时就是根据这个调用的。我在一个button点击事件里调用它:
btn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //调用此语句,调用js里的方法 webView.loadUrl("javascript:showInfo('hello js')"); } });
这样就挖成了一个native调用js方法。重点是js的方法名,和Android的javascript:后的方法名一致。
js调用native方法
这个还要对webview做一个额外的设置:
mWebView.addJavascriptInterface(new GJNativeAPI(), "GJNativeAPI");
然后我们看看这个GJNativeAPI是什么东东:
/** * 供 js 调用的本地对象 */ public class GJNativeAPI { /** * js 调用该方法发起 rpc 调用,或者返回 rpc 响应 */ @JavascriptInterface public void callAndroid(final String str) { System.out.print("!!!!"+str); activity.setText(str); } }
这是我自定义的一个内部类,它里面有一个callAndroid方法,注意上边一定要写上@JavascriptInterface,不然某些版本的sdk上是有错的。
然后我们回头看js文件:
<a href="#" onclick="window.GJNativeAPI.callAndroid('I am come from android.')">
window是调用native方法时要加的,GJNativeAPI是我们的那个自定义内部类,callAndroid是我们写的那个方法,这样就完成了调用。
注意
如果你这么写:
btn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //调用此语句,可以调用js里调用Android相关的方法,最终还是回到Android native webView.loadUrl("javascript:window.GJNativeAPI.callAndroid('hello js')"); }});
你会发现,你在native调用的,又回到了native,就是在js上走了一圈。
0 0
- HTML5,js与Android native通信
- Android hybrid之JS与Native的通信方式
- Html5与android通信
- Android--Native与html5交互
- iOS native 与 js 通信 资料汇总
- React Js 与 Native 之间的通信
- React Native与Android通信——Android calls JS(一)0.45
- JS与ANDROID通信
- React Native Android 源码框架浅析(主流程及 Java 与 JS 双边通信)
- Android localsocket与native的通信
- React Native与Android通信交互
- Android 与 Html5 、JS交互
- native与html5交互
- Native与html5交互
- REACT NATIVE(JS/ES)与IOS(OBJECT-C)交互通信
- Android中JS与Native原生交互
- 【PhoneGAP学习】Android PhoneGap框架(3)--重要知识点的预先学习 (JS层与 Native 层之间通信)
- Native和html5的交互(二)Android native传数据给js
- CArray类
- WinDbg入门教程
- 百度地图 Fragment之间切换黑屏现象解决方案
- python join 和 split
- ios ViewController 页面跳转
- HTML5,js与Android native通信
- Android性能优化建议 Performance Tips
- 一步一步教你实现Periscope点赞效果
- Docker build WordPress
- Hibernate事务与并发问题处理(乐观锁与悲观锁)
- Spring HTTP Invoker-远程调用模式
- poj 2251 Dungeon Master
- 如何利用ABBYY FineReader 12扫描纸质文档
- 机器学习所需要的数学知识