Html5启动android app及两者间的数据交互全面总结

       由于公司需要，作为一个安卓程序猿的我最近开始做H5，做的H5页面主要用于被用户分享出去，那么就涉及两个很头痛的问题。app如何与H5进行数据交互？装了我们app的用户如何通过H5页面打开app呢？

       国内外网站查了好多资料，但并没有一篇完整blog去描述清楚这两个问题，在综合了众多信息之后终于把问题搞定了，现在就来分享一下这个两个问题的完整解答。

      情景描述：app分享影片详情页url，url自带影片id。点击此url的用户即可打开影片详情的H5页面，在H5页面上有“打开app查看影片”按钮，点击此按钮携带影片id等数据打开app并跳转到app相应id的影片详情页。分享的url：http://bj.sofamovie.cn:8087/epg/webapp/index.html?pid=789

           

                               图1      H5页面                                           图2     app页面

下面开始正题：

1.打开H5页面，获取url并解析出参数

function GetQueryString(name)
{
     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     if(r!=null)return  unescape(r[2]); return null;
}
var pid = GetQueryString("pid");

 GetQueryString（）方法用来获取H5的url并解析出参数"pid"

2.通过H5打开app，首先在app的manifest文件中你想打开的那个activity中添加代码：

 	<activity android:name="com.hello.world.Activity"android:label="@string/app_name"android:screenOrientation="portrait 
             <data android:scheme="myshafa" android:host="com.dluxtv.shafamoviedx"/>
             <action  android:name="android.intent.action.VIEW" />
             <category android:name="android.intent.category.DEFAULT" />
             <category android:name="android.intent.category.BROWSABLE" /> 
        </activity>

其中scheme与host是你自己定义的，只要与H5中对应即可。

接下来是如何在H5中要点击的链接处配置如下：

<a
href="javascript:startApp('myshafa://com.dluxtv.shafamoviedx:75235://','http://www.sofamovie.cn/html/mobile/Mandroid0721.html')"></a>

其中startApp是js中打开app的方法，第一个参数url='myshafa://com.dluxtv.shafamoviedx的格式即为：
scheme://host ;如果需要携带参数需在后面加‘  :75235(任意数字)://’。

第二个参数url2='http://www.sofamovie.cn/html/mobile/Mandroid0721.html'是没有安装app的用户跳转的链接

接下来是如何在js中打开app并携带参数：

	function startApp(url,url2) {
	var timeout, t = 1000, hasApp = true;
	setTimeout(function () {
		if (hasApp) {
			//alert('安装了app');
		} else {
			location.replace(url2);
		}
		document.body.removeChild(ifr);
	}, 2000)

	var t1 = Date.now();
	var ifr = document.createElement("iframe");
	ifr.setAttribute('src', url+sofapid);
	ifr.setAttribute('style', 'display:none');
	document.body.appendChild(ifr);
	timeout = setTimeout(function () {
		 var t2 = Date.now();
		 if (!t1 || t2 - t1 < t + 100) {
			 hasApp = false;
		 }
	}, t);

        这段js代码含义：进入startapp方法后即启动定时方法，若2s内，执行了动态添加iframe标签，则会直接打开app。若2s内hasApp变为了false，则说明没有iframe标签里的地址不能打开(即没有安装app)，此时就会执行location.replace(url2)方法跳转到url2(下载app的页面)。其中sofapid就是url携带的参数。

3.在你的app中接收H5传来的数据，用的就是getIntent()方法

	if(getIntent()!=null){
		if(getIntent().getData()!=null){
			Intent sintent = new Intent(this,
					SecondMainActivity.class);
			List<String> pathSegments = getIntent().getData().getPathSegments();
			sofapid =  pathSegments.get(0);
			sintent.putExtra("pid", sofapid);
			startActivity(sintent);
				}
			}

        在app里配置过host的那个activity中获取H5传来的参数，通过判断getIntent()等是否为空，不为空即可取值sofapid = pathSegments.get(0),如果需要跳转其他Activity即可携带参数startIntent()。
   

       到此，如何通过H5打开app并携带参数就已经完全总结完了，以上方法已经过个人实际操作确保可用性，希望对大家有帮助。