请选择 进入手机版 | 继续访问电脑版

Android热门技术更新:WebView加强(1天课时)

发表于 06-14 17:38 显示全部楼层 58 662

WebView使用进阶

经过这么多的发展,目前的Android应用开发模式已经有了很多的改变,除了有原来的原生应用开发模式,随着HTML5等前端技术的进步,也催生了多种开 发模式。比如说目前非常火爆的Native+web混合模式,其实就是在开发某个页面的时候,经常会更改,我们就可以使用网页的形式将页面的内容展示,应 用使用网页进行交互。本质上来说,还是内嵌了一个网页。

这种做法有什么优势呢?

  • 1 开发方便,网页开发的成本要比原生开发应用的成本低

  • 2 发布方便,如果我们的APP上线后,我们有了新的业务需求,开发完成后,我们只能更新客户端或者使用热修复等技术,但是使用Web的方式开 发的页面,直接将新的页面放上线上即可。


有优势的同时肯定也有劣势:

  • 1 用户体验差,由于目前的前端技术暂时无法和原生的应用相比,所以开发出来的页面与原生的页面还是有差距

  • 2 流量使用的多。



适合的场景:

  • 1 信息展示的页面。HTML+CSS提供了强大的排版能力,能够很方便的开发出需要的页面。 

  • 2 电商行业的活动页面。因为经常性的更改,网页的灵活性非常适合这种情况。

讲了这么多,我们知道了Web在我们现在开发的重要位置,那我们怎么才能开发出开始混合模式的开发呢?我们先介绍一个重要的系统控件给大家。


1 WebView

1.1 WebView介绍 

WebView是混合开发模式的主角,我们使用这个控件来进行加载,控制网页,也是我们需要详细掌握的一个系统控件。

image.png

从上面这个图片上面我们可以看到,和大部分控件一样,WebView继承与View,也就是一个展示内容的控件。 

我们来看看怎么使用WebView


1.2 loadUrl 加载一个网页文件

image.png


WebView提供了一个方法让我们加载一个网页。这个网页可以是线上的网页,可以是本地的网页。 首先在布局文件中添加一个WebView

image.png

我们尝试加载一个QQ的首页

image.png

image.png


发现无法加载网络的网页,记得添加网络权限。

image.png


image.png


这就是我们最简单的使用WebView的方法,我们通过网络加载一个页面。

除了网络的网页之外,WebView也可以加载本地页面。下面我就来教大家如何加载一个本地的网页。

我们一般都会把本地的网页放置在assert文件夹下面。默认情况下,项目是不会带assert文件的,我们可以自己创建文件夹,也可以使用as来帮我们创建。

image.png

image.png


创建完成后我们可以在main文件夹找到我们的assets,我们常常在这个文件夹内部放置一些额外的数据,如数据库,网页的等等。 

我们创建一个简单的网页,这个网页就显示一个文字与一个网络图片

image.png


我们将网页放置到assets文件夹内部

image.png



接着我们来加载这个网页


loadUrl的两种用法

  • 1 直接加载某个网址

  • 2 通过file:///android_asset/文件名,加载网页


assetsres 文件夹的区别


拓展知识:

assets 与 res的区别 我们知道我们在开发Android应用的过程过,需要使用大量的资源文件,如果我们放置在res文件下,它会生成一个独立的id,而在assets文件夹下不会 

如果我们需要获取assets的文件,我们可以使用getAssets().open打开一个文件。下面是一个加载assets的代码

image.png


image.png



loadDate加载HTML代码 

上面我们学习了怎么加载一个网页,我们在上面的例子加载的网页都是一个完整的文件,但是在实际的开发过程中,我们可能会遇到这样的需求,我们可

能需要动态的更改一些网页的数据,再讲网页显示出来,如果是一个完整的的网页,我们可能会根据需要生成不同的HTML代码,再加载到WebView中。 


WebView提供了两个方法来加载网页代码

image.png

image.png

注意使用这个方法,如果HTML代码里面有中文的话,可能会出现乱码。我们必须在mini type里面添加这句话


image.png


loadDateWithBaseUrl加载html代码 

一般我们在实际开发中不使用这个api,而是使用另外一个api


image.png


我们发现loadDataWithBaseURL 比loadData多了两个参数

image.png



我们先看看baseUrl 是干嘛的。

image.png

我们看看上面的这个HTML代码,里面有个图片的地址,这个图片的地址是一个绝对的地址,什么是绝对地址呢?就类型咱们的地址一样,先是国家,再到 省,市,区,街道,再到门牌,绝对路径代码一个资源的查找路径,根据这个路径我们就可以找到这个图片,但是有时我们的HTML代码写的是相对路径, 比如下面的的代码


image.png


比如这个图片需要加载的图片叫做abc.png,但是WebView不知道去哪里加载这个图片。这个时候baseUrl就来干活了,我们告诉这个WebView当出现找不 到资源的时候去哪里找。

image.png


image.png

接着我们把这张图片放入assets文件夹


image.png


我们要WebView从assets文件夹中加载资源怎么办呢?

image.png

如果你的图片放置公司的服务器怎么办?将baseUrl指向你们的公司的服务器,比如你的图片放在520it.com这个服务器的abc文件夹,那这个baseUrl怎么 写呢?http://www.520it.com/abc ,webview就会去http://www.520it.com/abc这个路径加载资源了。



处理跳转

经过上面的教学,大家应该学会怎么加载一个HTML页面,大家可以根据需求来选择不同的方式加载页面。下面我们来讲解一下如何出来WebView的跳转。 我们知道,我们在浏览一个网页的时候,点一个链接后,会跳转到另外一个网页,我们看看如果在手机上面这样会有什么问题。 当我们加载了www.qq.com这个网页的时候,我们点击一个链接,我们发现应用会跳转系统的浏览器,非常影响体验。


image.png


我们希望的是点击某条链接后,WebView会自动打开这个页面,当我们点击返回键时,WebView会返回上一个页面。应该怎么做呢?

image.png
image.png


historyUrl

讲完跳转后,我们来回来刚刚那个loadDatawithBaseUrl这个方法,刚刚我们讲这个方法的时候最后一个参数没有没有和大家讲,叫做historyUrl 我们来看看这个HTML代码

image.png


当我们点击了图片后,网页跳转到www.baidu.com,但是当我们回到上一页的时候,是一个空白页面,为什么呢,因为我们这里的historyUrl传递的是null, 空的意思就是返回到一个空的页面,我们可以指定我们返回的页面。

image.png


其他方法

  • webView 除了上面的方法,我们还有一些其他的常用的方法 reload() 刷新当前页面

  • getTitle() 获取当前页面的标题


WebViewClient

WebViewClient是webview的一个辅助类,我们经常使用WebViewClient这个类来监控WebView加载网页的状态。 下面的是我们在开发中经常会使用的方法。

  • onLoadResource (WebView view, String url)

    网页加载网页各种资源的回调,比如你的网页使用了各种图片和css文件与js文件

image.png


image.png

    我们可以使用这个方法监控资源加载的情况。

  • onPageStarted

    网页开始加载的回调

  • onPageFinished

    网页加载完成的回调


image.png

image.png


  • onReceivedError(WebView view, int errorCode, String description, String failingUrl) 页面加载出错的方法 

  • onReceivedError(WebView, WebResourceRequest, WebResourceError)

image.png


image.png

  • shouldOverrideUrlLoading

处理网页内部的跳转。

image.png


WebSettings

webview的设置类,能够设置webview的各种详细参数

  • setAllowFileAccess(boolean allow) 

    设置是否使用file协议访问网页,默认是开启的。注意使用这个协议,可能照成应用的安全问题。 

  • setBuiltInZoomControls(boolean enabled)

    设置是否使用webview自带的缩放功能。

  • setDefaultFontSize(int size)

    设置页面的文字大小,设置后网页的字体大小全部变大


image.png


  • setJavaScriptEnabled(boolean flag) 

    默认webview是不支持网页的javaScript,设置webview是否执行页面的js方法。 setDatabaseEnabled(boolean flag)

  • setDomStorageEnabled(boolean flag);

    html5支持数据库的功能,数据库有两种第一种官方的规范,DOM Storage,另外一种是第三方api ,Web SQL Database。我们先来讲讲这两种数 据库存储方式。对于以前来说,一个Web应用要存储数据,大多会放置cookie中,但是cookie有一个限制,就是内容只能4K,且容易被篡改。所以 在Html5内增加存储的概念,这个就是DOM Storage,DOM Storage 分为 sessionStorage 和 localStorage。 localStorage 对象和 sessionStorage 对象使用方法基本相同,它们的区别在于作用的范围不同。sessionStorage 用来存储与页面相关的数据,它在页面关闭后无法使用。而 localStorage 则持久存在,在页面关闭后也可以使用。


image.png


image.png


上面是在pc端使用的情况,我们来看看在手机上使用会是什么情况。我们发现这个代码在手机的webview上面是无法正常执行的。为什么呢?因为 我们没有设置webview对数据的执行。

image.png

设置上面的支持后,我们的页面就可以正常的工作了。我们来看看Dom数据库的存储情况。我们打开应用的存储路径 /data/data/应用包名,发现无 法找到相应的数据库。

image.png
image.png


  • setCacheMode

    设置返回键的处理,是否使用缓存加载页面,LOAD_DEFAULT(先从cache加载,没有且没有过期,再去网络加载), 

    LOAD_CACHE_ELSE_NETWORK(先从cache加载,如果存在,不管有没有过期,都不会再去网络加载), LOAD_NO_CACHE(不使用cache) , LOAD_CACHE_ONLY(只使用cache)


image.png



WebChromeClient

WebChromeClient处理js交互与网页内容的类,使用这个类,可以让android的webview轻松的获取到各种js的事件的回调

  • onJsAlert Alert()函数是JavaScript中最常见的方法,我们常常使用这个方法在网页上面来弹出对话框与提示框。默认情况,webview不会响应Alert

方法。

    如果想响应alert的话,需要实现WebChromeClient的onJsAlert方法,这个方法有两个返回值:

    1 不设置webChromerClient,不响应alert方法

    2 return true,不会弹出系统的对话框。需要自己处理。注意如果是Return true的情况,一定要出来完JsResult,调用confirm();或者cancel();否则 下次就不会拦截这个事件了。

    3 return false 或 return super, 会弹出默认的Alert对话框 

接收网页的alert事件


image.png


  • onJsPrompt

prompt 是JavaScriptde 输入对话框,可以接受一个输入的值,下面这个例子就是在网页上面显示一个promt的例子

 image.png


image.png


如果想响应prompt的话,需要实现WebChromeClient的onJsPrompt方法,这个方法有两个返回值: 

1 不设置webChromerClient,不响应prompt方法

2 return false 或 return super, 会弹出默认的Alert对话框

image.png

image.png


3 return true,不会弹出系统的对话框。需要自己处理。注意如果是Return true的情况,一定要处理完JsPromptResult,调用confirm(返回值);或者 cancel();否则下次就不会拦截这个事件了。

image.png

image.png


  • onJsConfirm 

    用来处理confirm方法

image.png


    用法与onJsAlert用法类似 

  • onReceivedTitle 

    接收网页的标题 

  • onProgressChanged 

    页面加载的百分比

image.png


  • onExceededDatabaseQuota

    在上面的一个内容里面,我们将到了html5数据库,但是我们只讲了DOM Storage,还没有将Web sql Storage,如果你的网页使用的Web sql

Storage,除了要配置DOM Storage的方法外还需要你重写onExceededDatabaseQuota。 

    为这个Web sql Storage申请新的空间。

image.png


编写一个网页使用Web sql Storage

image.png

image.png


image.png

image.png


Java代码与JavaScript交互

我们在前面的课程学会怎么加载一个网页,但是我们在应用最重要的就是完成页面的交互功能,比如说点击事件等等。但是界面是html代码写的,我们怎 么知道用户做了什么操作呢?这个时候,我们可以通过webView提供给我的Api来进行实现html/JavaScript与Java代码的交互,我们今天介绍5种方法来交互


  • addJavascriptInterface(Object object, String name)(最常用) 

    1 设置 addJavascriptInterface

image.png


2 在addJavascriptInterface的方法上面增加注解

image.png


3 编写给JavaScript调用的方法,并增加注解

image.png


4 在javaScript中调用该方法

image.png


  • onJsAlert 通过alert()方法传递参数到Java的onJsAlert方法

    1 为webview 增加webChrome

image.png


    2 在网页中使用alert传递值

image.png


  • onJsConfirm, 与上面的方式相同,在JavaScrpit中将alert改为confirm 

  • onJsPrompt

    1 重写onJsPrompt方法,接收message与defaultmessage方法。

image.png


2 在html中通过promt传递值过来。运算完毕后接受java的返回值。 

image.png


  • shouldOverrideUrlLoading

可以通过捕获页面的跳转进行数据的传递。定义安全的协议名称,当出现指定的安全的协议后,进行相应的处理。

image.png

image.png

以上是JavaScript调用Java代码的方法,我们接下来讲讲如何通过Java代码调用JavaScript的方法。 

我们可以使用webView.loadUrl 来调用javascript方法。调用的格式为(webView.loadUrl(javascript:方法名))。


WebView Cookie

在网站开发的时候,我们常常需要处理这样的需求,比如我在app登陆了,在使用webview加载一个网页,网页就不需要再登陆了。在浏览器的时代,有 这样一个技术来实现这个需求,就是使用cookie。 cookie是一个本地存放数据的机制。常见于网页开发中。如网页把一些文本信息存在硬盘。下面我们来 学习一下如何在Webview中保存cookie。

下面我们以一个例子来学习如何在本地保存Cookie,应用的界面如下

image.png


我们编写一个工具来获取网络数据

image.png


编写点击逻辑

image.png

image.png


跳转的页面的布局

image.png


将cookie添加到数据库后访问相应的网页

image.png


image.png



安全性的问题

webview的开发给我们带了很大的便利同时,也带了很多风险。最容易出现的问题有两个: 

1 远程代码执行安全漏洞

在android 4.2版本以下的手机有一个问题就是,webview会被JavaScript注入,造成手机出现信息安全的问题,比如下载病毒,发送短信等等。问题就出 在addJavascriptInterface方法。JavaScript通过调用这个接口可以直接操作本地的JAVA接口。

google在4.2的版本上面解决了这个问题,解决的方法是在被js调用的方法上面加上一个声明, @JavascriptInterface ,但是4.2版本以下的手机就没有提 出官方的解决方法。目前来说在4.2版本以下的手机能够采用以下几个方法来解决安全问题

  • 1 通过自定义url来进行通信,我们可以重写 shouldOverrideUrlLoading 方法来接收参数 

  • 2 通过js通过prompt方法传递参数到 onJsPrompt

image.png


通过js的漏洞获取到java运行时的内容,接着执行命令,理论上可以干任何事情,窃取通讯录,安装广告应用。



2 app跨源攻击 

webView支持file协议,如果应用有sd卡的权限,这就意味着webView能够去读取到其他应用的私有的文件。目前跨源攻击的主要问题是: 

    1 webview 获取到其他应用的私密文件和信息,如保存的密码,收藏夹,历史记录

    2 webview 在文件内执行JavaScript,http、file、https等协议,将窃取的信息上报 我们看看下面这个例子

setAllowFileAccessFromFileURLs() 设置允许通过file协议访问其他的文件 setAllowUniversalAccessFromFileURLs() 设置允许通过file协议访问http、https、file等协议


image.png

image.png

模拟盗取文件和模拟数据上报



内存的问题

    这几年H5的发展速度很快,使得Hybrid混合开发越来越流行,而webview也成为了开发中必备的元素。但是我们知道WebView在加载页面时,会占用非 常大的内存,无论是iOS还是Android系统上,加载一个Web页面一般需要用到12M左右,而如果我们不及时清理WebView的内存,那最后可能会随着内存 消耗的不断增加而发生OOM(Out Of Memory)导致程序崩溃.

我们可以使用一个独立的进程来加载这个activity,当这个页面退出后,我们结束这个进程,就算发生了泄露也不会影响到应用的进程。




广场舞大妈说,如果跳的足够快,她的孤独就追不上她。

拾荒的大叔说,如果翻垃圾翻得足够仔细,便能找回丢失的自己。

碰瓷的大爷说,只要演的够逼真,就能骗过匆匆流逝的时光。

Android学院的老师对小编说

只要坚持学习Android热门技术,就一定能够改变人生和命运!



网盘视频链接及密码获取:

【PS:回复本帖后,下方将会显示网盘密码】

游客,如果您要查看本帖隐藏内容请回复


回复 使用道具
举报
亚UN浪

发表于 11-20 15:37 显示全部楼层

谢谢分享,值得学习

回复 支持 反对 使用道具
举报
huoxuan98

发表于 11-15 09:31 来自手机 显示全部楼层

过来学习一下
回复 支持 反对 使用道具
举报
Wsl

发表于 10-21 21:54 显示全部楼层

回复 支持 反对 使用道具
举报
开开

发表于 10-04 11:54 显示全部楼层

6666666666666

回复 支持 反对 使用道具
举报
1002300881

发表于 09-28 11:11 显示全部楼层

补充下知识

回复 支持 反对 使用道具
举报
ScottMa

发表于 09-24 17:15 显示全部楼层

好好学习
回复 支持 反对 使用道具
举报
远方路人甲

发表于 09-21 09:53 显示全部楼层

非常感谢

回复 支持 反对 使用道具
举报
Legion

发表于 09-20 20:14 显示全部楼层

小码哥的视频一直都是精品

回复 支持 反对 使用道具
举报
qcl_1989

发表于 09-19 19:18 显示全部楼层

sssss

回复 支持 反对 使用道具
举报

发表新文章
小码哥官方团队

小码哥教育

0

学分

1840

学币

3787

积分

小码哥教育

Rank: 5Rank: 5

积分
3787

小码哥一周年勋章活动达人勋章小码哥社区荣誉创始人勋章小码哥版主勋章真人认证勋章前100注册用户勋章社区第一人勋章意见领袖勋章真土豪勋章勋章

Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育