H5唤起原生应用

文章目录

1. 1. 实现方式
   1. 1.1. H5实现
      1. 1.1.1. 链接格式如下
      2. 1.1.2. 各个项目含义如下所示：
      3. 1.1.3. 终端未安装APP
      4. 1.1.4. JavaScript实现源码
   2. 1.2. APP实现
      1. 1.2.1. AndroidManifest中添加配置
      2. 1.2.2. DATA标签中匹配原则如下：
      3. 1.2.3. Activity中接受唤起协议的数据：
   3. 1.3. 测试资源
   4. 1.4. 项目源码

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

实现方式

H5实现

链接格式如下

<a href="[scheme]://[host]/[path]?[query]"> 唤起应用 </a>

各个项目含义如下所示：

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

终端未安装APP

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

JavaScript实现源码

<a id="call-app" href="javascript:;" > Start or Download </a><br/><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中添加配置

<activity android:name=".SchemeActivity">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.BROWSABLE" />
        <category android:name="android.intent.category.DEFAULT" />
        <data android:scheme="schemedemo" />
    </intent-filter>
</activity>

DATA标签中匹配原则如下：

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

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

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://94275.cn/2015/12/03/html-call-native-app/ 作者为 Zhenguo