H5唤起原生应用

解决问题：当用户在手机浏览器中点击一个按钮时，如果手机上已经安装该应用，则直接打开，如果没有安装，则转向应用下载页面。

实现方式

H5实现

链接格式如下

1	"[scheme]://[host]/[path]?[query]"> 唤起应用

各个项目含义如下所示：

• scheme：唤起协议 ※详细后述
• host： 唤起指定host
  • path： 协议路径※没有也可以
  • query： 一些参数※没有也可以

终端未安装APP

终端如果已经安装我们的应用，这个时候可以直接唤起原生应用；终端如果没有安装我们的应用，这时我们需要引导用户去安装。

JavaScript实现源码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

"call-app" href="javascript:;" > Start or Download </a> ><br/> <input id="download-app" type="hidden" name="storeurl" value="http://jd.com/8JZ5OO"> <script> (function(){ var ua = navigator.userAgent.toLowerCase(); var t; var config = { /*scheme:必须*/ scheme_IOS: 'schemedemo://', scheme_Adr: 'schemedemo://ihongqiqu.com/test/scheme?name=google&page=1', download_url: document.getElementById('download-app').value, timeout: 600 }; function openclient() { var startTime = Date.now(); var ifr = document.createElement('iframe'); ifr.src = ua.indexOf('os') > 0 ? config.scheme_IOS : config.scheme_Adr; ifr.style.display = 'none'; document.body.appendChild(ifr); var t = setTimeout(function() { var endTime = Date.now(); if (!startTime || endTime - startTime < config.timeout + 200) { window.location = config.download_url; } else { } }, config.timeout); window.onblur = function() { clearTimeout(t); } } window.addEventListener("DOMContentLoaded", function(){ document.getElementById("call-app").addEventListener('click', openclient, false); }, false); })() script>

APP实现

AndroidManifest中添加配置

1 2 3 4 5 6 7 8

DATA标签中匹配原则如下：

• android:scheme : 唤起协议
• android:host : 唤起host，只有置顶的host才可被唤起
• android:pathPrefix : 唤起的路径，对路径进一步的过滤

Activity中接受唤起协议的数据：

1 2 3 4 5 6 7 8 9 10 11 12 13

Uri uri = getIntent().getData(); StringBuilder sb = new StringBuilder(); // 唤起链接 sb.append("string : ").append(getIntent().getDataString()).append("\n"); sb.append("scheme : ").append(uri.getScheme()).append("\n"); sb.append("host : ").append(uri.getHost()).append("\n"); sb.append("port : ").append(uri.getPort()).append("\n"); sb.append("path : ").append(uri.getPath()).append("\n"); // 接收唤起的参数 sb.append("name : ").append(uri.getQueryParameter("name")).append("\n"); sb.append("page : ").append(uri.getQueryParameter("page")); tv_data.setText(sb.toString());

测试资源

唤起源码
测试地址
正式地址

项目源码

https://github.com/jingle1267/AndroidSchemeDemo

本文地址 http://ihongqiqu.com/2015/12/03/html-call-native-app/ 作者为 Zhenguo