安卓WebView的使用以及原生和h5的交互

导语：

WebView: 就是一个用来展示网页的视图。在工作中或多或少的都有使用，最多的就是加载App中的活动页。目前接手的一个项目中，大量使用了WebView，还有不少Js和安卓原生的交互。这里就在使用中记录下其基本使用和遇到的问题。

一、使用步骤

1. 配置访问网络的权限

   <uses-permission android:name="android.permission.INTERNET"/>
   

2. 实例化WebView,设置要访问的页面

   webView = (WebView) findViewById(R.id.webView);      //实例化WebView
   webView.loadUrl("https://www.hao123.com/");          //加载网络页面
   webView.loadUrl("file:///android_asset/index.html"); //加载本地页面,页面放在项目assets目录下
   

3. 应用内打开页面

   WebSettings webSettings = mWebView.getSettings();
   /**在App内部打开页面  **/
   mWebView.setWebViewClient(new WebViewClient());
   

   经过以上三步，便可以在应用中使用WebView加载网页了

4. 常用参数设置

//网页适配手机屏幕，以显示完全
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);
webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);

//支持手势缩放，并且隐藏丑丑的缩放按钮
webSettings.setSupportZoom(true);
webSettings.setBuiltInZoomControls(true);
webSettings.setDisplayZoomControls(false);

​

二、JavaScript调用安卓方法

1. 如果我们访问的页面中有JavaScript，在初始化时，设置WebView支持JavaScript

   WebSettings webSettings = mWebView.getSettings();
   webSettings.setJavaScriptEnabled(true);
   

2. 然后创建一个JavaScript接口，可以让JavaScript和安卓交互。JavaScript便可以调用安卓本地的方法，执行我们想要的操作

2.1 创建接口：

    private class TestJavaScriptInterface {

           @JavascriptInterface
           public void getUserInfo() {
               Toast.makeText(context, "点击", Toast.LENGTH_LONG).show();

           }
       }    

​ 2.2 为JavaScript注入这个接口

//第一个参数：android和js交互的接口函数
//第二个参数：android为桥接对象可随意设置
mWebView.addJavascriptInterface(new TestJavaScriptInterface(), "android");

2.3 JavaScript代码：

<script>
function onClick(){
    window.android.getUserInfo();
}
</script>

如下图，点击网页上的按钮后，调用了我们本地的方法并且弹出了Toast。证明JavaScript调用本地方法成功了。

微信截图_20170720114550.png