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 schema | weixin:// | alipay:// | taobao:// |
打开方式:
常用的由以下几种方式:
- 直接通过window.location.href跳转
window.location.href="zhihu://" rel="external nofollow"
- 通过iframe跳转
const iframe = document.createElement('iframe') ifram.src = 'zhihu://' dozument.body.appendChild(iframe)
- 直接使用a标签进行跳转
- 通过js brige来打开
jsb.openWebView = { url:'zhihu://' }
判断是否成功唤起:
当用户唤起app失败时,我们希望可以引导用户去下载,那么我们怎么才能知道当前app是否唤起成功呢?
我们可以监听当前页面的visibilitychange事件,如果页面隐藏,则表示唤端成功,否则唤端失败,跳转到应用商店。
ok,来尝试一下:
首先我手机上并没有安装腾讯微博,所以也就无法唤起,我们让他跳到应用商店对应的应用下载页,这里就用淘宝的下载页代替一下:
<template> <div class="open_app"> <div class="open_app_title">唤端测试Demo</div> <div class="open_btn" @click="open">打开腾讯微博</div> </div> </template> <script> let timer export default { name: 'openApp', methods: { watchVisibility() { window.addEventListener('visibilitychange', () => { // 监听页面visibility if(document.hidden) { // 如果页面隐藏了,则表示唤起成功,这时候需要清除下载定时器 clearTimeout(timer) } }) }, open() { timer = setTimeout(() => { // 没找到腾讯微博的下载页,这里暂时以淘宝下载页代替 window.location.href = '![]()http://apps.apple.com/cn/app/id387682726' }, 3000) window.location.href = 'TencentWeibo://' } } } </script> <style lang="less"> .open_app_title { font-size: (20/@rem); } .open_btn{ margin-top:(20/@rem); padding:(10/@rem) 0; border-radius: (8/@rem); background: salmon; color: #fff; font-size: (16/@rem); } </style>
适用性:
url scheme这种方式兼容性好,无论安卓或者ios都能支持,是目前最常用的方式。但从代码中可以看到明显的缺点:
- 无法准确判断是否成功唤起,因为这本质上就是打开一个链接,但不是普通的http链接,所以如果用户没有安装对应的app,那么尝试跳转后在浏览器中会没有反应,通过定时器来引导用户跳转到对应应用商店,但这个定时器的事件又没有准确值,不同的手机唤端时间也不同,我们只能大概的估计一下他的时间来实现....
- 容易被屏蔽,app很容易就可以拦截掉通过url schema发起的跳转,比如微信内经常能看到一些屏蔽现象...
以上就是H5如何实现唤起APP的详细内容,更多关于H5如何实现唤起APP的资料请关注脚本之家其它相关文章!
相关文章
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
这篇文章主要为大家详细介绍了touch.js手势库结合zepto.js插件开发图片查看器,图片可以实现滑动、缩放、双击缩放等效果,2016-11-11详解Webpack loader 之 file-loader
这篇文章主要介绍了详解Webpack loader 之 file-loader,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-11-11使用coffeescript编写node.js项目的方法汇总
Node.js 基于JavaScript编写应用,JavaScript是我的主要开发语言。CoffeeScript是编译为JavaScript的编程语言。CoffeeScript是一个非常高阶的语言,将JavaScript、Ruby和Python中我最爱的部分结合在了一起。小编给大家介绍下使用coffeescript编写node.js项目的方法2015-08-08
最新评论