Android开发Web相关

适合混合开发的场景

• 业务经常变动，页面变化频繁
• 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之间进行通信的组件库，比较好用。如果有需要可以考虑集成或者模仿该库在自己项目中实现即可。