Android与H5交互
2016-10-10 17:23
260 查看
随着h5功能的完善、强大。很多app都会通过webview来调用h5的页面，个人开发的流程为以下几点：
1.android的webview准备工作
//加载url
wv_basewebview_content.loadUrl("http://m.chinamatop.com/news/index");
//监听webview
wv_basewebview_content.setWebViewClient(new MyWebViewClient());
WebSettings websettings = wv_basewebview_content.getSettings();
//可以使用JavaScript
websettings.setJavaScriptEnabled(true);
//提高渲染的优先级
websettings.setRenderPriority(WebSettings.RenderPriority.HIGH);
// 开启H5(APPCache)缓存功能
websettings.setAppCacheEnabled(true);
// 开启 DOM storage 功能
websettings.setDomStorageEnabled(true);
// 应用可以有数据库
websettings.setDatabaseEnabled(true);
// 可以读取文件缓存(manifest生效)
websettings.setAllowFileAccess(true);
//加载缓存形式
if (CommonUtils.getNetWorkStatus(BaseWebviewActivity.this)){
// 根据cache-control决定是否从网络上取数据。
websettings.setCacheMode(WebSettings.LOAD_DEFAULT);
}else{
// 只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据。
websettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
}
2. 把本类的一个实例添加到js的全局对象window中,这样就可以使用binggou来调用它的方法
MyJavaScript类
3.让前端工程师通过“binggou”调用MyJavaScript里他想调用的方法即可
4.如果android想要调用JavaScript里的方法则：
1).让前端工程师写好JavaScript方法
2).在MyWebViewClient类里的onPageFinished方法里调用wv_mainactivity_content.loadUrl(String.format("javascript:content2()"));//这里是java端调用webview的JS。如：
上述方法中实现了android和JavaScript互相调用，写的不是很完善，以后继续跟进
1.android的webview准备工作
<span style="white-space:pre"> //webview硬件加速 wv_basewebview_content.setLayerType(WebView.LAYER_TYPE_HARDWARE,null); </span><pre name="code" class="java"><span> </span> <span> //webview软件加速 // wv_basewebview_content.setLayerType(WebView.LAYER_TYPE_SOFTWARE,null); </span><span> //webview默认 // </span><span> wv_basewebview_content.setLayerType(WebView.LAYER_TYPE_NONE,null); </span>
//加载url
wv_basewebview_content.loadUrl("http://m.chinamatop.com/news/index");
//监听webview
wv_basewebview_content.setWebViewClient(new MyWebViewClient());
WebSettings websettings = wv_basewebview_content.getSettings();
//可以使用JavaScript
websettings.setJavaScriptEnabled(true);
//提高渲染的优先级
websettings.setRenderPriority(WebSettings.RenderPriority.HIGH);
// 开启H5(APPCache)缓存功能
websettings.setAppCacheEnabled(true);
// 开启 DOM storage 功能
websettings.setDomStorageEnabled(true);
// 应用可以有数据库
websettings.setDatabaseEnabled(true);
// 可以读取文件缓存(manifest生效)
websettings.setAllowFileAccess(true);
//加载缓存形式
if (CommonUtils.getNetWorkStatus(BaseWebviewActivity.this)){
// 根据cache-control决定是否从网络上取数据。
websettings.setCacheMode(WebSettings.LOAD_DEFAULT);
}else{
// 只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据。
websettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
}
2. 把本类的一个实例添加到js的全局对象window中,这样就可以使用binggou来调用它的方法
wv_basewebview_content.addJavascriptInterface(new MyJavaScript(),"binggou");
MyJavaScript类
<pre name="code" class="java">public class MyJavaScript {
String content;
public String getContent() {
return content;
}
/*interface for javascript to invokes*/
public interface wvClientClickListener {
public void wvHasClickEnvent();
}
private wvClientClickListener wvEnventPro = null;
public void setWvClientClickListener(wvClientClickListener listener) {
wvEnventPro = listener;
}
@JavascriptInterface //这个注解很重要
public void javaFunction() {
if (wvEnventPro != null)
wvEnventPro.wvHasClickEnvent();
}
@JavascriptInterface //这个注解很重要
public void get1show(String s) {
Log.e("Tag ",s);
this.content=s;
}
}3.让前端工程师通过“binggou”调用MyJavaScript里他想调用的方法即可
4.如果android想要调用JavaScript里的方法则：
1).让前端工程师写好JavaScript方法
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>中钢大厦</title>
<meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="applicable-device" content="mobile">
<meta name="format-detection" content="telephone=no">
<link type="text/css" href="/tmp/h5/css/style.css" rel="stylesheet"/>
</head>
<body>
<input type="hidden" name="_shareTitle_cus" id="_shareTitle_custmer" value="房产转让：天津市开发区洞庭路74号中钢大厦"/>
<input type="hidden" name="_shareDesc_cus" id="_shareDesc_custmer" value="房产位于天津市开发区洞庭路，交通便利配套齐全，696.11平米（含车库）"/>
<input type="hidden" name="_shareImgUrl_cus" id="_shareImgUrl_custmer" value="http://www.binggou.com/tmp/h5/img/map.png"/>
<script>
var shareTitle_custmer = document.getElementById("_shareTitle_custmer");
var a = shareTitle_custmer.value;
alert(a)
var shareDesc_custmer = document.getElementById("_shareDesc_custmer");
var b = shareDesc_custmer.value;
var shareImgUrl_custmer = document.getElementById("_shareImgUrl_custmer");
var c = shareImgUrl_custmer.value;
<span style="color:#ff6666;">function content2() {
binggou.setcontent2(b);
}
function content3() {
binggou.setcontent3(c);
}</span>
</script>
<article class="content">
<h2><img src="/tmp/h5/img/info_01.png" alt="房产信息"></h2>
<div class="map"><img src="/tmp/h5/img/map.png" alt=""></div>
<section class="layer">
<div class="floor"><h3>中钢大厦3号楼</h3><p>701-801（复式）、802室、803室、804室</p><p>10号车库、11号车库</p></div>
<ul class="build change">
<li><span class="hei">建筑面<br/>积合集</span><span>696.11平米（含车库）</span></li>
<li><span>土地性质</span><span>国有土地</span></li>
<li><span class="hei">土地地类<br/>（用途）</span><span>商业用地</span></li>
<li><span>使用权类型</span><span>出让</span></li>
<li><span>土地使用权</span><span>终止日2041年12月28日</span></li>
<li><span>所有人</span><span>神华准格尔能源有限责任公司</span></li>
<li><span class="hei">房地产权<br/>证号</span><span>津字第104020751771号</span></li>
</ul>
<ul class="build built">
<li><span>701-801</span><span>办公、建筑面积218.90m<sup>2</sup></span></li>
<li><span>802</span><span>办公、建筑面积130.75m<sup>2</sup></span></li>
<li><span>803</span><span>办公、建筑面积130.75m<sup>2</sup></span></li>
<li><span>804</span><span>办公、建筑面积108.69m<sup>2</sup></span></li>
<li><span>10号车库</span><span>建筑面积69.25m<sup>2</sup></span></li>
<li><span>11号车库</span><span>建筑面积37.77m<sup>2</sup></span></li>
<li><span>项目截止</span><span>2016年10月09日</span></li>
</ul>
</section>
<h2 class="envbe"><img src="/tmp/h5/img/info_02.png" alt="周边环境"></h2>
<section class="envir">
<h3>本房产位于天津市开发区洞庭路74号中钢大厦</h3>
<div class="descrip">
<p>交通极为便利、紧邻天津地铁1号线南楼站B出口，附件商业配套完善，距离最近的阳光新生活广场仅一路之隔。</p>
<p>上海银行、天津银行、中国银行等8家银行均位于大厦300米范围内附近有天津四十二中、天津市第四中学、上海道小学、天津师范大学、第二附属中学。</p>
<p>区位条件优越、生活配套完善。</p>
</div>
<ul class="imdes">
<li><img src="/tmp/h5/img/sub_01.jpg" alt=""><p>天津地铁1号线南楼站B口</p></li>
<li><img src="/tmp/h5/img/sub_02.jpg" alt=""><p>阳光新生活广场</p></li>
<li><img src="/tmp/h5/img/sub_03.jpg" alt=""><p>西苑公园</p></li>
<li><img src="/tmp/h5/img/sub_04.jpg" alt=""><p>天津市第四中学</p></li>
<li><img src="/tmp/h5/img/sub_05.jpg" alt=""><p>天津市第四十二中学</p></li>
</ul>
</section>
</article>
<script>
var commany_type = document.getElementById("commany_type");
var commany_prices = document.getElementById("commany_prices");
var commany_publish = document.getElementById("commany_publish");
commany_type.style.height="0.4rem";
commany_type.style.marginTop="0.26rem";
commany_type.style.height="0.4rem";
commany_prices.style.height="0.4rem";
commany_prices.style.marginTop="0.24rem";
commany_publish.style.height="0.4rem";
commany_publish.style.marginTop="0.26rem";
</script>
</body>
</html>2).在MyWebViewClient类里的onPageFinished方法里调用wv_mainactivity_content.loadUrl(String.format("javascript:content2()"));//这里是java端调用webview的JS。如：
public class MyWebViewClient extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
@Override
public void onPageFinished(WebView view, String url) {
// TODO Auto-generated method stub
super.onPageFinished(view, url);
wv_mainactivity_content.loadUrl(String.format("javascript:content1()"));//这里是java端调用webview的JS
wv_mainactivity_content.loadUrl(String.format("javascript:content2()"));//这里是java端调用webview的JS
wv_mainactivity_content.loadUrl(String.format("javascript:content3()"));//这里是java端调用webview的JS
}
}上述方法中实现了android和JavaScript互相调用，写的不是很完善，以后继续跟进
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- H5与Android之间的交互
- Android与H5交互（java与js的交互）
- Android与H5交互
- [置顶] Android与H5的交互
- Android和H5之间的交互
- Android与H5的交互
- h5页面与Android原生页面交互
- Android与H5交互（混合开发）
- android 的webView加载h5，和h5的交互（java和JavaScript的交互）
- Android和H5（JS）简单交互
- H5和Android交互
- DCloud H5与Android Native的交互--5+ SDK插件开发
- android webview设置以及与h5交互
- Android与H5交互
- android webview H5开发若干问题之问题三:android和js交互问题
- android 与H5交互之使用GPS定位
- Android与H5的交互问题
- Native和html5的交互（一）h5传数据or触发一个Android的事件
- Android与H5数据交互
- Android h5 交互