Android开发Web相关

2401_87204956

于 2024-09-18 19:08:05 发布

阅读量999

点赞数 22

文章标签： android 前端

本文链接：https://blog.csdn.net/2401_87204956/article/details/142341153

版权

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) {