Android开发之路之 webview
公众号：
欢迎关注我的个人公众号，来一起交流Android 开发知识
一、简介
本来不想专门找一节来介绍webview技术的，因为现在对于混合开发有很多的框架比如RN和FLutter，但是这些框架对于一些webview页面比较少的项目来说显得重量级了一些。因此还是单独整理一篇出来，供以后项目的参考及学习。写这篇文章确实花了很长的时间，一方面觉得很混乱，api很多都想说一点，另一方面觉得以后这些api到底能不能用到。因此有些章节说的比较笼统，我也给出了参考的博客地址，对于想深入了解的同学可以参考这些博客。
WebView在Android平台上用于显示网页。WebView是一个基于WebKit引擎、展现Web页面的控件，Android的WebView在低版本和高版本采用了不同的WebKit版本内。4.4后WebView内部实现并不是完全使用Chrome内核，而是部分使用了Chrome内核，其他都是与Chrome不相同的。
二、WebView的使用
webview的使用有两种方式：一种是直接显示网页内容；另一种就是与JS进行交互。
2.1基本使用
2.1.1、webview加载在线的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");
mWebView.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
mWebView.loadUrl(url);
return true;
}
});
}
################ 布局文件 ############################
xml version="1.0" encoding="utf-8"?>
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"+ ===
tools:context=".MainActivity">
android:id="@+id/webview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
权限：
注意：1、webview加载的url地址必须包含http://或者https://协议完整的域名地址，webview不会默认填充。
2、系统会默认通过手机浏览器去打开网页，为了能够直接通过webview显示网页，必须设置webviewclient.此
外还必须要添加相关权限。
2.1.2、加载本地的html文件。
加载本地的html文件有两种，一种是加载本地assets目录下的文件，这种html文件会打包到APK文件中，另一种是加载手机本地sdcard下的html文件。加载两种类型的html文件同样调用loadurl()方法，只不过url地址则需要加些前缀：
-
如果html文件存放在assets目录下则前缀为：file:///android_asset/+你的html文件名.html(注意这里有三个斜杠)
-
如果html文件存放在sdcard下，则前缀为:content://com.android.htmlprovider/sdcard/+你的html文件名.html（注意:content前缀可能会导致异常，可以使用file:///sdcard/+你的html文件.html）你可以在手机浏览器中将“ file:///sdcard/+你的html文件.html”复制到访问栏可以测试能不能访问到。
具体代码为：
webview.loadUrl("file:///android_asset/test.html”);//加载assets夹下的html文件
webview.loadUrl("file:///sdcard/test.html”);//加载sdcard文件夹下的html文件
注意：
这里我们看出加载本地的html文件是不需要设置webviewclient的，而加载线上的html文件必须设置webviewclient。
三、webview的基本设置
/**
* 是否支持缩放，配合方法setBuiltInZoomControls使用，默认true
*/
setSupportZoom(boolean support)
/**
* 是否需要用户手势来播放Media，默认true
*/
setMediaPlaybackRequiresUserGesture(boolean require)
/**
* 是否使用WebView内置的缩放组件，由浮动在窗口上的缩放控制和手势缩放控制组成，默认false
*/
setBuiltInZoomControls(boolean enabled)
/**
* 是否显示窗口悬浮的缩放控制，默认true
*/
setDisplayZoomControls(boolean enabled)
/**
* 是否允许访问WebView内部文件，默认true
*/
setAllowFileAccess(boolean allow)
/**
* 是否允许获取WebView的内容URL ，可以让WebView访问ContentPrivider存储的内容。 默认true
*/
setAllowContentAccess(boolean allow)
/**
* 是否启动概述模式浏览界面，当页面宽度超过WebView显示宽度时，缩小页面适应WebView。默认false
*/
setLoadWithOverviewMode(boolean overview)
/**
* 是否保存表单数据，默认false
*/
setSaveFormData(boolean save)
/**
* 设置页面文字缩放百分比，默认100%
*/
setTextZoom(int textZoom)
/**
* 是否支持ViewPort的meta tag属性，如果页面有ViewPort meta tag 指定的宽度，则使用meta tag指定的值，否则默认使用宽屏的视图窗口
*/
setUseWideViewPort(boolean use)
/**
* 是否支持多窗口，如果设置为true ，WebChromeClient#onCreateWindow方法必须被主程序实现，默认false
*/
setSupportMultipleWindows(boolean support)
/**
* 指定WebView的页面布局显示形式，调用该方法会引起页面重绘。默认LayoutAlgorithm#NARROW_COLUMNS
*/
setLayoutAlgorithm(LayoutAlgorithm l)
/**
* 设置标准的字体族，默认”sans-serif”。font-family 规定元素的字体系列。
* font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，
* 则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个
* 优先表。浏览器会使用它可识别的第一个值。
*/
setStandardFontFamily(String font)
/**
* 设置混合字体族。默认”monospace”
*/
setFixedFontFamily(String font)
/**
* 设置SansSerif字体族。默认”sans-serif”
*/
setSansSerifFontFamily(String font)
/**
* 设置SerifFont字体族，默认”sans-serif”
*/
setSerifFontFamily(String font)
/**
* 设置CursiveFont字体族，默认”cursive”
*/
setCursiveFontFamily(String font)
/**
* 设置FantasyFont字体族，默认”fantasy”
*/
setFantasyFontFamily(String font)
/**
* 设置最小字体，默认8. 取值区间[1-72]，超过范围，使用其上限值。
*/
setMinimumFontSize(int size)
/**
* 设置最小逻辑字体，默认8. 取值区间[1-72]，超过范围，使用其上限值。
*/
setMinimumLogicalFontSize(int size)
/**
* 设置默认字体大小，默认16，取值区间[1-72]，超过范围，使用其上限值。
*/
setDefaultFontSize(int size)
/**
* 设置默认填充字体大小，默认16，取值区间[1-72]，超过范围，使用其上限值。
*/
setDefaultFixedFontSize(int size)
/**
* 设置是否加载图片资源，注意：方法控制所有的资源图片显示，包括嵌入的本地图片资源。
* 使用方法setBlockNetworkImage则只限制网络资源图片的显示。值设置为true后，
* webview会自动加载网络图片。默认true
*/
setLoadsImagesAutomatically(boolean flag)
/**
* 是否加载网络图片资源。注意如果getLoadsImagesAutomatically返回false，则该方法没有效果。
* 如果使用setBlockNetworkLoads设置为false，该方法设置为false，也不会显示网络图片。
* 当值从true改为false时。WebView会自动加载网络图片。
*/
setBlockNetworkImage(boolean flag)
/**
* 设置是否加载网络资源。注意如果值从true切换为false后，WebView不会自动加载，
* 除非调用WebView#reload().如果没有android.Manifest.permission#INTERNET权限，
* 值设为false，则会抛出java.lang.SecurityException异常。
* 默认值：有android.Manifest.permission#INTERNET权限时为false，其他为true。
*/
setBlockNetworkLoads(boolean flag)
/**
* 设置是否允许执行JS。
*/
setJavaScriptEnabled(boolean flag)
/**
* 是否允许Js访问任何来源的内容。包括访问file scheme的URLs。考虑到安全性，
* 限制Js访问范围默认禁用。注意：该方法只影响file scheme类型的资源，其他类型资源如图片类型的，
* 不会受到影响。ICE_CREAM_SANDWICH_MR1版本以及以下默认为true，JELLY_BEAN版本
* 以上默认为false
*/
setAllowUniversalAccessFromFileURLs(boolean flag)
/**
* 是否允许Js访问其他file scheme的URLs。包括访问file scheme的资源。考虑到安全性，
* 限制Js访问范围默认禁用。注意：该方法只影响file scheme类型的资源，其他类型资源如图片类型的，
* 不会受到影响。如果getAllowUniversalAccessFromFileURLs为true，则该方法被忽略。
* ICE_CREAM_SANDWICH_MR1版本以及以下默认为true，JELLY_BEAN版本以上默认为false
*/
setAllowFileAccessFromFileURLs(boolean flag)
/**
* 设置存储定位数据库的位置，考虑到位置权限和持久化Cache缓存，Application需要拥有指定路径的
* write权限
*/
setGeolocationDatabasePath(String databasePath)
/**
* 是否允许Cache，默认false。考虑需要存储缓存，应该为缓存指定存储路径setAppCachePath
*/
setAppCacheEnabled(boolean flag)
/**
* 设置Cache API缓存路径。为了保证可以访问Cache，Application需要拥有指定路径的write权限。
* 该方法应该只调用一次，多次调用自动忽略。
*/
setAppCachePath(String appCachePath)
/**
* 是否允许数据库存储。默认false。查看setDatabasePath API 如何正确设置数据库存储。
* 该设置拥有全局特性，同一进程所有WebView实例共用同一配置。注意：保证在同一进程的任一WebView
* 加载页面之前修改该属性，因为在这之后设置WebView可能会忽略该配置
*/
setDatabaseEnabled(boolean flag)
/**
* 是否存储页面DOM结构，默认false。
*/
setDomStorageEnabled(boolean flag)
/**
* 是否允许定位，默认true。注意：为了保证定位可以使用，要保证以下几点：
* Application 需要有android.Manifest.permission#ACCESS_COARSE_LOCATION的权限
* Application 需要实现WebChromeClient#onGeolocationPermissionsShowPrompt的回调，
* 接收Js定位请求访问地理位置的通知
*/
setGeolocationEnabled(boolean flag)
/**
* 是否允许JS自动打开窗口。默认false
*/
setJavaScriptCanOpenWindowsAutomatically(boolean flag)
/**
* 设置页面的编码格式，默认UTF-8
*/
setDefaultTextEncodingName(String encoding)
/**
* 设置WebView代理，默认使用默认值
*/
setUserAgentString(String ua)
/**
* 通知WebView是否需要设置一个节点获取焦点当
* WebView#requestFocus(int,android.graphics.Rect)被调用的时候，默认true
*/
setNeedInitialFocus(boolean flag)
/**
* 基于WebView导航的类型使用缓存：正常页面加载会加载缓存并按需判断内容是否需要重新验证。
* 如果是页面返回，页面内容不会重新加载，直接从缓存中恢复。setCacheMode允许客户端根据指定的模式来
* 使用缓存。
* LOAD_DEFAULT 默认加载方式
* LOAD_CACHE_ELSE_NETWORK 按网络情况使用缓存
* LOAD_NO_CACHE 不使用缓存
* LOAD_CACHE_ONLY 只使用缓存
*/
setCacheMode(int mode)
/**
* 设置加载不安全资源的WebView加载行为。KITKAT版本以及以下默认为MIXED_CONTENT_ALWAYS_ALLOW方
* 式，LOLLIPOP默认MIXED_CONTENT_NEVER_ALLOW。强烈建议：使用MIXED_CONTENT_NEVER_ALLOW
*/
setMixedContentMode(int mode)
上述是所有的webview的设置方法，我们只需要按需通过webviewsetting设置即可。
四、JS互调
4.1 JS调用Java代码
js调用java代码是通过接口注入的方式实现的，主要用到的方法是:
public void addJavascriptInterface(Object obj, String interfaceName) {}
第一个参数是我们注入js中的对象，第二个参数为这个对象的别名。这个别名就是在html中引用的名称，来指代我们传入第一个参数的对象。什么意思呢？打个比喻第一个参数我们传的对象名称就张飞，他的别名可以随便起一个，都是指代张飞这个对象，我们可以传翼德。html就用翼德这个名字去实现自己的方法。
另外一定要开启js交互
WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(true);
这里实现一个简单的功能，js调用java本地代码，弹一个toast
@SuppressLint({"AddJavascriptInterface", "SetJavaScriptEnabled"})
private void jsCallJava() {
WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(true);
settings.setSupportZoom(false);
mWebView.addJavascriptInterface(new JsBridge(MainActivity.this),"AndroidWebView");
mWebView.loadUrl("file:///android_asset/test2.html");
}
//JsBridge代码
package com.sheca.mystudydemo2;
import android.app.Activity;
import android.util.Log;
import android.webkit.JavascriptInterface;
import android.widget.Toast;
/**
* @author xuchangqing
* @time 2019/12/20 15:03
* @descript
*/
public class JsBridge {
private Activity mContext;
public JsBridge(Activity mContext){
this.mContext=mContext;
}
@JavascriptInterface
public void showInfoFromJs(final String message){
mContext.runOnUiThread(new Runnable() {
@Override
public void run() {
Log.e("js",message);
Toast.makeText(mContext,message+”调用了",Toast.LENGTH_SHORT).show();
}
});
}
@JavascriptInterface
public int sub(int first,int second){
Toast.makeText(mContext,second-first+”调用了",Toast.LENGTH_SHORT).show();
return second-first;
}
}
我们看一下html中的代码：
html>
我的博客
function f1() {
AndroidWebView.showInfoFromJs("哈哈,i m webview msg");
}
function f2() {
AndroidWebView.sub(2,1);
}