码迷,mamicode.com
首页 > 移动开发 > 详细

H5按钮唤起APP应用(IOS)或跳转至APPstore

时间:2019-06-18 00:32:38      阅读:452      评论:0      收藏:0      [点我收藏+]

标签:get   下载链接   comm   切换   appstore   key   app下载   DApp   自己   

昨天刚到公司收到了内部邮件,让调研是否可以由H5页面直接唤起APP。因为之前搞过这个东西,所以直接回复可以唤起,但是与前端联调时,遇到了种种的坎,所以今天特此记录一下,方便以后使用。
首先H5唤起APP,需要在H5和APP中进行不同的设置。

原理说明

首先需要说明,不管iOS还是Android,浏览器都不可能预知本地是否安装了某个APP的。或者更严谨地说,我们不能通过浏览器来预知本地是否安装。因为就算浏览器可以读取本地应用的安装列表,但是目前也没任何一家浏览器提供查询的API,所以这条路是走不通的。

本质上浏览器是通过URL scheme打开APP,一个APP可以设置一个或多个打开自己的URL scheme。比如,Twitter就注册自己能被「twitter://」打开。

在IOS中需要做的只有俩步:
1.设置 URL scheme 。(其实这个URL scheme是我们打开程序的入口,相当于网址http://后面的域名)。
2.将设置的URL scheme以及APP下载地址发送给前端H5,下面的操作就需要前端去操作啦。

注:因为iOS9以后和之前的iOS系统有区别。

以下是我们的前端代码,我特意来做一下记录。
大概原理是:判断是安卓还是苹果,如果为苹果显示苹果的标签,点击a标签,执行跳转唤起APP(openAPP),加一个定时器,三秒(可根据需求调整)之后,如果没有唤起成功,跳转到App Store下载页面。

  <body>
    <div id="btn">
<!--        <button onclick="submitFn()">打开app</button> -->
        <a href="安卓配置" class="a-btn"  style="display: none">安卓</a>
        <a href="苹果URL scheme://" class="i-btn" style="display: none">苹果</a>
    </div>
  </body>
<script src="http://m-cdn.saclub.com.cn/app/2.4/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
     var ua = navigator.userAgent.toLowerCase();
     var isWeixin = ua.indexOf(‘micromessenger‘) != -1;
     var isAndroid = ua.indexOf(‘android‘) != -1;
     var isIos = (ua.indexOf(‘iphone‘) != -1) || (ua.indexOf(‘ipad‘) != -1);
     var d = new Date();
     var t0 = d.getTime();
    $(function(){
//判断执行安卓按钮还是苹果按钮
         if(isAndroid){
             $(".a-btn").show();
          }else{
              $(".i-btn").show();
          }
    });
    //跳转下载
    $(".a-btn").click(function(){
//安卓
         openApp("安卓下载链接");
    });
    $(".i-btn").click(function(){
//苹果
         openApp("IOS App Store下载链接");
    });
    function openApp(src) {
    // 通过iframe的方式试图打开APP,如果能正常打开,会直接切换到APP,并自动阻止a标签的默认行为
    // 否则打开a标签的href链接
         var delay = setInterval(function(){
             var d = new Date();
             var t1 = d.getTime();
             if( t1-t0<3000 && t1-t0>2000){
                alert(‘请下载APP‘);
                 window.location.href =src;
             }
             if(t1-t0>=3000){
                  clearInterval(delay);
             }
        },2000);
    }
    

<a href="苹果URL scheme://" class="i-btn" style="display: none">苹果</a>
注:在IOS中设置URL scheme
前端跳转代码中需要在URL scheme后添加://,否则无法完成跳转。

附:(IOSAPP跳转其它APP)
//其实这个也需要的设置URL scheme ,也是通过这个入口进入。

在APP某个按钮的点击事件中添加以下代码,即可跳转至其它APP。

 //创建一个url,这个url就是APP的url,记得加上://
    NSURL *url = [NSURL URLWithString:@"URL scheme://"];
    
    //打开url
    [[UIApplication sharedApplication] openURL:url];

只是为了做个记录,方便以后使用,当然如果能给大家带来帮助,也非常荣幸。



作者:锦箫_1
链接:https://www.jianshu.com/p/e3d3939f5189
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

H5按钮唤起APP应用(IOS)或跳转至APPstore

标签:get   下载链接   comm   切换   appstore   key   app下载   DApp   自己   

原文地址:https://www.cnblogs.com/qingkun/p/11042921.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!