Android开发Web相关

怼烎@ 2023-10-06 14:58 7阅读 0赞

#### **零、混合开发概念** ####

混合开发是一种开发方式（模式），开发一个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中调用原生代码：

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

#### **八、开源的JsBridge** ####

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