Android与H5交互（混合开发）

风逝

一、H5网页中调用Android java代码（它们调咱）
1需要在webview控件中添加java script Interface注解
2在Activity中定义一个要被js调用的方法、src为js传递过来的参数
3在网页中、只需要像调用js方法一样、进行调用就可以
二、ANDROID中JAVA代码调用网页的JS代码的方法（咱调它们）
1无参数调用 咱的WebView控件.loadUrl("javascript:java java call js ()");
2传递参数调用就是加一个with  args ；java call  js  with  args （里面是参数）
三、JAVA和JS交互注意事项
1、Java 调用 js 里面的函数、效率并不是很高、估计要200ms左右吧、做交互性很强的事情、这种速度很难让人接受、而js去调Java的方法 、速度很快、50ms左右、所以尽量用js调用Java方法
2、Java 调用 js 的函数、没有返回值、调用了就控制不到了
3、Js 调用 Java 的方法、返回值如果是字符串、你会发现这个字符串是 native 的、转成 locale才能正常使用、使用 to Locale String() 函数就可以了、不过这个函数的速度并不快、转化的字符串如果很多、将会很耗费时间
4、网页中尽量不要使用jQuery、执行起来需要5-6秒、最好使用原生的js写业务脚本、以提升加载速度、改善用户体验

四、Js桥WebViewJavascriptBridge框架
     对于安卓开发有一段时间的人都知道， 4.4以前谷歌的webview存在安全漏洞，网站可以通过js注入就可以随便拿到客户端的重要信息，甚至轻而易举的调用本地代码进行流氓行为，谷歌后来发现有此漏洞后，增加了防御措施，如果要是js调用本地代码，开发者必须在代码申明JavascriptInterface，   
        但是即使这样，我们很多时候需要在js记载本地代码的时候，要做一些判断和限制，或者有可能也会做些过滤和对用户友好提示，因此JavascriptInterface也就无法满足我们的需求了，特此有大神就写出了WebView Javascript Bridge框架


通过实例化webView,用法和安卓原生的view没多大区别，设置WebChromClient, 设置加载的html（同样支持网络和本地文件） ，接着我们需要给web注册和html端约定好的js方法名；玩过NDK的JNI调用的朋友也知道必须和c代码之间有个约定，其实js桥和jni有点类似，通过注册handler来实现回调，Java代码中通过js返回的数据，进行处理后在调用function.onCallback返回给js.
拦截URL
在WebView加载 http://m.sogou.com 时，会加载一个logo图片， 我们的需求就是将这个logo图片换成另一张图片。从API 11(Android 3.0)开始， should Inter cept Request被引入就是为了解决这一类的问题。
Should Inter cept Request这个回调可以通知主程序WebView处理的资源（css,js,image等）请求，并允许主程序进行处理后 返回数据。如果主程序返回的数据为null，WebView会自行请求网络加载资源，否则使用主程序提供的数据。注意这个回 调发生在非UI线程中,所以进行UI系统相关的操作是不可以的。
Should Intercept Request有两种重载。
public WebResourceResponse shouldInterceptRequest (WebView view, String url)  API 21弃用，第二个参数改为
WebResourceRequest  request
其中WebResourceResponse需要设定三个属性，MIME类型，数据编码，数据(Input Stream流形式)。

五、遇到的问题
1.加快 加快HTML网页装载完成的速度 网页装载完成的速度
默认情况html代码下载到WebView后，webkit开始解析网页各个节点，发现有外部样式文件或者外部脚本文件时，会异步发起网络请求下 载文件，但如果在这之前也有解析到image节点，那势必也会发起网络请求下载相应的图片。在网络情况较差的情况下，过多的网络请求 就会造成带宽紧张，影响到css或js文件加载完成的时间，造成页面空白loading过久。解决的方法就是告诉WebView先不要自动加载图片 ，等页面finish后再发起图片加载。
可以看出我们对系统API在19以上的版本作了兼容。因为4.4以上系统在onPageFinished时再恢复图片加载时,如果存在多 张图片引用的是相同的src时，会只有一个image标签得到加载，因而对于这样的系统我们就先直接加载。
2.自定义出错界面 自定义出错界面
当WebView加载页面出错时（一般为404 NOT FOUND），安卓WebView会默认显示一个卖萌的出错界面。但我们怎么能让用户发现原来 我使用的是网页应用呢，我们期望的是用户在网页上得到是如原生般应用的体验，那就先要从干掉这个默认出错页面开始。当WebView加 载出错时，我们会在WebViewClient实例中的onReceivedError()方法接收到错误，我们就在这里做些手脚，我们先使用loadDataWithBaseURL清除掉默认错误页内容，再让我们自定义的View得到显示（mErrorFrame为蒙在WebView之上的一个LinearLayout布局，默认为View.GONE）。

yangxf0120

谢谢分享Android与H5交互（混合开发）

lfc

6666666

zoudzy

leiyijie

zhulin

rrorFrame为蒙在WebView之上的一个LinearLayout布局，默认为View.GONE）。

cdpi5