系统在浏览器即将访问到有些域名前就把那一个域名对应的APP打开,一、须要看清客户端的平台以及是不是在微信浏览器中访问

悠久没有写博客了,近年来有个H5运行APP原生页面的须要,中间遇上部分坑,看了些网上的兑现方案,特意来计算下

悠长没有写博客了,近来有个H5运转APP原生页面的急需,中间遇上一些坑,看了些网上的完毕方案,特意来计算下

一、需求判定客户端的阳台以及是或不是在微信浏览器中走访

一、须求看清客户端的阳台以及是或不是在微信浏览器中走访

一,客户端判断

壹,客户端判断

在开行APP时,Android和IOS系统处理的方法是不一致等的,Android那边由于开放,可以在浏览器中通过<a>标签以及meta标签的办法,让浏览器app获取手机打开应用的权限进而运转APP。

在起步APP时,Android和IOS系统处理的格局是不均等的,Android那边由于开放,能够在浏览器中通过<a>标签以及meta标签的法子,让浏览器app获取手机打开应用的权能进而运营APP。

而在IOS那边,IOS9今后的种类,则足以在APP开发进度中进入配置和逻辑代码编写,系统在浏览器即将访问到有个别域名前就把那些域名对应的APP打开,这几个有些闪,封闭依旧有查封的益处。

而在IOS那边,IOS9过后的体系,则足以在APP开发进程中参加配置和逻辑代码编写,系统在浏览器即将访问到有个别域名前就把这些域名对应的APP打开,那些略带闪,封闭照旧有查封的补益。

从而首先要在客户端判断,是Android系统可能IOS系统,判断代码如下

为此首先要在客户端判断,是Android系统或然IOS系统,判断代码如下

function isInIos(){
    var userAgentInfo = navigator.userAgent ,
        Agents = ["iPhone" , "iPad", "iPod"];
    for(var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          return true;
        }
    }
    return false;
}        
function isInIos(){
    var userAgentInfo = navigator.userAgent ,
        Agents = ["iPhone" , "iPad", "iPod"];
    for(var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          return true;
        }
    }
    return false;
}        

二,是或不是在微信内置浏览器中

贰,是否在微信内置浏览器中

任由在哪些平台的客户端Android/IOS,在微信的阳台上访问都有2个标题,这就是无能为力运维客户端,那是微信为了安全性考虑的范围,android那边屏蔽schema协议,除非集团是微信的小伙伴加入了白名单才能

不论是在哪些平台的客户端Android/IOS,在微信的平台上访问都有二个题材,那就是心有余而力不足运行客户端,那是微信为了安全性考虑的界定,android那边屏蔽schema协议,除非公司是微信的同伴参预了白名单才能

动用,IOS系统可以去访问app对应appstore的下载页,不过微信日常屏蔽appstore的那个网址,进而访问不到。比较便于的做法就是在微信浏览器中,无论是IOS依旧android都去应用宝的下载(IOS
那边最终会到

采纳,IOS系统可以去访问app对应appstore的下载页,可是微信常常屏蔽appstore的那几个网址,进而访问不到。比较便宜的做法就是在微信浏览器中,无论是IOS如故android都去应用宝的下载(IOS
那边最后会到

appstore中)页面打开。我那边的须求是提示用户点击“…”用暗中同意浏览器打开。

appstore中)页面打开。作者那边的须求是提醒用户点击“…”用暗许浏览器打开。

判定是不是是在微信中,代码如下:

判断是或不是是在微信中,代码如下:

function isInWx(){
    var agent = window.navigator.userAgent.toLowerCase();
    return agent.match(/MicroMessenger/i) == 'micromessenger';
}
function isInWx(){
    var agent = window.navigator.userAgent.toLowerCase();
    return agent.match(/MicroMessenger/i) == 'micromessenger';
}

 

 

 

 

二、原理

二、原理

首先无论是andorid仍然IOS端,在浏览器中经过JS都是力不从心断定该手机是或不是具有某APP的,即便那一个浏览器有权力读取手机使用列表,也未尝贰个固定的对外API让大家进行查询。而H5运维APP本质上是经过

第2无论是andorid依旧IOS端,在浏览器中通过JS都是力不从心看清该手机是还是不是富有某APP的,固然那些浏览器有权力读取手机应用列表,也远非三个恒定的对外API让大家进行查询。而H5运维APP本质上是因而

U福特ExplorerL scheme打开APP,3个APP可以安装3个或五个打开自个儿的U奥迪Q5L
scheme,浏览器去拜访某七个APP的U汉兰达L
scheme,然后若系统装置有这么些APP,则会呈请权限去开拓这几个APP。其实也好不简单浏览器app

U逍客L scheme打开APP,多个APP可以设置多个或七个打开本人的UKoleosL
scheme,浏览器去拜谒某3个APP的U奇骏L
scheme,然后若系统装置有其一APP,则会呈请权限去开辟这么些APP。其实也毕竟浏览器app

开拓另三个app,iOS就足以动用 UIApplication 的 canOpenUrl 方法来检测UXC60L
scheme 是还是不是能开拓对应的APP,而android也是接近的点子。当然即使JS跳转U汉兰达L
scheme没有反应,也表示这些手机没有

开辟另两个app,iOS就可以动用 UIApplication 的 canOpenUrl 方法来检测ULANDL
scheme 是不是能打开对应的APP,而android也是类似的法子。当然即使JS跳转U凯雷德L
scheme没有影响,也意味着那些手机没有

装这个app。

装这个app。

 

 

三、android平台

三、android平台

率先编辑AndroidManifest.xml,紧假使充实第三个<intent-filter>

首先编辑AndroidManifest.xml,首即使充实第三个<intent-filter>

<activity android:name=".activity.LoadingActivity"
      android:label="${APP_NAME}"
      android:screenOrientation="portrait"
      android:theme="@style/FirstActivityTheme">
      <intent-filter>
          <action android:name="android.intent.action.MAIN" />
      <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
      <intent-filter>
          <action android:name="android.intent.action.VIEW" />
      <category android:name="android.intent.category.DEFAULT" />
      <category android:name="android.intent.category.BROWSABLE" />
      <data android:host="android"
                android:scheme="wushang" />
      </intent-filter>
</activity>
<activity android:name=".activity.LoadingActivity"
      android:label="${APP_NAME}"
      android:screenOrientation="portrait"
      android:theme="@style/FirstActivityTheme">
      <intent-filter>
          <action android:name="android.intent.action.MAIN" />
      <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
      <intent-filter>
          <action android:name="android.intent.action.VIEW" />
      <category android:name="android.intent.category.DEFAULT" />
      <category android:name="android.intent.category.BROWSABLE" />
      <data android:host="android"
                android:scheme="wushang" />
      </intent-filter>
</activity>

比如此处wushang就是scheme,那一个最好是app的绝无仅有标识符,要不然在H5唤醒时,会师世一个增选框,选用运营哪三个APP。而host表示运行该页面,其实那些更应当用com.android.sky那样的包名来代替更好。

比如此处wushang就是scheme,那个最好是app的唯一标识符,要不然在H5唤醒时,会出现贰个选项框,采取运行哪1个APP。而host表示运维该页面,其实这么些更应当用com.android.sky那样的包名来取代更好。

那样的情状总体的U卡宴L就是wushang://android?data=sky,前面是参数传递。在Activity中可以用如下代码获取参数

那样的状态完全的U普拉多L就是wushang://android?data=sky,后边是参数传递。在Activity中得以用如下代码获取参数

public void onCreate(Bundle savedInstanceState) {             
     Uri uridata = this.getIntent().getData();             
     String mydata = uridata.getQueryParameter("data");            
}
public void onCreate(Bundle savedInstanceState) {             
     Uri uridata = this.getIntent().getData();             
     String mydata = uridata.getQueryParameter("data");            
}

从此在拓展字符串截取依然什么鬼的都随意啦。

而后在开展字符串截取照旧怎么样鬼的都随意啦。

 

 

接下去来切磋前端代码,那里有三种情状

接下去来谈谈前端代码,那里有二种景况

①页面在刷新进入时,请求权限唤起APP

一,页面在刷新进入时,请求权限唤起APP

那个相比不难,就只用在页面的顶部head中参加meta标签即可

本条相比较简单,就只用在页面的顶部head中插足meta标签即可

<meta http-equiv="refresh" content="0;url=wushang://android?data=sky">
<meta http-equiv="refresh" content="0;url=wushang://android?data=sky">

这几个标注当页面刷新即去拜访这么些链接,进而运行APP。然而存在三个标题,若是是苹果系统的Safari浏览器的话,访问有其一meta的头,会提交错误提醒,所以那几个尾部能够在后端进行页面渲染时经过客户端的

以此标注当页面刷新即去做客那一个链接,进而运维APP。不过存在2个题材,若是是苹果系统的Safari浏览器的话,访问有这么些meta的头,会交到错误提醒,所以那么些底部可以在后端进行页面渲染时通过客户端的

总类在累加去。

总类在添加去。

二,通过点击事件唤起APP

二,通过点击事件唤起APP

最简便易行的艺术当然是一贯动用a标签,如下

最简便易行的方法当然是直接接纳a标签,如下

<a href="wushang://android">open Android app</a>
<a href="wushang://android">open Android app</a>

可是在其实使用时,是索要对客户端的平台项目还有是不是在微信内置浏览器中展开判断的,所以这么的做法必将是格外的。

不过在实际利用时,是急需对客户端的阳台项目还有是不是在微信内置浏览器中进行判断的,所以那样的做法必将是至极的。

接下去研究在支付进度中,遭遇的二个标题,记录下。因为那边移动端采纳的工具库库是zepto,采用的点击事件是tap,然而在用tap进行处理是时常要点很多下,才能唤起APP

接下去探讨在支付进程中,遭逢的3个标题,记录下。因为那边移动端应用的工具库库是zepto,拔取的点击事件是tap,不过在用tap进行拍卖是常事要点很多下,才能唤起APP

<script type="text/javascript">
  $('#go').tap(function(){
      window.location.href = "wushang://android";
  });
</script>
<script type="text/javascript">
  $('#go').tap(function(){
      window.location.href = "wushang://android";
  });
</script>

切实原因不知,或然是tap事件选择的是轻点触碰。然后搜索了下,才用click事件,或许直接在a标签上标明处理函数就一贯不那标题

切切实实原因不知,可能是tap事件采纳的是轻点触碰。然后搜索了下,才用click事件,大概直接在a标签上标注处理函数就没有那难题

<a id="go" >
    open Android app
</a>
<a href="javascript:startApp()">
   open
</a>
<script src="../res/lib/zepto.min.js"></script>
<script src="../res/lib/public.js"></script>
<script>
    $('#go').click(function () {
       if(publicFun.isIos()){
          alert('it is IOS')
       }else{
          window.location.href = "wushang://android";
       }
    });

    function startApp(){
       if(publicFun.isIos()){
          alert('it is IOS')
       }else{
          window.location.href = "wushang://android";
       }
    }
</script>
<a id="go" >
    open Android app
</a>
<a href="javascript:startApp()">
   open
</a>
<script src="../res/lib/zepto.min.js"></script>
<script src="../res/lib/public.js"></script>
<script>
    $('#go').click(function () {
       if(publicFun.isIos()){
          alert('it is IOS')
       }else{
          window.location.href = "wushang://android";
       }
    });

    function startApp(){
       if(publicFun.isIos()){
          alert('it is IOS')
       }else{
          window.location.href = "wushang://android";
       }
    }
</script>

据此决定之后蒙受那类难点,就用这三种办法了。上边是实际上的处理函数

就此决定之后蒙受那类难点,就用那三种办法了。上边是实际上的处理函数

 window.startApp = function(){     //启动APP
     if(publicFun.isInWx()){     //微信中
        alert("请在浏览器中打开");
     }else{      //非微信中
        if(publicFun.isIos()){    //IOS系统,直接去itunes中,既可以下载也可以打开
            window.location.href = "https://itunes.apple.com/cn/app/[name]/id[id]";
        }else{      //android系统,通过定时器的方式,判断是否安装有APP
            var hasApp = true , t = 1000;
            setTimeout(function () {  //没有安装APP则跳转至应用宝下载,延时时间设置为2秒
              if(!hasApp) window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=[name]";
            } , 2000);
            var t1 = Date.now();
            window.location.href = "wushang://android";
            setTimeout(function () {    //t的时间就是出发APP启动的时间,若APP启动了,再次返回页面时t2这行代码执行,hasApp即为true。反之若APP没有启动即为false
              var t2 = Date.now();
              hasApp = !(!t1 || t2 - t1 < t + 150);
            } , t);
        }
     }
  } 
 window.startApp = function(){     //启动APP
     if(publicFun.isInWx()){     //微信中
        alert("请在浏览器中打开");
     }else{      //非微信中
        if(publicFun.isIos()){    //IOS系统,直接去itunes中,既可以下载也可以打开
            window.location.href = "https://itunes.apple.com/cn/app/[name]/id[id]";
        }else{      //android系统,通过定时器的方式,判断是否安装有APP
            var hasApp = true , t = 1000;
            setTimeout(function () {  //没有安装APP则跳转至应用宝下载,延时时间设置为2秒
              if(!hasApp) window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=[name]";
            } , 2000);
            var t1 = Date.now();
            window.location.href = "wushang://android";
            setTimeout(function () {    //t的时间就是出发APP启动的时间,若APP启动了,再次返回页面时t2这行代码执行,hasApp即为true。反之若APP没有启动即为false
              var t2 = Date.now();
              hasApp = !(!t1 || t2 - t1 < t + 150);
            } , t);
        }
     }
  } 

骨子里有个万分简单的法门,就是间接跳转应用宝。无论是在android依旧IOS,以及微信非微信。应用宝的下载页面都有下载和开辟七个功能(即便是在IOS平台,它是经过连接app
store的不二法门)

骨子里有个相当不难的点子,就是一向跳转应用宝。无论是在android照旧IOS,以及微信非微信。应用宝的下载页面都有下载和开拓七个功用(借使是在IOS平台,它是透过连接app
store的措施)

 

 

四、IOS平台

四、IOS平台

针对ios9及以上的打不开难题,实际上ios9提供了更好的缓解方案————通用链接。

本着ios9及以上的打不开问题,实际上ios9提供了更好的化解方案————通用链接。

那是iOS9推出的一项意义,若是您的运用支撑Universal
Links(通用链接),那么就可以方便的通过传统的HTTP链接来运营APP(若是iOS设备上已经安装了你的app,不须求拾分做其它判断等),可能打开网页(iOS设备上从不安装你的app)。或然可以更简便点来注明,在iOS9从前,对于从种种从浏览器,Safari、UIWebView可能WKWebView中唤醒APP的须求,大家普通只好利用scheme。

那是iOS9推出的一项功效,如若您的接纳支撑Universal
Links(通用链接),那么就可以有利于的经过古板的HTTP链接来运行APP(假若iOS设备上早已安装了你的app,不必要卓越做其它判断等),或然打开网页(iOS设备上尚未设置你的app)。恐怕可以更简明点来验证,在iOS9此前,对于从种种从浏览器,Safari、UIWebView恐怕WKWebView中唤醒APP的急需,大家平日只好采纳scheme。

如上来自网上关于通用链接的介绍,对于前端不难点讲就是您拜访多少个http的url,假使那几个url带有你提交给开发平台的安顿文件中至极规则的内容,ios系统会去品尝打开你的app,即便打不开,系统就会在浏览器中转向你要访问的链接。很好的1天质量,因为经过那脾个性在ios9上大家可以绕过微信的阻拦从而开拓app。

以上来自网上有关通用链接的牵线,对于前端不难点讲就是你拜访3个http的url,假使那么些url带有你付出给支付平台的配备文件中匹配规则的始末,ios系统会去品味打开你的app,如若打不开,系统就会在浏览器中转向您要拜访的链接。很好的壹特性质,因为通过那个个性在ios9上大家可以绕过微信的阻止从而开拓app。

因而地点的点击事件,仅仅是去访问app
store,因为若app已安装,在浏览器访问时,就曾经去到APP中了。

之所以地方的点击事件,仅仅是去访问app
store,因为若app已安装,在浏览器访问时,就早已去到APP中了。

那几个都以IOS配置上的事物,就不多写了。至于传参,以及页面定向,其实也等于一对一于在UIWebView中拿到当前连年的U中华VL,然后开展字符串拆分以及校验,即可判断去哪个页,以及取得参数值。

那一个都以IOS配置上的东西,就不多写了。至于传参,以及页面定向,其实相当于也就是在UIWebView中收获当前接二连三的UEnclaveL,然后举办字符串拆分以及校验,即可判断去哪个页,以及取得参数值。

 

 

相关文章