H5调取APP或跳转至下载

Wesley13
• 阅读 865

来源:

  最近在配合移动端做几个详情页h5分享页面,需要调取App并跳转至app详情页, 如果没有安装App,需要判断引导至下载页面。

参考文档:

https://juejin.im/post/5b7efb2ee51d45388b6af96c

URL Scheme —— 唤端媒介

[scheme]://[host]/[path]?[query]

我们拿 https://www.baidu.com 来举例,scheme 自然就是 https 了,后面拼接的是传递的参数。URL Schemes 没有特别严格的规范,所以后面参数的具体定义是app开发者去自定义。

就像给服务器资源分配一个 URL,以便我们去访问它一样,我们同样也可以给手机APP分配一个特殊格式的 URL,用来访问这个APP或者这个APP中的某个功能(来实现通信)。APP得有一个标识,好让我们可以定位到它,它就是 URL 的 Scheme 部分。

但是,两者还有几个重要的区别:

  • 所有网页都一定有网址,不管是首页还是子页。但未必所有的应用都有自己的 URL Schemes,更不是每个应用的每个功能都有相应的 URL Schemes。几乎没有所有功能都有对应 URL 的应用。一个 App 是否支持 URL Schemes 要看那个 App 的作者是否在自己的作品里添加了 URL Schemes 相关的代码。

  • 一个网址只对应一个网页,但并非每个 URL Schemes 都只对应一款应用。这点是因为苹果没有对 URL Schemes 有不允许重复的硬性要求,所以曾经出现过有 App 使用支付宝的 URL Schemes 拦截支付帐号和密码的事件。

  • 一般网页的 URL 比较好预测,而URL Scheme 因为没有统一标准,所以非常难猜,通过猜来获取 应用的 URL Schemes 是不现实的。

主要注意点:

  1、和原生移动端协商好调取app的Url schema和参数:investnote://chengan:8888/main?note_id=991&open_type=1

  2、判断是否是微信,因为微信不能直接调取app,需要引导用户用浏览器打开,andriod有默认的引导页可以隐藏,ios需要自己设计

  3、大体上判断安卓和ios两种设备,再做不同处理

  4、iOS版本在9以上会默认弹出一个打开APP的弹出框,通过延时来打开app的方法就不适用了

<script lang="javascript">

    var createIframe=(function(){
        var iframe;
        return function(){
            if(iframe){
                return iframe;
            }else{
                iframe = document.createElement('iframe');
                iframe.style.display = 'none';
                document.body.appendChild(iframe);
                return iframe;
            }
        }
    })()

     /*判断是否是ios9以上*/
     function isIOS9() {
        //获取固件版本
        var getOsv = function () {
            var reg = /OS ((\d+_?){2,3})\s/;
            if (navigator.userAgent.match(/iPad/i) || navigator.platform.match(/iPad/i) || navigator.userAgent.match(/iP(hone|od)/i) || navigator.platform.match(/iP(hone|od)/i)) {
                var osv = reg.exec(navigator.userAgent);
                if (osv.length > 0) {
                    return osv[0].replace('OS', '').replace('os', '').replace(/\s+/g, '').replace(/_/g, '.');
                }
            }
            return '';
        };
        var osv = getOsv();
        var osvArr = osv.split('.');
        //初始化显示ios9引导
        if (osvArr && osvArr.length > 0) {
            if (parseInt(osvArr[0]) >= 9) {
                return true
            }
        }
        return false
    }

    //判断是否是微信
    function isWeiXin(){
        var ua = window.navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i) == 'micromessenger'){
            return true;
        }else{
            return false;
        }
    }

    function checkIsweixin(){
      var mask = document.getElementById('mask')
      var openBtn = document.getElementById('openBtn')
      if(isWeiXin()){
        mask.setAttribute('style','display:block');
        openBtn.setAttribute('style','display:block');
        return false
      }
      mask.addEventListener('click', function(){
        this.setAttribute('style','display:none');
        openBtn.setAttribute('style','display:none');
      })
      openBtn.addEventListener('click', function(){
        mask.setAttribute('style','display:none');
        this.setAttribute('style','display:none');
      })
      openApp();
    }

    function openApp(){
          var localUrl="investnote://chengan:8888/main?note_id=991&open_type=1";
          var openIframe=createIframe();
          var u = navigator.userAgent;
          var isIos = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
          var isAndroid= u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
          var isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1;
          if(isIos){
              if(isIOS9()){
                  //判断是否为ios9以上的版本,跟其他判断一样navigator.userAgent判断,ios会有带版本号
                  /* localUrl=createScheme({type:1,id:"sdsdewe2122"},true);//代码还可以优化一下*/
                  window.location.href = localUrl;
                  return;
              }
              //判断是否是ios,具体的判断函数自行百度
              window.location.href = localUrl;
              var loadDateTime = Date.now();
              setTimeout(function () {
                  var timeOutDateTime = Date.now();
                  if (timeOutDateTime - loadDateTime < 1000) {
                      window.location.href = "https://itunes.apple.com/cn/app/%E6%8A%95%E8%B5%84%E4%BA%91/id1376471541?mt=8";
                  }
              }, 25);
          }else if(isAndroid){
              //判断是否是android,具体的判断函数自行百度
              if (isChrome) {
                  //chrome浏览器用iframe打不开得直接去打开,算一个坑
                  window.location.href = localUrl;
              } else {
                  //抛出你的scheme
                  openIframe.src = localUrl;
              }
              var loadDateTime = Date.now();
              setTimeout(function () {
                  var timeOutDateTime = Date.now();
                  if (timeOutDateTime - loadDateTime < 1000) {
                      window.location.href = "http://chengantech.com/download/";
                  }
              }, 25);
          }else{
              //主要是给winphone的用户准备的,实际都没测过,现在winphone不好找啊
              openIframe.src = localUrl;
              setTimeout(function () {
                  window.location.href = "http://chengantech.com/download/";
              }, 500);
          }
        }

        var appBtn = document.getElementById('appBtn')
        appBtn.addEventListener('click', checkIsweixin )

  </script>

页面大致布局如下:

1 <div class="note-fixfoot">
2      <a class="note-share-button" id="appBtn">用APP打开</a>
3 </div>
4 <div id="mask"></div>
5 <div id="openBtn"></div>

加入简单的样式:

.note-fixfoot{
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 60px;
      background: url('./share_wechat@3x.png') no-repeat center;
      background-size: 100% 100%;
    }
    .note-fixfoot .note-share-button{
      border-radius:4px;
      display: block;
      width: 100px;
      height: 34px;
      position: absolute;
      right: 20px;
      top: 14px;
      background:rgba(94,105,199,1);
      color: #ffffff;
      text-align: center;
      line-height: 34px;
      text-decoration: initial;
      font-weight: normal;
      font-size: 14px;
    }
    html,body{
      overflow: hidden;
    }
    #mask{
      height:100%;
      width:100%;
      position:fixed;
      top:0;
      z-index:9;
      opacity:0.8; 
      filter: alpha(opacity=80);
      background-color:#000;
      display: none;
    }
    #openBtn{
      width: 90%;
      height: 30.5%;
      color: #ffffff;
      left: 5%;
      top: 0;
      font-size: 14px;
      position: absolute;
      margin-top: -15px;
      cursor: pointer;
      background: url('./android.png') no-repeat center;
      background-size: contain; 
      border-radius: 5px;
      text-align: center;
      z-index: 10;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      overflow: hidden;
      background-color: #ffffff;
      display: none;
    }
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
Java获得今日零时零分零秒的时间(Date型)
publicDatezeroTime()throwsParseException{    DatetimenewDate();    SimpleDateFormatsimpnewSimpleDateFormat("yyyyMMdd00:00:00");    SimpleDateFormatsimp2newS
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这