Android与H5交互

最新推荐文章于 2024-05-15 09:28:30 发布

滕玉坤

最新推荐文章于 2024-05-15 09:28:30 发布

阅读量1.4k

点赞数

分类专栏： android随笔记 android工作心得文章标签： webview android与h5交互 JavaScript

本文链接：https://blog.csdn.net/tyk9999tyk/article/details/52779261

版权

android随笔记同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

android工作心得

18 篇文章 0 订阅

订阅专栏

随着h5功能的完善、强大。很多app都会通过webview来调用h5的页面，个人开发的流程为以下几点：

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>XXXXXX</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="房产转让：XXXXXXX大厦"/> 
<input type="hidden" name="_shareDesc_cus" id="_shareDesc_custmer" value="房产位于XXXXXXXX，交通便利配套齐全，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>XXXXX3号楼</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>XXXXXXX公司</span></li>
            <li><span class="hei">房地产权<br/>证号</span><span>津字第XXXXXXXXX号</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>本房产位于XXXXXXXXXXXX厦</h3>
        <div class="descrip">
        	<p>交通极为便利、紧邻天津地铁X号线XXXX站B出口，附件商业配套完善，距离最近的XXXXXX广场仅一路之隔。</p>
            <p>XXX银行、XXX银行、XXX银行等8家银行均位于大厦300米范围内附近有XXXXXX中、XX市第XXX中学、XXXX小学、XXX大学、第二附属中学。</p>
            <p>区位条件优越、生活配套完善。</p>
        </div>
    	<ul class="imdes">
        	<li><img src="/tmp/h5/img/sub_01.jpg" alt=""><p>XXX地铁X号线XX站B口</p></li>
            <li><img src="/tmp/h5/img/sub_02.jpg" alt=""><p>XXXX广场</p></li>
            <li><img src="/tmp/h5/img/sub_03.jpg" alt=""><p>XXX公园</p></li>
            <li><img src="/tmp/h5/img/sub_04.jpg" alt=""><p>XX市第X中学</p></li>
            <li><img src="/tmp/h5/img/sub_05.jpg" alt=""><p>XX市第XXX中学</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互相调用，写的不是很完善，以后继续跟进