devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

H5页面唤起指定app,否则跳转到应用市场_h5唤起app 阻止浏览器的弹窗提示 直接跳转

作者：我家自动化 | 2024-03-04 19:41:41

赞

踩

h5唤起app 阻止浏览器的弹窗提示 直接跳转

场景1：
在 h5 页面上，不管用户是否安装过该app，都直接跳转到应用市场，让用户从应用市场上打开app。
思路：
这种场景处理比较简单，直接判断判断是android端还是ios端，然后在点击按钮上赋值对应终端的应用市场下载链接就可以了，在微信上打开h5页面时也不用另外处理。跳转之前，系统会默认弹出对话框问是否跳转。
案例：
下图以ios端打开 淘宝 为例：
在这里插入图片描述
safari内打开h5页面
在这里插入图片描述
微信内打开h5页面
具体实现：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.         <title></title>
  7.         <style type="text/css">
  8.             body{
  9.                 padding-top: 30px;
  10.             }
  11.             .open-app {
  12.                 margin: 30px;
  13.                 border-radius: 5px;
  14.                 padding: 10px 20px;
  15.                 border: 1px solid #ccc;
  16.             }
  17.         </style>
  18.         <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  19.     </head>
  20.     <body>
  21.  
  22.         <a class="open-app">click me to store</a>
  23.         
  24.         <script type="text/javascript">
  25.  
  26.             var iosLinkUrl = "http://apps.apple.com/cn/app/id387682726" // 淘宝 app store 下载地址
  27.             var androidLinkurl = "https://a.app.qq.com/o/simple.jsp?pkgname=com.lucky.luckyclient" //(找不到淘宝应用宝地址，这里以lucky coffee为例)
  28.  
  29.             var u = navigator.userAgent, isAndroid, isIOS
  30.  
  31.             window.onload = function() {
  32.                 init()
  33.             }
  34.  
  35.             function init() {
  36.                 isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端
  37.                 isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  38.  
  39.                 var link = isIOS ? iosLinkUrl : androidLinkurl
  40.  
  41.                 $('a').attr('href', link)
  42.             }
  43.             
  44.         </script>
  45.     </body>
  46. </html>

场景2：
在 h5 页面上，用户点击打开app按钮，在用户手机上已经安装了App时，打开app，否则就引导用户前往应用市场。这样就方便了用户，而且在业务需要情况下，可以跳转到app指定页面和传参。
思路：
在 h5 页面上唤醒app ，需要用到 scheme协议（由app端小伙伴提供，关于什么是scheme文末补充），但是在微信浏览器里scheme不起作用，有没有印象有时在微信上打开的一些需要跳转到app的操作时，会提示在浏览器上打开，就是这个原因。
所以需要先判断是否为微信浏览器，是微信浏览器的话，提示到浏览器打开，不是的话，再判断是Android端还是iOS端，然后做相应的处理。
案例：
以打开 淘宝 为例：
具体实现：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.         <title></title>
  7.         <style type="text/css">
  8.             body{
  9.                 padding-top: 30px;
  10.             }
  11.             .open-app {
  12.                 margin: 30px;
  13.                 border-radius: 5px;
  14.                 padding: 10px 20px;
  15.                 border: 1px solid #ccc;
  16.             }
  17.         </style>
  18.         <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  19.     </head>
  20.     <body>
  21.         
  22.         <a class="open-app">click me to app</a>
  23.         
  24.         <script type="text/javascript">
  25.  
  26.             $('a').click(function() {
  27.                 var u = navigator.userAgent;
  28.                 var isWeixin = u.toLowerCase().indexOf('micromessenger') !== -1; // 微信内
  29.                 var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端
  30.                 var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  31.  
  32.                 // 微信内
  33.                 if(isWeixin) {
  34.                     alert('请在浏览器上打开')
  35.                 } else {
  36.                     //android端
  37.                     if (isAndroid) {
  38.                         //安卓app的scheme协议
  39.                         window.location.href = 'taobao://';
  40.                         setTimeout(function(){
  41.                             let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||window.document.webkitHidden 
  42.                             if(typeof hidden =="undefined" || hidden ==false){
  43.                                 //应用宝下载地址 (emmm 找不到淘宝应用宝的地址，这里放的是 lucky coffee 地址)
  44.                                 window.location.href ="https://a.app.qq.com/o/simple.jsp?pkgname=com.lucky.luckyclient";
  45.                             }
  46.                         }, 2000);
  47.                     }
  48.                     //ios端
  49.                     if (isIOS) {
  50.                         //ios的scheme协议
  51.                         window.location.href = 'taobao://'
  52.                         setTimeout(function(){
  53.                             let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||window.document.webkitHidden 
  54.                             if(typeof hidden =="undefined" || hidden ==false){
  55.                                 //App store下载地址
  56.                                 window.location.href = "http://itunes.apple.com/app/id387682726";
  57.                             }
  58.                         }, 2000);
  59.                     }
  60.                 }
  61.                 
  62.             });
  63.         </script>
  64.     </body>
  65. </html>

如果 能检测到 scheme 就跳转到协议 ‘taobao://’，即打开app；
如果2秒后还没有唤醒 ‘taobao://’，那么就认为该设备上没有安装淘宝app，即跳转到应用市场。
这里选择直接新开窗口来打开链接，或者也可以用到 iframe 框架来打开链接，但是 IOS9屏蔽了 iframe这个标签。
URL Scheme方式唤起Activity或App
URL Scheme是一种页面内跳转协议，通过这个协议可以比较方便的跳转到app某一个页面。
scheme应用场景
scheme 的应用场景很多，比如我们熟悉的:
*通过小程序，利用Scheme协议打开原生app;
*H5页面点击锚点，根据锚点具体跳转路径APP端跳转具体的页面;
*APP端收到服务器端下发的PUSH通知栏消息，根据消息的点击跳转路径跳转相关页面;
*APP根据URL跳转到另外一个APP指定页面;
*通过短信息中的url打开原生app
scheme协议格式：

[scheme]://[host][:port]/[path]?[query]
  • 1

scheme: 协议名称（由开发人员自定义）(必要，其他都是可选)
host: 域名
port：端口
path: 页面路径
query： 请求参数

调用：
例如我们再 h5 页面上点击一个唤醒app按钮，如下：

<a href="yc://ycbjie:8888/from?type=yangchong">打开叮咚app</a>
  • 1

那么这个协议的链接的有来，即再原生app的设置，是长这样的：

  1. <activity
  2.     android:name=".ui.main.ui.activity.SchemeFirstActivity"
  3.     android:screenOrientation="portrait">
  4.     <!--Android 接收外部跳转过滤器-->
  5.     <!--要想在别的App上能成功调起App，必须添加intent过滤器-->
  6.     <intent-filter>
  7.         <!-- 协议部分配置 ,注意需要跟web配置相同-->
  8.         <!--协议部分，随便设置 yc://ycbjie:8888/from?type=yangchong  -->
  9.         <data android:scheme="yc"
  10.             android:host="ycbjie"
  11.             android:path="/from"
  12.             android:port="8888"/>
  13.  
  14.  
  15.         <!--下面这几行也必须得设置-->
  16.         <category android:name="android.intent.category.DEFAULT" />
  17.         <category android:name="android.intent.category.BROWSABLE" />
  18.         <action android:name="android.intent.action.VIEW" />
  19.     </intent-filter>
  20. </activity>

需要原生app上先设置好了这些，h5上才能唤醒app。

注意清除定时器：

  1. //定时器及时清理，否则 不管有没有app，浏览器都会跳转下载页
  2. document.addEventListener("visibilitychange", function() {
  3.     // 判断当前document是显示状态还是隐藏状态
  4.     if(!document.hidden){
  5.       // 如果是显示状态
  6.     }else{
  7.       // 如果是隐藏状态
  8.       clearTimeout(定时器);
  9.     }
  10. });

 

原文地址：H5页面唤起指定app或跳转到应用市场_落落寒灯灭的博客-CSDN博客_h5页面跳转app

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/188467?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号