Android webview使用、安卓和H5交互

1,240 阅读4分钟

最近用到了webview这个控件,在此和大家分享一下: Webview(网络视图) 主要是在APP中嵌套网页的一个控件,不使用手机中下载的浏览器去访问网页,而是通过手机自带的系统浏览器去访问一个url,通俗说就是个浏览器。 WebView控件功能强大,除了具有一般View的属性和设置外,还可以对url请求、页面加载、渲染、页面交互进行强大的处理。

1.第一步,访问网络必须在清单文件中设置网络权限:

  <!-- 允许应用程序联网,以便向我们的服务器端发送数据 -->
    <uses-permission Android:name="android.permission.INTERNET"  
    />

2.在布局文件中添加webview控件:

   <WebView
        android:id="@+id/webview_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none"/>   //  设置其滚动条为none

3.设置webview的一些相关属性:

//设置此属性,可任意比例缩放
        webview.getSettings().setUseWideViewPort(true);
        webview.getSettings().setLoadWithOverviewMode(true);
// 设置自动加载图片				        webview.getSettings().setLoadsImagesAutomatically(true);
//支持缩放
        webview.getSettings().setBuiltInZoomControls(true);
//设置是否支持变焦
        webview.getSettings().setSupportZoom(true);
// 设置允许访问文件数据
        webview.getSettings().setAllowFileAccess(true);
//  这是webview保存表单数据
        webview.getSettings().setSaveFormData(false);
//自适应屏幕 webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
        webview.getSettings().setLoadWithOverviewMode(true);
//启用支持JavaScript
        webview.getSettings().setJavaScriptEnabled(true);
// 调用JS交互的方法  重点
        webview.addJavascriptInterface(new JsInteration(), "demo");
// 优先使用缓存    webview.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE); //  不使用缓存 只从网络获取数据
       webview.getSettings().setAppCacheEnabled(false);

4.去加载你所需要的网页的url

//WebView加载web资源
        webview.loadUrl(webUrl);

5.webview的一些方法的使用: 如果页面中链接,如果希望点击链接继续在当前browser中响应,而不是新开Android的系统browser中响应该链接,必须覆盖webview的WebViewClient对象。 //覆盖WebView默认使用第三方或系统默认浏览器打开网页的行为,使网页用WebView打开

 webview.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
//webview每次都会加载,不能放在下面的判断,如果加载一次页面将无法进行点击
//返回true的时候用webview打开,为false的时候用第三方浏览器打开
view.loadUrl(url);
return true;
     };

shouldOverrideUrlLoading表示当前webView中的一个新url需要加载时,如果没有重写此函数,webView请求ActivityManage选择合适的方式处理请求,就像弹出uc和互联网让用户选择浏览器一样。重写后return true表示让当前程序处理,return false表示让当前webView处理。

//onPageStarted 方法是在页面加载开始时执行的方法,返回当前页面的url
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
// TODO Auto-generated method stub
super.onPageStarted(view, url, favicon);
Log.i("GG","onPageFinished"+url);
         }
//onPageFinished方法是在页面加载完成时执行的方法,返回页面的url
@Override
public void onPageFinished(WebView view, String url) {
// TODO Auto-generated method stub
// super.onPageFinished(view, url);
finish();
      }
});
//  JavaScript
webview.setWebChromeClient(new WebChromeClient(){
@Override
public boolean onJsAlert(WebView view, String url, String message, android.webkit.JsResult result) {
 return super.onJsAlert(view, url, message, result);
       };
});

6.下面是JS交互的的方法 ,里面是和前端共同的方法,需要在前面时候进行定义,需要安卓和前端定义个标示(“demo”),上面有定义的,这里在此强调一下:webview.addJavascriptInterface(new JsInteration(), "demo"); 下面是JsInteration方法,里面覆写JS交互的方法,网页调用什么方法就写什么方法,下面是具体例子:

调用JS的方法很简单的一句话:
webview.loadUrl("javascript:clickOnAndroid()");
webview.loadUrl("javascript:shareOnAndroid()");
public class JsInteration {
        //网页调用什么方法就写什么方法
        @JavascriptInterface
        public void toastMessage(String message) {
            Toast.makeText(getApplicationContext(), message, Toast.LENGTH_LONG).show();
        }

        @JavascriptInterface
        public void onSumResult(int result) {
            Toast.makeText(getApplicationContext(), "onSumResult result=" + result, Toast.LENGTH_LONG).show();
        }
        //  js 交互  返回数据
        @JavascriptInterface
        public void clickOnAndroid(String orderId,String totalFee,String productInfo){
          //  这是JS交互的方法,此方法是安卓点击某个按钮出发JS事件,然后前端给安卓返回数据,然后安卓这边接收
          //  接收完数据记得刷新下页面
           // webview更新页面
            webview.reload();
        }
        @JavascriptInterface
        public void shareOnAndroid(String title,String desc,String link,String imgUrl){
            if(title == null && desc == null && link == null && imgUrl == null){
                Toast.makeText(MainActivity.this, "暂无数据数据", Toast.LENGTH_LONG);
            }else{
             //  需要执行的代码。。。
            }
}       
    }

7.点击返回键的onKeydown事件: 如果不做任何处理,浏览网页,点击系统“Back”键,整个Browser会调用finish()而结束自身,如果希望浏览的网页回退而不是推出浏览器,需要在当前Activity中处理并消费掉该Back事件。

@Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
if(keyCode == KeyEvent.KEYCODE_BACK){
            if(webview.canGoBack()){
                    webview.goBack();//返回上一页面
                    return true;
                else{
                        MainActivity.this.finish();//关闭页面
                }
            }
        }
        return super.onKeyDown(keyCode, event);
    }

8.最后提醒一点,webview会产生一些缓存,当遇到闪退等问题的时候,建议卸载App重装,并clean项目重新运行,那样就可以安心开车了.