导论: WebView是一个基于webkit引擎、展现web页面的android控件,由于H5的快速发展,现在Hybrid混合开发已经成为中庸选择.本篇主要介绍webview及开源框架JSBridge.
原生Webview知识:
1:注册相关权限
<uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>2:webview常见方法
goBack() //后退 goForward() //前进 goBackOrForward(intsteps) //以当前的index为起始点前进或者后退到历史记录中指定的steps，如果steps为负数则为后退，正数则为前进 canGoForward() //是否可以前进 canGoBack() //是否可以后退 //清除缓存 clearCache(true) //清除网页访问留下的缓存，由于内核缓存是全局的因此这个方法不仅仅针对webview而是针对整个应用程序. clearHistory() //清除当前webview访问的历史记录，只会webview访问历史记录里的所有记录除了当前访问记录. clearFormData() //清除自动完成填充的表单数据，不会清除WebView存储到本地的数据。 //状态 onResume() //激活WebView为活跃状态，能正常执行网页的响应 onPause() //WebView处于暂停状态，onPause动作通知内核暂停所有的动作，比如DOM的解析、plugin的执行、JavaScript执行。 pauseTimers() //暂停所有webview的layout，parsing，javascripttimer。降低CPU功耗。 resumeTimers() //恢复pauseTimers时的动作。 destroy() //销毁，关闭了Activity时，音乐或视频，还在播放。就必须销毁。 //重新加载网页 reload() //加载本地资源 webView.loadUrl("file:///android_asset/example.html"); //加载网络资源 webView.loadUrl("www.xxx.com/index.html"); //加载手机本地的一个html页面的方法 webView.loadUrl(“content://com.android.htmlfileprovider/sdcard/test.html”); //可以加载html片段 String data = " Html 数据"; webView.loadDataWithBaseURL(null,data, "text/html", "utf-8",null); //关闭硬件加速 webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null); //判断WebView滚动到顶端还是低端 // 已经处于底端 if (webView.getContentHeight() * webView.getScale() == (webView.getHeight() + webView.getScrollY())) { } // 处于顶端 if(webView.getScrollY() == 0){ } //设置手机返回按键监听 public boolean onKeyDown(int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()) { webView.goBack(); return true; } finish(); return super.onKeyDown(keyCode, event); //Activity退出销毁WebView protected void onDestroy() { if (webView != null) { webView.loadDataWithBaseURL(null, "", "text/html", "utf-8", null); webView.clearHistory(); ((ViewGroup) webView.getParent()).removeView(webView); webView.destroy(); webView = null; } super.onDestroy(); }3:WebSettings --webview常规设置
WebSettings webSettings = webView.getSettings(); webSettings.setJavaScriptEnabled(true);//设置支持JavaScript webSettings.setDefaultTextEncodingName("utf-8");//设置编码格式 webSettings.setTextSize(TextSize.SMALLER);//设定字体大小： webSettings.setPluginsEnabled(true); //支持插件 webSettings.setSupportZoom(true); //支持缩放 webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN); //支持内容重新布局 webSettings.supportMultipleWindows(); //多窗口 webSettings.setAllowFileAccess(true); //设置可以访问文件 webSettings.setNeedInitialFocus(true); //当webview调用requestFocus时为webview设置节点 webSettings.setBuiltInZoomControls(true); //是否支持内置按钮缩放和手势“捏”缩放，如果设为false则webview不支持缩放功 webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口 webSettings.setLoadsImagesAutomatically(true); //支持自动加载图片 webSettings.setDisplayZoomControls(false); //是否隐藏原生的缩放控件 webSettings.setDomStorageEnabled(true);//开启 DOM storage API 功能 webSettings.setDatabaseEnabled(true);//开启 database storage API 功能 webSettings.setAppCacheEnabled(true); //开启 Application Caches 功能 String cacheDirPath = getFilesDir().getAbsolutePath() + APP_CACAHE_DIRNAME; webSettings.setAppCachePath(cacheDirPath); //设置 Application Caches 缓存目录 WebView屏幕自适应 webSettings.setUseWideViewPort(true); webSettings.setLoadWithOverviewMode(true); 缓存设置 if (NetStatusUtil.isConnected(getApplicationContext())) { webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);//有网，根据cache-control决定是否从网络上取数据。 } else { webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //没网，则从本地获取，即离线加载 } String appCachePath = getApplicationContext().getCacheDir().getAbsolutePath(); webSettings.setAppCachePath(appCachePath);//设置缓存数据目录4:WebViewClient–处理各种通知、请求事件
WebViewClient webViewClient = new WebViewClient(){ //超链接加载,打开网页时不调用系统浏览器，而是在本WebView中显示。也可捕获超链接url,做相关操作 public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; //返回true表示在当前浏览器中加载 } //网页开始加载 public void onPageStarted(WebView view, String url, Bitmap favicon) { super.onPageStarted(view, url, favicon); } //网页加载结束 public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); } //网页加载失败 public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) { super.onReceivedError(view, request, error); } //对Https的支持 public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) { handler.proceed(); } //针对页面中每一个资源都会调用一次，用于捕获页面资源 public void onLoadResource(WebView view, String url) { super.onLoadResource(view, url); } }; webView.setWebViewClient(webViewClient);5:WebChromeClient–处理Javascript的对话框，网站图标，网站title，加载进度等
WebChromeClient webChromeClient = new WebChromeClient(){ //获取网页加载进度 public void onProgressChanged(WebView view, int newProgress) { if (newProgress < 100) { String progress = newProgress + "%"; } else { } super.onProgressChanged(view, newProgress); } //获取标题 public void onReceivedTitle(WebView view, String title) { super.onReceivedTitle(view, title); titleview.setText(title)； } //获取标题ICON public void onReceivedIcon(WebView view, Bitmap icon) { super.onReceivedIcon(view, icon); } //警告框 public boolean onJsAlert(WebView view, String url, String message, JsResult result) { if(message!=null){ //TODO //捕获网页中弹框信息 Toast.makeText(getApplicationContext(), message, Toast.LENGTH_LONG).show(); } result.cancel(); // return true; //表示确认进行捕获 } //确认框，通过这个值可判断点击时是确定还是取消，确定为true，取消为false public boolean onJsConfirm(WebView view, String url, String message, JsResult result) { return super.onJsConfirm(view, url, message, result); } //输入框，会返回输入框中的值，点击取消返回null public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) { return super.onJsPrompt(view, url, message, defaultValue, result); } //定位 public void onGeolocationPermissionsHidePrompt() { super.onGeolocationPermissionsHidePrompt(); } //定位 public void onGeolocationPermissionsShowPrompt(final String origin, final GeolocationPermissions.Callback callback) { callback.invoke(origin, true, false); //注意个函数，第二个参数就是是否同意定位权限，第三个是是否希望内核记住 super.onGeolocationPermissionsShowPrompt(origin, callback); } //WebSettings要支持多窗口 public boolean onCreateWindow(WebView view, boolean isDialog, boolean isUserGesture, Message resultMsg) { WebView.WebViewTransport transport = (WebView.WebViewTransport) resultMsg.obj; transport.setWebView(webView); resultMsg.sendToTarget(); return true; } public void onCloseWindow(WebView window) { super.onCloseWindow(window); } }; webView.setWebChromeClient(webChromeClient);6:支持文件下载
DownloadListener downloadListener = new DownloadListener() { public void onDownloadStart(String url, String userAgent, String contentDisposition, String mimetype, long contentLength) { Uri uri = Uri.parse(url); Intent intent = new Intent(Intent.ACTION_VIEW, uri); startActivity(intent); } }; webView.setDownloadListener(downloadListener);JSBridge框架简介: JS和native通信的桥梁,是一个很好的开源框架,用它比原生函数调用方便和安全很多,更低的开发成本, 这是链接: https://github.com/lzyzsd/JsBridge 1:添加依赖
dependencies { implementation 'com.github.lzyzsd:jsbridge:1.0.4' }2:在activity_main.xml使用BridgeWebView代替原生webview
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <EditText android:id="@+id/name" android:layout_width="200dp" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" android:background="@drawable/edit_bg" android:text="android shoot" /> <EditText android:id="@+id/age" android:layout_width="200dp" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" android:background="@drawable/edit_bg" android:text="150" /> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" android:text="AndroidtoJS" /> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" android:textColor="#000000" android:textSize="14sp" /> <View android:layout_width="match_parent" android:layout_height="1dp" android:layout_marginTop="10dp" android:background="@color/colorAccent" /> <com.github.lzyzsd.jsbridge.BridgeWebView android:id="@+id/webView" android:layout_height="match_parent" android:layout_width="match_parent" android:layout_marginTop="10dp" /> </LinearLayout>3:android_asset中放入一个test.html
<html> <head> <meta content="text/html; charset=utf-8" http-equiv="content-type"> <title> js调用java </title> </head> <body> <p> <div id="init"> </div> </p> <p> <input type="text" id="text1" value="aaaaa"/> </p> <p> <input type="text" id="text2" value="11111"/> </p> <p> <input type="button" id="enter1" value="JsToAndroid" onclick="jsClick();" /> </p> <p> <xmp id="show"> </xmp> </p> </body> <script> //JsToAndroid监听事件 function jsClick() { var str1 = document.getElementById("text1").value; var str2 = document.getElementById("text2").value; var data = "name=" + str1 + ",pass=" + str2; window.WebViewJavascriptBridge.callHandler( 'JsToAndroid' , {'Data': data} , function(responseData) { document.getElementById("show").innerHTML = (responseData); } ); } function connectWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { callback(WebViewJavascriptBridge) } else { document.addEventListener( 'WebViewJavascriptBridgeReady' , function() { callback(WebViewJavascriptBridge) }, false ); } } connectWebViewJavascriptBridge(function(bridge) { bridge.init(function(message, responseCallback) { var data = { 'json': 'JS返回任意数据!' }; document.getElementById("init").innerHTML = "data = " + message; responseCallback(data); }); //接收Android端发来的数据并回传数据 bridge.registerHandler("AndroidToJs", function(data, responseCallback) { document.getElementById("show").innerHTML = ("接收Android端数据:" + data); responseCallback("JS回传数据:jsjsjsjsjss"); }); }) </script> </html>4:MainActivity类
public class MainActivity extends AppCompatActivity implements View.OnClickListener { private BridgeWebView bridgeWebView; private TextView textView; private EditText name; private EditText age; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); } private void initView() { findViewById(R.id.button).setOnClickListener(this); bridgeWebView = findViewById(R.id.webView); textView = findViewById(R.id.textView); name = findViewById(R.id.name); age = findViewById(R.id.age); bridgeWebView.setWebChromeClient(new WebChromeClient() { @SuppressWarnings("unused") public void openFileChooser(ValueCallback<Uri> uploadMsg, String AcceptType, String capture) { this.openFileChooser(uploadMsg); } @SuppressWarnings("unused") public void openFileChooser(ValueCallback<Uri> uploadMsg, String AcceptType) { this.openFileChooser(uploadMsg); } public void openFileChooser(ValueCallback<Uri> uploadMsg) { } }); bridgeWebView.loadUrl("file:///android_asset/test.html"); //接收JS端的数据并回传数据 bridgeWebView.registerHandler("JsToAndroid", new BridgeHandler() { @Override public void handler(String data, CallBackFunction function) { textView.setText("接收JS端数据:" + data); function.onCallBack("Android回传数据:nndroid"); } }); } //AndroidtoJS监听事件 @Override public void onClick(View v) { User user = new User(name.getText().toString().trim(), age.getText().toString().trim()); bridgeWebView.callHandler("AndroidToJs", new Gson().toJson(user), new CallBackFunction() { @Override public void onCallBack(String data) { textView.setText(data); } }); } }5:Android和JS传递数据 callHandler—>registerHandler
JS--->Android JS端: function jsClick() { var str1 = document.getElementById("text1").value; var str2 = document.getElementById("text2").value; var data = "name=" + str1 + ",pass=" + str2; window.WebViewJavascriptBridge.callHandler( 'JsToAndroid' , {'Data': data} , function(responseData) { document.getElementById("show").innerHTML = (responseData); } ); } Android端: //接收JS端的数据并回传数据 bridgeWebView.registerHandler("JsToAndroid", new BridgeHandler() { @Override public void handler(String data, CallBackFunction function) { textView.setText("接收JS端数据:" + data); function.onCallBack("Android回传数据:nndroid"); } }); Android--->JS Android端: User user = new User(name.getText().toString().trim(), age.getText().toString().trim()); bridgeWebView.callHandler("AndroidToJs", new Gson().toJson(user), new CallBackFunction() { @Override public void onCallBack(String data) { textView.setText(data); } }); JS端: function connectWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { callback(WebViewJavascriptBridge) } else { document.addEventListener( 'WebViewJavascriptBridgeReady' , function() { callback(WebViewJavascriptBridge) }, false ); } } connectWebViewJavascriptBridge(function(bridge) { bridge.init(function(message, responseCallback) { var data = { 'json': 'JS返回任意数据!' }; document.getElementById("init").innerHTML = "data = " + message; responseCallback(data); }); //接收Android端发来的数据并回传数据 bridge.registerHandler("AndroidToJs", function(data, responseCallback) { document.getElementById("show").innerHTML = ("接收Android端数据:" + data); responseCallback("JS回传数据:jsjsjsjsjss"); });好了,结束.
