基于H5的混合开发介绍（一）WebView

转自: https://www.cnblogs.com/sanchang/p/9261461.html

一 WebView到底是什么

 　   1 WebView是一种控件，它基于webkit引擎，因此具备渲染Web页面的功能。　　

　　2 基于Webview的混合开发，就是在 Anddroid os(安卓)/I os(苹果)原生APP里，通过WebView控件嵌入Web页面。

　　你手机里有淘宝软件吧？
　　就是外边是个原生APP的壳，内容是H5页面(基于html+css+js的Web页面)。

　　包括淘宝app，阿里云app（笔者目前做阿里云app组件库的开发）等等在内，现在的移动端混合开发软件，如果对于交互渲染要求不是特别高的项目，基本都是这么玩的。

二 这么玩的原因 

　　1. 用h5开发的内容页面，跨平台。你想想，无论你用的安卓还是苹果，你的淘宝app里都是H5页面。
　　　也就是一次开发，多系统适配。是不是节省了人力成本和时间成本？
　　　如果不用混合开发这种方式，就得找安卓工程师开发安卓端的，苹果ios工程师开发苹果的，需要开发两次——是不是很麻烦并且老板多出一倍工资啊……

　　2. Web更新方式为线上即时更新，不用下载安装补丁包。
　　　你想想，你玩王者或吃鸡吗？这些游戏里的游戏内容无疑都是原生开发的，每次更新你都得先下载安装包吧？当然，打开游戏经常会有一些类似活动公告、说明公告等一些窗口，这些可能也是由WebView嵌入的Web页面。也就是说，原生app里嵌入的Web内容所占比例可大可小，根据需求，对于适合WebView的模块，我们就可以选择用WebView实现它。
　　　而WebView中嵌入的网页更新需要下载包吗？——更新后的内容即时上线，根本不需要。

　　   这样对于用户来讲就很舒服啊。

　　

　　3. H5性能不断提高。
　　实际上，h5页面的交互、渲染性能肯定是比不上原生的——
　　但是，h5技术进步快，加上4g网络的普及化(5g时代马上也来了)，性能这一块就逐渐不再成问题了——典型的案例就是电商类app，性能差距基本看不出来，用户还是很舒服滴。

　　当然，像游戏啥的，牵扯到渲染引擎性能的问题，对于这点，Web渲染引擎还是非常勉强的。
　　——因为性能比起安卓原生或ios原生来讲，太差。

　　

　　你可以参考网页游戏和客户端游戏的区别——一种代表是一刀999级的贪玩蓝月！一种是你玩过的飞车啊炫舞啊诛仙啊……（听说现在逆水寒挺火的）。
　　都是游戏，差距是不是有点大。

三 WebView具体怎么玩

　　转自: https://blog.csdn.net/qq_36252044/article/details/77993297

　　WebView的使用详解

　　1.简介

WebView是一个基于webkit引擎、展现web页面的控件。 
Android的Webview在低版本和高版本采用了不同的webkit版本内核，4.4后直接使用了Chrome。

2.作用

• 显示和渲染Web页面
• 直接使用html文件（网络上或本地assets中）作布局
• 可和JavaScript交互调用

WebView控件功能强大，除了具有一般View的属性和设置外，还可以对url请求、页面加载、渲染、页面交互进行强大的处理。

3.使用介绍

一般来说Webview可单独使用，可联合其子类一起使用，下面会介绍几种:

• Webview自身的常见方法；
• Webview的最常用的子类 
  （WebSettings类、WebViewClient类、WebChromeClient类)
• Android和Js的交互

3.1 Webview常用方法

3.1.1 加载URL

可以根据资源分为三种:

//方式1. 加载一个网页： 
webView.loadUrl(“http://www.baidu.com/“);

//方式2：加载apk包中的html页面 
webView.loadUrl(“file:///android_asset/test.html”);

//方式3：加载手机本地的html页面 
webView.loadUrl(“content://com.android.htmlfileprovider/sdcard/test.html”);

// 方式4： 加载 HTML 页面的一小段内容 
WebView.loadData(String data, String mimeType, String encoding) 
// 参数说明： 
// 参数1：需要截取展示的内容 
// 内容里不能出现 ’#’, ‘%’, ‘\’ , ‘?’ 这四个字符，若出现了需用 %23, %25, %27, %3f 对应来替代，否则会出现异常 
// 参数2：展示内容的类型 
// 参数3：字节码

3.1.2 WebView的状态

//激活WebView为活跃状态，能正常执行网页的响应 
webView.onResume() ；

//当页面被失去焦点被切换到后台不可见状态，需要执行onPause