h5唤起app

最新推荐文章于 2024-08-02 11:35:17 发布
最新推荐文章于 2024-08-02 11:35:17 发布
阅读量2.3w 收藏 10
点赞数 5
分类专栏： iOS进阶 文章标签： H5唤醒APP
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiang314/article/details/52269824
版权
本文探讨了H5唤醒APP的三种常见方案：iframe、window.location.href和a标签。通过测试分析，iOS适合使用window.location.href，而Android推荐使用iframe。测试结果显示，直接唤起和事件驱动唤起在不同平台和浏览器下表现不一，Android的iframe唤起在事件驱动时效果较好。最后，文章提出唤起成功后浏览器仍显示下载提示的问题以及location.href唤起时的跳转中间页策略。
摘要由CSDN通过智能技术生成

h5唤起app这种需求是常见的。在移动为王的时代，h5在app导流上发挥着重要的作用。

目前我们采用的唤起方式是url scheme(iOS，Android平台都支持)，只需原生APP开发时注册scheme， 那么用户点击到此类链接时，会自动跳到APP。

三种唤起方案

iframe
var last = Date.now(),
    doc = window.document,
    ifr = doc.createElement('iframe');

//创建一个隐藏的iframe
ifr.src = nativeUrl;
ifr.style.cssText = 'display:none;border:0;width:0;height:0;';
doc.body.appendChild(ifr);

setTimeout(function() {
    
    doc.body.removeChild(ifr);
    //setTimeout回小于2000一般为唤起失败 
    if (Date.now() - last <
最低0.47元/天 解锁文章
3行代码
关注
专栏目录
H5如何实现唤起APP
m0_67401228的博客
08-01 1882
写过hybrid的同学，想必都会遇到这样的需求，如果用户安装了自己的APP，就打开APP或跳转到APP内某个页面，如果没安装则引导用户到对应页面或应用商店下载。这里就涉及到了H5与Native之间的交互，为什么H5能够唤起APP并且跳转到对应的页面？就算你没写过想必也体验过，最常见的就是抖音里面的一些广告，如果你点击了广告，他判断你手机装了对应APP，那他就会去打开那个APP，如果没安装，他会帮你跳转到应用商店去下载，这个还算人性化一点的，有些直接后台给你去下载，你完全无感知。...
h5打开app源码
01-30
这是h5打开app源码，包含IOS和安卓平台，用到的技术有Universal Links,Intent,URL Scheme，详细介绍查看博客http://blog.csdn.net/zy1281539626/article/details/79203853
uniapp - APP分享到微信，通过h5页面跳转至对应的app页面
最新发布
Jocelyn_书
08-02 1746
从app分享到微信再到微信网页跳转至app对应页面，其中需要注意的是在微信开放平台和微信公众平台的相关配置，看配置是否成功可以在微信开发者工具里测试，把debug模式打开，就可以看到对应的日志反应是否是配置成功了的。还有各个环节的传递参数，记得存取好。uni-app中使用wx-open-launch-app-CSDN博客。
h5唤醒app
stephen
07-08 134
var ifr = document.createElement('iframe'); ifr.src = 'universalremote://splash/attr?parms='+window.location.href;//打开app的协议，由app同事提供 ifr.style.display = 'none'; document.bod...
H5唤起手机本地app
12-29
详细查看博客:http://blog.csdn.net/u014727709/article/details/78770422
关于H5唤醒APP的功能实现(千辛万苦啊!)
热门推荐
传说中的小黑的博客
04-26 3万+
      首先，我是个后端，写java的，甚至不是搞移动端的，所以js这方面有点底子但不专业，对于出现的错误也请见谅，原来项目要求有个H5页面打开APP的功能就强行要做，没办法就想办法搞一下，网上的教程基本都是差不多套路，APP厂商也没有提供启动的接口之类的，只能从系统注册表考虑启动应用，所以这下面的代码都是基于你知道这个app的scheme_url和scheme_hosts是啥的基础上进行的。...
H5唤醒app
zc135565的博客
04-07 1477
通过app以链接形式分享，被分享者点击h5链接，跳转到相应app，携带路径和参数 技术问题 1、网页端是无法获取到手机中是否安装该app的 通用的解决方法：点击唤醒链接2秒后，自动跳转到下载页面。如果页面隐藏了，则清除定时器，停留在当前页面。这个定时器的间隔时间要根据实际情况去控制，如果间隔时间小于app的启动时间，则app未被唤醒，就直接跳转到下载页面了。如果间隔时间过长，则会有明显的等待时间，然后跳转到下载页，用户体验不好。 2、对于app是否真正被唤醒，网...
callapplib是一个H5唤起APP的解决方案能够满足大部分唤端场景
08-10
callapp-lib是一个专门设计用于解决H5唤起APP问题的开源解决方案，它旨在为开发者提供一种灵活、高效的方法来处理各种唤端场景。 callapp-lib的核心功能在于，它能够帮助H5页面通过JavaScript代码调用唤起已经安装...
h5页面唤起app如果没安装就跳转下载(iOS和Android)
11-20
h5页面唤起app如果没安装就跳转下载(iOS和Android) 浏览器和app没有通信协议，所以h5不知道用户的手机释放安装了app。因此只能是h5去尝试唤起app，若不能唤起，引导用户去下载我们的app。 微信里屏蔽了 schema 协议,...
app能不能跳转外部h5_APP内部H5页面跳转 & H5唤起APP 怎么做？
weixin_34763548的博客
01-26 2681
H5唤起APP某页面做的H5页面，在APP中放了入口，在APP中访问别的页面场景我们做的H5页面，希望从浏览器跳转至APP的某个特定页面，如在H5中设置购买按钮，希望点击跳转至APP内部的购买页面。2、过程(1)是否安装APP判断首先浏览器是不能自动判断设备是否安装APP，所以抛出如下弹窗让用户自己选：点击下载APP跳转至对应的下载页面 /download 或根据环境下载ios或Android 的...
微信内H5页面唤醒App
qq_44859233的博客
11-05 3965
首先，简述一下这个需求的背景，产品希望能够让用户在微信内，打开一个h5页面，然后就能唤醒公司中维护的app，这个是为了能够更好的引流。
H5页面（vue项目）使用LinkedME实现唤起APP的功能
Claire_cz的博客
01-06 2863
H5页面（vue项目）使用LinkedME实现唤起APP的功能 最近开发的混合app要做个分享的功能，需要实现在微信或者qq打开app分享出去的链接能够直接调起手机的app，所以用了LinkedME来实现h5页面唤起app的功能 LinkedME官网就有js集成的文档，按照那个步骤来就可以实现，详情见：https://docs.linkedme.cc/web/#/linkPage?page_id=...
H5端 调起WhatsApp选择联系人以及给固定联系人进行内容分享
Superman_peng的博客
06-27 3692
封装了一个工具类，如果传入参数phone，则发给指定联系人，不传入phone，则到WhatsApp应用中选择联系人进行分享 util.js /** * 调起第三方 whatsApp 应用进行内容分享 * 如果传入参数phone，则发给指定人，如果不传入参数，则可以选择联系人进行分享 * @param {Object} phone */ export function share(phone) { const curHref = window.location.href; // content是自
H5页面与APP的交互
lyna的博客
07-16 3193
概述 APP调用H5页面时，出现有些页面页头重复的现象，需去掉H5页头使用原生APP页头。 解决方案 方案一： 前端在网页中写一个隐藏头部的方法，客户端直接调用; 方案二： 使用userAgent判断当前页面是否在webView里打开： 两种判断方式： 1.与app端约定一个字段，判断ua中是否包含此字段； var Href = window.location.href...
html5点击唤醒app
柠檬酸
02-28 4157
h5页面唤醒app，以淘宝为例子 &lt;a onclick="openApp()"&gt;点击唤醒app&lt;/a&gt; js &lt;script&gt; var download_schema = 'taobao://'; //app的协议有安卓同事提供，这里是用的淘宝 var universal_link = 'ios下载地址';//ios下载地址 var getVersi...
H5页面唤醒app的方法
anyEmpty的博客
12-28 1万+
iOS/Android 浏览器(h5)及微信中唤起本地APP 会遇到的问题： 如何解决未安装APP时的做好引导页 如何在微信中唤醒APP 在iOS9中如何处理universal link被用户误关的情况 如何解决Android各种机型、各种第三方浏览器导致的兼容问题等 在APP未安装情况下，引导用户下载后打开APP后，如何进入之前唤起时指定的页面或内容，即如何实现场景还原 在微信中唤...
H5唤起APP
ajiyi的博客
03-14 823
H5唤起APP的成功与失败的判断和处理 H5链接点击事件唤起APP，若成功则APP唤起进入相应页面，反之跳转APP的应用宝下载链接。（H5唤起APP，需要跟APP开发结合，兼容没有配置H5唤起APP的版本） 配置a标签链接（Android和IOS对应的配置的链接）。若点击有反应（在浏览器中点击）（链接请求成功），申请打开第三方APP，则唤起成功。若无反应（链接请求失败），则请求该链接失效，打开应用...
h5唤起APP并检查是否成功
06-10
要在h5页面中唤起APP并检查是否成功，需要使用一些技术手段，如： 1. 使用scheme协议唤起APP，例如：在h5页面中点击某个按钮，触发一个链接，链接格式为：scheme://customurl，这个链接会调起APP，并传递相应的参数。 2. 使用iframe元素唤起APP，例如：在h5页面中嵌入一个隐藏的iframe元素，iframe的src属性为APP的scheme链接，当用户点击某个按钮时，通过javascript改变iframe元素的src属性，从而唤起APP。 3. 使用Universal Links或者Android App Links唤起APP，这种方式需要在APP和h5网站中都进行一定的配置，优点是可以提高唤起成功率和用户体验。 4. 在APP中注册一个JavaScriptInterface，允许h5页面调用APP中的方法，例如：在h5页面中通过javascript调用window.android.checkIsAppInstalled()方法，这个方法会检查APP是否已经安装，并返回相应的结果。 在实现唤起APP并检查是否成功的过程中，需要注意一些安全问题，例如：不能通过url传递敏感信息，不能使用未经授权的scheme链接，需要对用户的操作进行一定的限制和提示等。
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值