Android 混合编程：WebView 实践，全世界都在问 Android 开发凉了吗

• onPageStarted(WebView view, String url, Bitmap favicon) //开始载入页面时调用的，我们可以设定一个 loading 的页面，告诉用户程序在等待网络响应。

• onPageFinished(WebView view, String url) //在页面加载结束时调用, 我们可以关闭 loading 条，切换程序动作。

• onLoadResource(WebView view, String url) //在加载页面资源时会调用，每一个资源（比如图片）的加载都会调用一次。

• onReceivedError(WebView view, int errorCode, String description, String failingUrl) //报告错误信息

• doUpdateVisitedHistory(WebView view, String url, boolean isReload) //更新历史记录

• onFormResubmission(WebView view, Message dontResend, Message resend) //应用程序重新请求网页数据

• onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host,String realm) //获取返回信息授权请求

• onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) //让 webview 处理 https 请求。

• onScaleChanged(WebView view, float oldScale, float newScale) //WebView 发生改变时调用

• onUnhandledKeyEvent(WebView view, KeyEvent event) //Key 事件未被加载时调用

WebChromeClient

WebChromeClient 用来帮助 WebView 处理 JS 的对话框、网址图标、网址标题和加载进度等。同样地, 通过继承 WebChromeClient 并重载它的方法也可以实现不同功能的定制, 如下所示:

• public void onProgressChanged(WebView view, int newProgress); //获得网页的加载进度，显示在右上角的 TextView 控件中

• public void onReceivedTitle(WebView view, String title); //获取 Web 页中的 title 用来设置自己界面中的 title, 当加载出错的时候，比如无网络，这时 onReceiveTitle 中获取的标题为"找不到该网页",

• public void onReceivedIcon(WebView view, Bitmap icon); //获取 Web 页中的 icon

• public boolean onCreateWindow(WebView view, boolean isDialog, boolean isUserGesture, Message resultMsg);

• public void onCloseWindow(WebView window);

• public boolean onJsAlert(WebView view, String url, String message, JsResult result); //处理 alert 弹出框，html 弹框的一种方式

• public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) //处理 confirm 弹出框

• public boolean onJsConfirm(WebView view, String url, String message, JsResult result); //处理 prompt 弹出框

WebView 生命周期

onResume()

WebView 为活跃状态时回调，可以正常执行网页的响应。

onPause()

WebView 被切换到后台时回调, 页面被失去焦点, 变成不可见状态，onPause 动作通知内核暂停所有的动作，比如 DOM 的解析、plugin 的执行、JavaScript 执行。

pauseTimers()

当应用程序被切换到后台时回调，该方法针对全应用程序的 WebView，它会暂停所有 webview 的 layout，parsing，javascripttimer。降低 CPU 功耗。

resumeTimers()

恢复 pauseTimers 时的动作。

destroy()

关闭了 Activity 时回调, WebView 调用 destory 时, WebView 仍绑定在 Activity 上.这是由于自定义 WebView 构建时传入了该 Activity 的 context 对象, 因此需要先从父

容器中移除 WebView, 然后再销毁 webview。

mRootLayout.removeView(webView);

mWebView.destroy();

WebView 页面导航

页面跳转

当我们在 WebView 点击链接时, 默认的 WebView 会直接跳转到别的浏览器中, 如果想要实现在 WebView 内跳转就需要设置 WebViewClient, 下面我们先来

说说 WebView、WebViewClient、WebChromeClient 三者的区别。

• WebView: 主要负责解析和渲染网页

• WebViewClient: 辅助 WebView 处理各种通知和请求事件

• WebChromeClient: 辅助 WebView 处理 JavaScript 中的对话框, 网址图标和标题等

如果我们想控制不同链接的跳转方式, 我们需要继承 WebViewClient 重写 shouldOverrideUrlLoading()方法

static class CustomWebViewClient extends WebViewClient {

private Context mContext;

publi

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

c CustomWebViewClient(Context context) {mContext = context;}

@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {if (Uri.parse(url).getHost().equals("github.com/guoxiaoxing")) {//如果是自己站点的链接, 则用本地 WebView 跳转 return false;}//如果不是自己的站点则 launch 别的 Activity 来处理 Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));mContext.startActivity(intent);return true;}}

关于 shouldOverrideUrlLoading()方法的两点说明:

1 方法返回值

返回 true: Android 系统会处理 URL, 一般是唤起系统浏览器。

返回 false: 当前 WebView 处理 URL。

由于默认放回 false, 如果我们只想在 WebView 内处理链接跳转只需要设置 mWebView.setWebViewClient(new WebViewClient())即可

/**

• Give the host application a chance to take over the control when a new

• url is about to be loaded in the current WebView. If WebViewClient is not

• provided, by default WebView will ask Activity Manager to choose the

• proper handler for the url. If WebViewClient is provided, return true

• means the host application handles the url, while return false means the

• current WebView handles the url.

• This method is not called for requests using the POST "method".

• @param view The WebView that is initiating the callback.

• @param url The url to be loaded.

• @return True if the host application wants to leave the current WebView

*/

public boolean shouldOverrideUrlLoading(WebView view, String url) {

return false;

}

2 方法 deprecated 问题

shouldOverrideUrlLoading()方法在 API >= 24 时被标记 deprecated, 它的替代方法是

@Overridepublic boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {view.loadUrl(request.toString());return true;}

但是 public boolean shouldOverrideUrlLoading(WebView view, String url)支持更广泛的 API 我们在使用的时候还是它,

关于这两个方法的讨论可以参见:

[stackoverflow.com/questions/3…](

)

[stackoverflow.com/questions/2…](

)

页面回退

Android 的返回键, 如果想要实现 WebView 内网页的回退, 可以重写 onKeyEvent()方法。

@Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) {// Check if the key event was the Back button and if there's historyif ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()) {myWebView.goBack();return true;}// If it wasn't the Back key or there's no web page history, bubble up to the default// system behavior (probably exit the activity)return super.onKeyDown(keyCode, event);}

页面滑动

关于页面滑动, 我们在做下拉刷新等功能时, 经常会去判断 WebView 是否滚动到顶部或者滚动到底部。

我们先来看一看三个判断高度的方法

getScrollY();

该方法返回的是当前可见区域的顶端距整个页面顶端的距离,也就是当前内容滚动的距离.

getHeight();getBottom();

该方法都返回当前 WebView 这个容器的高度

getContentHeight();

返回的是整个 html 的高度, 但并不等同于当前整个页面的高度, 因为 WebView 有缩放功能, 所以当前整个页面的高度实际上应该是原始 html 的高度

再乘上缩放比例. 因此, 判断方法是:

if (webView.getContentHeight() * webView.getScale() == (webView.getHeight() + webView.getScrollY())) {//已经处于底端}

if(webView.getScrollY() == 0){//处于顶端}

以上这个方法也是我们常用的方法, 不过从 API 17 开始, mWebView.getScale()被标记为 deprecated

This method was deprecated in API level 17. This method is prone to inaccuracy due to race conditions

between the web rendering and UI threads; prefer onScaleChanged(WebView,

因为 scale 的获取可以用一下方式:

public class CustomWebView extends WebView {

public CustomWebView(Context context) {super(context);setWebViewClient(new WebViewClient() {@Overridepublic void onScaleChanged(WebView view, float oldScale, float newScale) {super.onScaleChanged(view, oldScale, newScale);mCurrentScale = newScale}});}

关于 mWebView.getScale()的讨论可以参见:

[developer.android.com/reference/a…](

)

[stackoverflow.com/questions/1…](

)

WebView 缓存实现

在项目中如果使用到 WebView 控件, 当加载 html 页面时, 会在/data/data/包名目录下生成 database 与 cache 两个文件夹。

请求的 url 记录是保存在 WebViewCache.db, 而 url 的内容是保存在 WebViewCache 文件夹下。

控制缓存行为

WebSettings webSettings = mWebView.getSettings();//优先使用缓存 webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);//只在缓存中读取 webSettings.setCacheMode(WebSettings.LOAD_CACHE_ONLY);/不使用缓存 WwebSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);

清除缓存

clearCache(true); //清除网页访问留下的缓存，由于内核缓存是全局的因此这个方法不仅仅针对 webview 而是针对整个应用程序.clearHistory (); //清除当前 webview 访问的历史记录，只会 webview 访问历史记录里的所有记录除了当前访问记录.clearFormData () //这个 api 仅仅清除自动完成填充的表单数据，并不会清除 WebView 存储到本地的数据。

WebView Cookies

添加 Cookies

public void synCookies() {if (!CacheUtils.isLogin(this)) return;CookieSyncManager.createInstance(this);CookieManager cookieManager = CookieManager.getInstance();cookieManager.setAcceptCookie(true);cookieManager.removeSessionCookie();//移除 String cookies = PreferenceHelper.readString(this, AppConfig.COOKIE_KEY, AppConfig.COOKIE_KEY);KJLoger.debug(cookies);cookieManager.setCookie(url, cookies);CookieSyncManager.getInstance().sync();}

清除 Cookies

CookieManager.getInstance().removeSessionCookie();

WebView 本地资源访问

当我们在 WebView 中加载出从 web 服务器上拿取的内容时，是无法访问本地资源的，如 assets 目录下的图片资源，因为这样的行为属于跨域行为（Cross-Domain），而 WebView 是禁止

的。解决这个问题的方案是把 html 内容先下载到本地，然后使用 loadDataWithBaseURL 加载 html。这样就可以在 html 中使用 file:///android_asset/xxx.png 的链接来引用包里

面 assets 下的资源了。

private void loadWithAccessLocal(final String htmlUrl) {new Thread(new Runnable() {public void run() {try {final String htmlStr = NetService.fetchHtml(htmlUrl);if (htmlStr != null) {TaskExecutor.runTaskOnUiThread(new Runnable() {@Overridepublic void run() {loadDataWithBaseURL(htmlUrl, htmlStr, "text/html", "UTF-8", "");}});return;}} catch (Exception e) {Log.e("Exception:" + e.getMessage());}

TaskExecutor.runTaskOnUiThread(new Runnable() {@Overridepublic void run() {onPageLoadedError(-1, "fetch html failed");}});}}).start();}

注意

• 从网络上下载 html 的过程应放在工作线程中

• html 下载成功后渲染出 html 的步骤应放在 UI 主线程，不然 WebView 会报错

• html 下载失败则可以使用我们前面讲述的方法来显示自定义错误界面

二 代码交互

Android 原生方案

关于 WebView 中 Java 代码和 JS 代码的交互实现, Android 给了一套原生的方案, 我们先来看看原生的用法。后面我们还会讲到其他的开源方法。

JavaScript 代码和 Android 代码是通过 addJavascriptInterface()来建立连接的, 我们来看下具体的用法。

1 设置 WebView 支持 JavaScript

webView.getSettings().setJavaScriptEnabled(true);

2 在 Android 工程里定义一个接口

public class WebAppInterface {Context mContext;

/** Instantiate the interface and set the context */WebAppInterface(Context c) {mContext = c;}

/** Show a toast from the web page */@JavascriptInterfacepublic void showToast(String toast) {Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();}}

注意: API >= 17 时, 必须在被 JavaScript 调用的 Android 方法前添加 @JavascriptInterface 注解, 否则将无法识别。

3 在 Android 代码中将该接口添加到 WebView

WebView webView = (WebView) findViewById(R.id.webview);webView.addJavascriptInterface(new WebAppInterface(this), "Android");

这个"Android"就是我们为这个接口取的别名, 在 JavaScript 就可以通过 Android.showToast(toast)这种方式来调用此方法。

4 在 JavaScript 中调用 Android 方法

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />

<script type="text/javascript"> function showAndroidToast(toast) {Android.showToast(toast);} </script>

在 JavaScript 中我们不用再去实例化 WebAppInterface 接口, WebView 会自动帮我们完成这一工作, 使它能够为 WebPage 所用。

注意:

由于 addJavascriptInterface()给予了 JS 代码控制应用的能力, 这是一项非常有用的特性, 但同时也带来了安全上的隐患,

Using addJavascriptInterface() allows JavaScript to control your Android application. This can be a very useful feature or a dangerous

security issue. When the HTML in the WebView is untrustworthy (for example, part or all of the HTML is provided by an unknown person or

process), then an attacker can include HTML that executes your client-side code and possibly any code of the attacker's choosing. As such,

you should not use addJavascriptInterface() unless you wrote all of the HTML and JavaScript that appears in your WebView. You should also

not allow the user to navigate to other web pages that are not your own, within your WebView (instead, allow the user's default browser

application to open foreign links—by default, the user's web browser opens all URL links, so be careful only if you handle page navigation

as described in the following section).

下面正式引入我们在项目中常用的两套开源的替代方案

jockeyjs 开源方案

[jockeyjs](

)是一套 IOS/Android 双平台的 Native 和 JS 交互方法, 比较适合用在项目中。

Library to facilitate communication between iOS apps and JS apps running inside a UIWebView

jockeyjs 对 Native 和 JS 的交互做了优美的封装, 事件的发送与接收都可以通过 send()和 on()来完成。我们先简单的看一下 Event 的发送与接收。

Sending events from app to JavaScript

// Send an event to JavaScript, passing a payloadjockey.send("event-name", webView, payload);

//With a callback to execute after all listeners have finishedjockey.send("event-name", webView, payload, new JockeyCallback() {@Overridepublic void call() {//Your execution code}});

Receiving events from app in JavaScript

// Listen for an event from iOS, but don't notify iOS we've completed processing// until an asynchronous function has finished (in this case a timeout).Jockey.on("event-name", function(payload, complete) {// Example of event'ed handler.setTimeout(function() {alert("Timeout over!");complete();}, 1000);});

Sending events from JavaScript to app

// Send an event to iOS.Jockey.send("event-name");

// Send an event to iOS, passing an optional payload.Jockey.send("event-name", {key: "value"});

// Send an event to iOS, pass an optional payload, and catch the callback when all the// iOS listeners have finished processing.Jockey.send("event-name", {key: "value"}, function() {alert("iOS has finished processing!");});

Receiving events from JavaScript in app

//Listen for an event from JavaScript and log a message when we have receied it.jockey.on("event-name", new JockeyHandler() {@Overrideprotected void doPerform(Map<Object, Object> payload) {Log.d("jockey", "Things are happening");}});

//Listen for an event from JavaScript, but don't notify the JavaScript that the listener has completed//until an asynchronous function has finished//Note: Because this method is executed in the background, if you want the method to interact with the UI thread//it will need to use something like a android.os.Handler to post to the UI thread.jockey.on("event-name", new JockeyAsyncHandler() {@Overrideprotected void doPerform(Map<Object, Object> payload) {//Do something asynchronously//No need to called completed(), Jockey will take care of that for you!}});

//We can even chain together several handlers so that they get processed in sequence.//Here we also see an example of the NativeOS interface which allows us to chain some common//system handlers to simulate native UI interactions.jockey.on("event-name", nativeOS(this).toast("Event occurred!").vibrate(100), //Don't forget to grant permissionnew JockeyHandler() {@Overrideprotected void doPerform(Map<Object, Object> payload) {}});

//...More Handlers

//If you would like to stop listening for a specific eventjockey.off("event-name");

//If you would like to stop listening to ALL eventsjockey.clear();

通过上面的代码, 我们对 jockeyjs 的使用有了大致的理解, 下面我们具体来看一下在项目中的使用。

1 依赖配置

下载代码: [github.com/tcoulter/jo…](

), 将 JockeyJS.Android 导入到工程中。

2 jockeyjs 配置

jockeyjs 有两种使用方式

方式一:

只在一个 Activity 中使用 jockey 或者多 Activity 共享一个 jockey 实例

//Declare an instance of JockeyJockey jockey;

//The WebView that we will be using, assumed to be instantiated either through findViewById or some method of injection.WebView webView;

WebViewClient myWebViewClient;

@Overrideprotected void onStart() {super.onStart();

//Get the default JockeyImpljockey = JockeyImpl.getDefault();

//Configure your webView to be used with Jockeyjockey.configure(webView);

//Pass Jockey your custom WebViewClient//Notice we can do this even after our webView has been configured.jockey.setWebViewClient(myWebViewClient)

//Set some event handlerssetJockeyEvents();

//Load your webPagewebView.loadUrl("file:///your.url.com");}

方式二:

另一种就是把 jockey 当成一种全局的 Service 来用, 这种方式下我们可以在多个 Activity 之间甚至整个应用内共享 handler. 当然我们同样需要

把 jockey 的生命周期和应用的生命周期绑定在一起。

//First we declare the members involved in using Jockey

//A WebView to interact withprivate WebView webView;

//Our instance of the Jockey interfaceprivate Jockey jockey;

//A helper for binding servicesprivate boolean _bound;

//A service connection for making use of the JockeyServiceprivate ServiceConnection _connection = new ServiceConnection() {@Overridepublic void onServiceDisconnected(ComponentName name) {_bound = false;}

@Overridepublic void onServiceConnected(ComponentName name, IBinder service) {JockeyBinder binder = (JockeyBinder) service;

//Retrieves the instance of the JockeyService from the binderjockey = binder.getService();

//This will setup the WebView to enable JavaScript execution and provide a custom JockeyWebViewClientjockey.configure(webView);

//Make Jockey start listening for eventssetJockeyEvents();