不知不觉,Hybird App已经成了目前比较主流的一种开发方式。
对于用户体验要求较高或者与硬件交互较多的功能我们一般都会采用Native原生的方式来实现。 而用户交互少,偏展示类,活动类的功能我们则通常采用H5的方式来实现, 例如新闻类的app,详情展示页一般就是H5的页面
- 一方面图文排版上web有着先天的优势,同时纯展示类的页面在目前的移动设备上,性能体验已经很难让用户分辨是网页还是原生了;
- 另一方面,H5的页面跨平台,方便在原生客户端上实现分享功能,拥有较强的传播性,我们平时常见的活动页面也拥有这样的优势,所以你看到的活动页面也基本都是H5,只需轻轻一点就能分享到各个平台;
- 同时,H5的页面开发降低了开发成本,一套代码,web,android,ios都能访问。(然而实际开发过程中,H5的适配也都是各种泪)
既然Hybird App有这么多优势,那在Android中我们通过什么样的方式在原生项目中嵌入H5页面呢?
那就不得不提到我们的WebVew了,作为官方唯一用来显示web的组件, 展示网页这样的任务也只能交给它了。
A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit rendering engine to display web pages and includes methods to navigate forward and backward through a history, zoom in and out, perform text searches and more.
引用官方文档的一句话: WebView是一个用来在Activity中显示我们网页的视图组件,它通过webkit渲染引擎渲染和显示我们的web页面,并且包含了web的历史导航操法,页面放大缩小,文本搜索等方法。
我们首先来看一下WebView的基本用法:
#WebView的基本用法
关于WebView的基本用法,大部分人也是轻车熟路, 本来也是写了一部分,无意中发现有位博主的博客对WebView的介绍实在太过详细,像我这样的懒人,有更好的文章是不会自己去写的, 所以删了自己写的,将大牛博主的博客分享出来,感兴趣同学的可以一起看一看:
了解完WebView的基本用法,那就来总结下最近项目中遇到的关于WebView的坑
#项目中使用WebView遇到的问题
###WebView界面的原生标题设置
如图所示, 一般情况下,我们WebView所在界面由顶部带标题的原生导航栏跟WebView的内容部分组成, 而WebView中的界面可能在点击后还会再跳其他Web页面(如图点击请假会在当前WebView跳转请假的Web页面)。
由于点击内容的不确定性,所以通常情况下,最简单的做法就是捕获h5页面的