Android开发Web相关

零、混合开发概念

混合开发是一种开发方式（模式），开发一个App时候，一部分功能用原生（native）构建，一部分功能用html5构建，这样用两种方式合作开发出来的App叫Hybrid App。

原生开发

原生开发是基于手机本地操作系统如IOS，Android，利用官方提供的开发语言、开发类库、开发工具进行App开发 。用这种方式开发出来的App，叫native app-本地app。

Native App业务逻辑代码在本地，操作系统能对Native App进行有效性能约束（比如内存不能占用太多、流量不能浪费太多）、权限控制、生命周期监管，这样有问题也可以找到负责APP。特点就是：渲染好，容易控制，代码效率高。不足就是具有平台的限制，并且需要一个专门的开发人员，需要维护一个团队，成本高。

H5的优势

H5是HTML(HyperText Markup Language)超文本标记语言第五个版本，我们平时看到的H5页面，它的源码就是按照H5协议书写的，用浏览器解析后就是我们看到的网页。

H5页面不仅仅文字、图片等信息，还包括这种文字、图片等的展示方式、比如布局、大小、背景等，所以H5页面优势就是更灵活、更方便的UI变化。

本篇文档我们来了解一下有关于混合开发的相关内容。混合开发涉及的内容主要有三个方面的内容，分别是：

• 如何加载H5页面
• Android如何调用H5中的方法
• H5如何调用Android中的方法

一、Native和H5交互的场景

在web开发时，通过浏览器可以将h5源码变成为我们看到h5页面（网页），那么原生中如果有一个类似于浏览器的类，我们就可以在原生中使用这个类来处理h5相关的事情。在Android中，可以使用WebView来加载html页面。WebView是一个专门用于来加载网页的视图控件，允许加载本地的资源网页文件，网络网页文件等多种形式，加载网页的api。

浏览器基本功能

一个浏览器应用或者工具，主要的作用就是：执行网络请求，解析网页源码，然后渲染成为可视化的页面。

以上是浏览器的最基本的功能，除此之外，在pc上的浏览器还会有收藏网址、记录常用网站、网页截图等等来满足不同用户各种需求。

前者称之为基本功能，后者称之为扩展功能。

WebView

Webview是Android系统提供的一个内置浏览器对象类，它早期采用WebKit内核，这个内核也是苹果浏览器safari的内核，后来用上了自己在此基础上研发的内核。正是通过这个Android内置的浏览器，Android便可以很方便的展示H5页面：

• loadUrl：加载某个网页
• loadData
• LoadDataWithBase

自定义WebView

既然WebView是基于WebKit的浏览器实现类，因此，如果有需要，开发者也可以自己实现自定义浏览器，来完成功能扩展。或者继承已经开发好的第三方的浏览器，都是可以的。

适合混合开发的场景

• 业务经常变动，页面变化频繁
• App中使用频率很低的页面，比如帮助页面，联系页面等
• 页面中使用到定位，传感器等功能，需要调起原生

二、WebView的使用

Webview作为系统已经实现的浏览器的组件，使用步骤比较简单：

• 对象初始化：实例化WebView，相当于打开浏览器
• 设置属性：WebView设置，相当于设置浏览器；
• 事件监听：添加WebView一些通知事件，比如加载页面开始、加载页面完毕的通知、H5中JS相关事件的一些通知；通常会使用两个：
  • WebViewClient：如果用户设置了WebViewClient，则在点击新的链接以后就不会跳转到系统浏览器了，而是在本WebView中显示。WebViewClient主要用来辅助WebView处理各种通知、请求等事件，通过 setWebViewClient 方法设置。
  • WebChromeClient：主要用来辅助WebView处理Javascript的对话框、网站图标、网站标题以及网页加载进度等。通过WebView的setWebChromeClient()方法设置。
• 添加交互方法：添加Android与H5交互的方法，包括Android调用H5中的方法，H5中调用Android的方法；
  • Android调用JS方法：在Android中调用网页中的方法。
  • 页面中JS调用Android原生：在H5页面中调用原生的方法。
• 加载网页：调用loadUrl加载一个网页。

三、WebViewClient设置

设置WebViewClient主要的作用是让webView处理网页加载，如果不设置，在加载网页时，会跳转使用系统浏览器。常用的方法有：

• shouldOverrideUrlLoading：加载网页时，对网页中超链接的拦截。该方法会在加载url之前进行加载。
• shouldInterceptRequest：加载一个网页的同时也会加载 js,css,图片等资源，所以会多次调用 shouldInterceptRequest 方法。
• onPageStarted：开始加载网页
• onPageFinished：网页加载结束
• onReceivedError：加载网页遇到错误
• onReceivedSslError：处理https请求和ssl证书

四、WebChromeClient设置

通过WebView的setWebChromeClient()方法设置WebChromeClient相关内容。

• onProgressChanged：页面加载进度变化回调
• onJsAlert：警告弹窗
• onJsConfirm：确认弹窗
• onJsPrompt：最为灵活，可以接收自定义的。

五、WebSettings配置

WebSettings是WegView的属性设置，包含很多可以设置的属性：

• setJavaScriptEnabled(true)：支持js，如果要使用js，必须设置才能用。
• 设置缓存方式：缓存有几种，常见的是：
  • LOAD_CACHE_ONLY：不使用网络，只读取本地缓存数据。
  • LOAD_DEFAULT：根据cache-control决定是否从网络上取数据。
  • LOAD_NO_CACHE：不使用缓存，只从网络获取数据。
• setDatabasePath(cacheDirPath)：设置缓存的路径
• setDefaultTextEncodingName：设置默认编码
• setUseWideViewPort：图片调整到适合webview的大小
• setSupportZoom：支持缩放，一般为false
• setLayoutAlgorithm：支持内容重新布局
• supportMultipleWindows：设置支持多窗口
• setLoadWithOverviewMode：设置自动加载图片
• 。。。还有很多

六、原生调用JS

Android调用JS代码的方法有2种，分别是：

• loadUrl：WebView提供的最常用的方法，需要放在另外一个线程中，并且要在页面加载结束以后才能调用。

mWebView.loadUrl("javascript:jsMethod()")

• evaluateJavascript：WebView的另外一个方法，该方法比第一种方法效率更高、使用更简洁。该方法只能在4.4以上才能用。

mWebView.evaluateJavascript("javascript:jsMethod()",new ValueCallback<String>(){})

七、页面JS调用原生

想比起原生调用JS，JS调用原生要多一个步骤，需要进行对象注入：

• 对象注入
• 编写原生方法，使用注解进行标注
• JS使用注入对象

JS对象注入

mSettings.setJavaScriptEnabled(true);
mWebView.addJavascriptInterface(new JSInterface (),"Object");

编写Javascript接口类

public class WebH5Test {
​
    private Context context;
​
    public WebH5Test(Context context) {
        this.context = context;
    }
​
    @JavascriptInterface
    public void message(String s) {
        Toast.makeText(context, s, Toast.LENGTH_SHORT).show();
    }
}

JS调用原生

JS中调用原生代码：

<input type="button" value="调用原生" onclick="window.Object.message('JS中传来的参数')"/>

此处的Object与第一步中的Object名字需保持一致，message需与第二步中的编写的方法一致。

八、开源的JsBridge

JsBridge是一个开源的主要用于在原生和H5之间进行通信的组件库，比较好用。如果有需要可以考虑集成或者模仿该库在自己项目中实现即可。