Android-WebView实践总结

引言

最近在公司项目及个人项目都用到WebView,重温了一下已经忘了差不多的HTML和JavaScript,因此在这里总结,方便之后的开发。

加载Web页面

从显示Web页面开始,第一步当然是配置网络权限

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

布局很简单,就只有一个WebView

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"    
  android:id="@+id/activity_main"    
  android:layout_width="match_parent"    
  android:layout_height="match_parent">   

  <WebView       
    android:id="@+id/webview"      
    android:layout_width="match_parent"       
    android:layout_height="match_parent">   
  </WebView>

</FrameLayout>

接下来就是java代码,使用load方法加载Url

public class MainActivity extends AppCompatActivity {    
    private WebView mWebView;    
    @Override    
    protected void onCreate(Bundle savedInstanceState) {        
        super.onCreate(savedInstanceState);       
        setContentView(R.layout.activity_main);        

        mWebView = (WebView) findViewById(R.id.webview);        
        mWebView.loadUrl("http://www.baidu.com");    
  }
}

通过以上几个步骤在URL正确的情况下就能显示出与URL对应的Web页面,但默认情况下会启动系统默认的浏览器来显示Web页面,而大部分情况下Web页面应该显示在App内部。对于这个问题可以通过为WebView设置WebViewClient实现,具体代码如下

public class MainActivity extends AppCompatActivity {    
    private WebView mWebView;    
    @Override    
    protected void onCreate(Bundle savedInstanceState) {        
        super.onCreate(savedInstanceState);       
        setContentView(R.layout.activity_main);        

        mWebView = (WebView) findViewById(R.id.webview);        
        mWebView.loadUrl("http://www.baidu.com");
        mWebView.setWebViewClient(new WebViewClient());    
  }
}

通过

mWebView.setWebViewClient(new WebViewClient());

将WebView与WebViewClient进行绑定。这样设置之后就可以实现使用WebView在App内部加载Web页面,其中的原理,根据WebViewClient源码中的文档注释就能明白

文档注释

在没有设置WebViewClient的情况下,Url是交给系统处理的,处理方式一般都是启动系统默认浏览器来加载页面;
在设置WebViewClient的情况下有分为以下两种情况:
shouldOverrideUrlLoading返回 true,表示WebView不处理,交由主机应用程序处理
shouldOverrideUrlLoading返回 false,表示由WebView处理URL
而shouldOverrideUrlLoading在默认情况下是返回false,因此给WebView设置了WebViewClient就能将页面在WebView中显示

WebViewClient

上面提到了WebViewClient,这边就对WebViewClient中的两个常用方法的实践进行一下总结

shouldOverrideUrlLoading

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {      
    return true;
}
@Override
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {    
    return true;
}

shouldOverrideUrlLoading在作用在前文意见介绍过,但这边有一点需要注意以下

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {      
    return true;
}

这个方法在 Android 7.0 SDK中已经被弃用,用

@Override
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {    
    return true;
}

代替,但新的API在低版本中是不兼容的,表现的情况就是不被调用,不过旧的API兼容所有版本,所以考虑到兼容性应该使用旧API也就是第二个参数为String url的shouldOverrideUrlLoading

onReceivedError

@Override
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {   
 super.onReceivedError(view, errorCode, description, failingUrl);
}

在URL错误、网络异常、服务器异常导致页面加载失败的情况下onReceivedError都会被调用,默认情况下,在页面加载失败时会显示系统默认的一个失败页面,系统默认页面与我们App的UI风格是不太可能统一的,所以为了界面的美观可以通过onReceivedError监听WebView加载失败,在onReceivedError中调用WebView的load方法加载自定义的HTML失败页面,这个自定义的HTML失败页面一般放在项目的assets文件夹下,具体代码如下

@Override
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {    
  super.onReceivedError(view, errorCode, description, failingUrl);    
  view.loadUrl("file:///android_asset/XXX.html");
}

XXX表示自定义的HTML文件的文件名。onReceivedError(WebView view, int errorCode, String description, String failingUrl) 在Android 6.0 SDK已被弃用,但与shouldOverrideUrlLoading一样高版本的API在低版本中不兼容,所以考虑兼容性还是继续使用。

Java与JavaScript的交互

首先要对WebView进行如下设置

mWebView.setWebChromeClient(new WebChromeClient());
mWebView.getSettings().setJavaScriptEnabled(true);

Java调用JavaScript

mWebView.loadUrl("javascript:Java_Call_JS("+"'test'"+")");

webView调用js的基本格式为webView.loadUrl(“javascript:methodName(parameterValues)”)

javascript:为固定格式,methodName在上述代码中对应的就是Java_Call_JSJava_Call_JS定义在JavaScript中,可以根据实际的JavaScript方法名进行替换,具体代码会在下文给出

JavaScript调用Java

JavaScript调用Java需要使用到WebView的addJavascriptInterface方法,相关代码如下

html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script type="text/javascript">            
    function Java_Call_JS(message){
           alert(message);
    }
    function JS_Call_Java(text){ 
           window.Android.callJava(text);
    }
    </script>
</head>
<body>
    <input type="button" value="call java" onclick="JS_Call_Java('')">
</body>
</html>

Java

mWebView.addJavascriptInterface(new JavascriptInterface(),"Android");

class JavascriptInterface{   
    @android.webkit.JavascriptInterface    
    public void callJava(String text){
        Toast.makeText(MainActivity.this,"test",Toast.LENGTH_SHORT).show();
    }
}

根据上述两段代码可以总结如下:
在JS中调用Java的基本格式:window.jsInterfaceName.methodName(parameterValues)
在本例中jsInterfaceName就对应Java代码中addJavascriptInterface的第二个参数"Android",methodName对应JavascriptInterface类中的callJava方法,被JavaScript调用的方法需要用__@android.webkit.JavascriptInterface __注解。

最后放上一个完整示例,在HTML页面中点击按钮,调用Java方法,显示Toast;点击Native的按钮调用JavaScript方法,在HTML页面中显示出对话框

JavaScript调用Java
Java调用JavaScript
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script type="text/javascript">            
    function Java_Call_JS(message){
           alert(message);
    }
    function JS_Call_Java(text){ 
           window.Android.callJava(text);
    }
    </script>
</head>
<body>
    <input type="button" value="call java" onclick="JS_Call_Java('JavaScript call Java')">
</body>
</html>
public class MainActivity extends AppCompatActivity {    
    private WebView mWebView;
    private Button mButton;    
    @Override    
    protected void onCreate(Bundle savedInstanceState) {        
        super.onCreate(savedInstanceState);       
        setContentView(R.layout.activity_main);        

        mWebView = (WebView) findViewById(R.id.webview);        
        mWebView.loadUrl("file:///android_asset/sample.html");
        mWebView.setWebViewClient(new WebViewClient()); 
        mWebView.setWebChromeClient(new WebChromeClient());   
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.addJavascriptInterface(new JavascriptInterface(),"Android");

        mButton = (Button) findViewById(R.id.button);
        mButton.setOnClickListener(new View.OnClickListener() {
              @Override
              public void onClick(View view) {
              mWebView.loadUrl("javascript:Java_Call_JS("+"'Java call JavaScript'"+")");
            }        
        );
    }

    class JavascriptInterface{   
        @android.webkit.JavascriptInterface    
        public void callJava(String text){
            Toast.makeText(MainActivity.this,"test",Toast.LENGTH_SHORT).show();
        }
    }
}
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

   <WebView
       android:id="@+id/webview"
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="1">

   </WebView>
   <Button
       android:id="@+id/button"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_gravity="center"
       android:text="call JS"/>
</LinearLayout>

最后

如果文中存在错误或纰漏,请在评论中留言,我会在第一时间进行修改

推荐阅读更多精彩内容