H5如何实现唤起APP及调试bug解决

韦志

前言：

为什么我对这个突然感兴趣呢，是因为最近在做需求的时候存在H5收银台唤起vx/jfb app的场景，但在调试时总会有bug（某一个版本的应用无法吊起支付的app），于是有了本篇的了解。
我们平时最常见的场景就是，在浏览器里看见广告，点击了广告，他判断你你手机装了对应APP，那他就会打开那个APP，如果没安装，他会帮你跳转到应用商店去下载。（没有人性化的会直接默默在后台给你下载，你完全没有感知）。
让我们一起看看是如何从H5跳转到APP的吧~

唤端

唤端技术我们也称之为deep link技术。当然，不同平台的实现方式有些不同，一般常见的有这几种：
分别是：

• url schema(通用)
  
• universal link(ios)
  
• App link,chrome intents(android)
  

url schema

这是一种比较通用的技术，各平台的兼容性也很好，他一般由协议名、路径、参数组成。这个一般是由native开发的同学提供，我们前端同学拿到这个schema就可以来打开app或app内的某个页面了。
标题APP微信支付宝淘宝url schemaweixin://alipay://taobao://
打开方式：

常用的由以下几种方式：

• 直接通过window.location.href跳转
  

1. window.location.href="zhihu://" rel="external nofollow"

复制代码

• 通过iframe跳转
  

1. const iframe = document.createElement('iframe')
   
2. ifram.src = 'zhihu://'
   
3. dozument.body.appendChild(iframe)

复制代码

• 直接使用a标签进行跳转
  
• 通过js brige来打开
  

1. jsb.openWebView = {
   
2. url:'zhihu://'
   
3. }

复制代码

判断是否成功唤起：
当用户唤起app失败时，我们希望可以引导用户去下载，那么我们怎么才能知道当前app是否唤起成功呢？
我们可以监听当前页面的visibilitychange事件，如果页面隐藏，则表示唤端成功，否则唤端失败，跳转到应用商店。
ok，来尝试一下：
首先我手机上并没有安装腾讯微博，所以也就无法唤起，我们让他跳到应用商店对应的应用下载页，这里就用淘宝的下载页代替一下：

1. <template>  
   
2.   <div class="open_app">  
   
3.       <div class="open_app_title">唤端测试Demo</div>  
   
4.       <div class="open_btn" @click="open">打开腾讯微博</div>  
   
5.   </div>  
   
6. </template>  
   
7. <script>  
   
8. let timer  
   
9. export default {  
   
10.     name: 'openApp',  
    
11.     methods: {  
    
12.         watchVisibility() {  
    
13.             window.addEventListener('visibilitychange', () => {  
    
14.                 // 监听页面visibility  
    
15.                 if(document.hidden) {  
    
16.                     // 如果页面隐藏了，则表示唤起成功，这时候需要清除下载定时器  
    
17.                     clearTimeout(timer)  
    
18.                 }  
    
19.             })  
    
20.         },  
    
21.         open() {  
    
22.             timer = setTimeout(() => {  
    
23.               // 没找到腾讯微博的下载页，这里暂时以淘宝下载页代替  
    
24.                 window.location.href = '![]()http://apps.apple.com/cn/app/id387682726'  
    
25.             }, 3000)  
    
26.             window.location.href = 'TencentWeibo://'  
    
27.         }  
    
28.     }  
    
29. }  
    
30. </script>  
    
31. <style lang="less">  
    
32. .open_app_title {  
    
33.     font-size: (20/@rem);  
    
34. }  
    
35. .open_btn{  
    
36.     margin-top:(20/@rem);  
    
37.     padding:(10/@rem) 0;  
    
38.     border-radius: (8/@rem);  
    
39.     background: salmon;  
    
40.     color: #fff;  
    
41.     font-size: (16/@rem);  
    
42. }  
    
43. </style>

复制代码

适用性：

url scheme这种方式兼容性好，无论安卓或者ios都能支持，是目前最常用的方式。但从代码中可以看到明显的缺点：

• 无法准确判断是否成功唤起，因为这本质上就是打开一个链接，但不是普通的http链接，所以如果用户没有安装对应的app，那么尝试跳转后在浏览器中会没有反应，通过定时器来引导用户跳转到对应应用商店，但这个定时器的事件又没有准确值，不同的手机唤端时间也不同，我们只能大概的估计一下他的时间来实现....
  
• 容易被屏蔽，app很容易就可以拦截掉通过url schema发起的跳转，比如微信内经常能看到一些屏蔽现象...
  

以上就是H5如何实现唤起APP的详细内容，更多关于H5如何实现唤起APP的资料请关注脚本之家其它相关文章！

来源:https://www.jb51.net/article/283951.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！