iso系统文件怎么打开软件-()
来源:191路由网 2022-12-26 19:20:17
前言
一般有做过移动端开发的前端都会遇到这种唤起App的问题,这篇总结的很齐全。今日早读由时光网@会说话的鱼 授权分享。
@会说话的鱼,就职于时光网,前端负责人。推崇效率至上,对一切可提升组内工作效率技术都感兴趣。Java与Nodejs爱好者,擅长前端架构,在全网性能优化、类库研发、知识沉淀、工具应用等方面取得了丰硕成果。
正文从这开始~
背景a最近在做微信、QQ、微博中使用js唤起App,之前也做过类似的功能,不过比较粗糙,考虑的情况不太全,而且那已经是很久之前的事情了,很多技术都已过时,现在有体验更好,功能更加完善的唤起技术,之前的很多的方案,到了现在都已是不太必要了,现在通过这篇文章分享给大家一个全面的、最新的唤起方案,希望对大家有帮忙。
目标用户点击打开App或者下载按钮(这个按钮可能在一个下载入口页、各种分享页面的吸顶或吸底的banner),如果用户已经安装了App,则根据业务跳转到相应的Native页面;如果用户没有安装该应用,则跳到AppStore或者应用市场去下载我们的App。
一个完整的流程编辑切换为居中
添加图片注释,不超过 140 字(可选)
首先所有的下载/唤起入口都是一个直接跳转,应该是这样:
<ahref="https://applink-party.mtime.cn/mtlf">下载</a>
或者这样:
window.location.href = 'https://applink-party.mtime.cn/mtlf'
所有的业务判断都是mtlf这个页面里面来做,这样有两个好处:
多业务共用代码。在一个团队中,每个人的业务都可能有一个banner下载,没有比location到一个url更简单的调用方式了能够利用universal link简单说下universal link在iOS9之前,唤起方式和现在安卓是一个的,都是使用scheme进行唤起,这种方式有个小问题,每次唤起,都会给个提示:是否打开xx应用,这样从体验上来讲,又让用户多一步操作。universal link会直接跳转,不会在页面做停留,条件就是在我们项目的根目录,增一个apple-app-site-association.json文件,里面的内容大致是这样:
添加图片注释,不超过 140 字(可选)
然后iOS的App后台再配置一下,就可以实现直接唤起了!
微信、微博、QQ、Safari在各平台的唤起方案添加图片注释,不超过 140 字(可选)
微信微信是最重要的一种分享渠道,但是我们能够做的,却不多。之前,iOS下的微信支持universal link这种唤起方式,但是从2018年1月8日之后,微信把这个给屏蔽了!!!不管微信基于什么原因,把iOS下这种最便捷的唤起方式屏蔽,我们能做的只能是适应了。so,现在不管是iOS还是android,我们的处理方式是一样的:都是直接跳到应用宝。iOS的应用宝会引导找开AppStore,android的应用宝会直接打开App(前提是你已经下载) 注:微信把itunes链接也屏蔽了,所以也没办法直接跳转AppStore,只能借助应用宝来搭这个桥。
微博微博目前还支持universal link唤起,我们只需要考虑未下载的情况。
在iOS下,微博是不支持打开应用宝的链接,所以我们需要引导用户使用Safari打开,像这样:添加图片注释,不超过 140 字(可选)
在android平台下,使用scheme这种方式是唤不起App的,但是有特例,同样是scheme,大人点评和网易云音乐就可以唤起,有空大家可以自己试试,所以我们可以推断出,安卓平台下的微博,也有类似微信一样的白名单,在白名单内的,就可以使用scheme唤起,就像微信之于京东,京东在微信里面就是通过scheme方式唤起的。so,不管是iOS还是android,我们的方案是:直接引导用户使用本地浏览器打开。
QQiOS平台下,QQ目前还支持universal link唤起,要是没有安装,QQ下也支持直接打开itunes链接,比较其他应用,QQ支持是最好的。android平台下,QQ也支持scheme方式唤起,但是在一些老机型下,QQ会有一定的概率唤起失败,具体的现象是:第一次打开页面,唤起失败,再次打开,唤起成功。根据现象,我们可以推测出,在QQ的webview中,会对scheme的唤起方式做一些加载时间上的限制,经测试,大约在500ms,超过这个时间值,就会出现唤起失败的情况。为什么第二次打开,唤起成功的概率会大,是因为第一次加载时,已缓存了文件,第二次打开直接加载,这样时间在限制之内。SafariSafari这种情况比较简单,支持universal link,也支持直接打开itunes,so,如图处理就可以了。
踩坑H2M_LI_HEADER
在iOS9中,Safari不支持直接跳转itunes,so,这种情况需要做兼容处理,可以直接跳到应用宝之前看唤起是不是成功了,需要自己来计算时间,因为要是唤起成功了,setInterval的时间就会变慢,经我测试,已经用不到这种方法了,只需要使用document.hidden || document.webkitHidden就可以,兼容性还不错判断是不是Safari浏览器时,一般判断都是UA中有没有这个字符串,经测试发现,安卓的UA中,也包含Safari这个字符串(如下UA展示),所以需要加上操作系统的判断关于Scheme唤起,之前有很多方案,比如:使用iframe、<a>标签点击、window.location…经测试,只要使用a标签点击,这样兼容性最好,代码大约长这样:添加图片注释,不超过 140 字(可选)
关于测试两个平台,这么多情况,要一个一个测试吗?当然要一个一个的验证,但是在开发期间,没有必要改一行,在手机上测试一下,这样效率太低了,尤其是像一样,选了一个安卓4.4的手机,绝对可以磨练你的耐心。为了提高效率,我把我常用到的UA分享给大家,这样在Chrome模拟器里配置一下,就可以本地调试了,常用UA如下:
iOS-微信Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Mobile/15C202 电脑 MicroMessenger/6.6.1 NetType/WIFI Language/zh_CN
iOS-QQ
Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Mobile/15C202 QQ/7.3.5.473 V1_IPH_SQ_7.3.5_1_APP_A Pixel/1125 Core/UIWebView Device/Apple(iPhone X) NetType/WIFI QBWebViewType/1
iOS-微博
Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Mobile/15C202 Weibo (iPhone10,3__weibo__8.1.0__iphone__os11.2.2)
iOS-safari
Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Version/11.0 Mobile/15C202 Safari/604.1
android-微信
Mozilla/5.0 (Linux; Android 4.4.2; PE-TL20 Build/HuaweiPE-TL20; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.132 MQQBrowser/6.2 TBS/043807 Mobile Safari/537.36 MicroMessenger/电脑6.6.1.1220(0x26060135) NetType/WIFI Language/zh_CN
android-QQ
Mozilla/5.0 (Linux; Android 4.4.2; PE-TL20 Build/HuaweiPE-TL20; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.132 MQQBrowser/6.2 TBS/043807 Mobile Safari/537.36 V1_AND_SQ_7.3.2_762_YYB_D QQ/7.3.2.3350 NetType/WIFI WebP/0.3.0 Pixel/1080
android-微博
Mozilla/5.0 (Linux; Android 4.4.2; PE-TL20 Build/HuaweiPE-TL20) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/30.0.0.0 Mobile Safari/537.36 Weibo (HUAWEI-PE-TL20__weibo__8.0.2__android__android4.4.2)
配置完成之后,就可以像我一样,在电脑上切换环境啦:
添加图片注释,不超过 140 字(可选)
首先明确一下目的,是要在分享出去的html页面,通过js操作唤醒app或者打开商店,那么第一步就应该先判断当前的环境,这里我附上详细的判断方法,通用的
var browser = { versions: function() { var u = navigator.userAgent, 电脑 app = navigator.appVersion; return { trident: u.indexOf('Trident') > -1, /*IE内核*/ presto: u.indexOf('Presto') > -1, /*opera内核*/ webKit: u.indexOf('AppleWebKit') > -1, /*苹果、谷歌内核*/ gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, /*火狐内核*/ mobile: !!u.match(/AppleWebKit.*Mobile.*/), /*是否为移动终端*/ ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), /*ios终端*/ android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, /*android终端或者uc浏览器*/ iPhone: u.indexOf('iPhone') > -1, /*是否为iPhone或者QQHD浏览器*/ iPad: u.indexOf('iPad') > -1, /*是否iPad*/ webApp: u.indexOf('Safari') == -1, /*是否web应该程序,没有头部与底部*/ souyue: u.indexOf('souyue') > -1, superapp: u.indexOf('superapp') > -1, weixin:u.toLowerCase().indexOf('micromessenger') > -1, Safari:u.indexOf('Safari') > -1 }; }(), language: (navigator.browserLanguage || navigator.language).toLowerCase() }; 这里用到两个判断,一个ios一个安卓 if (browser.versions.ios) { //你的代码 }else if (browser.versions.android){ //你的代码 }
代码
(function() { //这个对象在唤起app的需求中是通用的,作用是判断当前为哪个客户端 var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return { trident: u.indexOf('Trident') > -1, //IE内核 presto: u.indexOf('Presto') > -1, //opera内核 webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核 gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核 mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端 ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端 android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端 iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器 iPad: u.indexOf('iPad') > -1, //是否iPad webApp: u.indexOf('Safari') == -1, //是否web应该程序,没有头部与底部 weixin: u.indexOf('MicroMessenger') > -1, //是否微信 (2015-01-22新增) qq: u.match(/\sQQ/i) == " qq" //是否QQ }; }(), language:(navigator.browserLanguage || navigator.language).toLowerCase() }; var appInfo = { iosUrl: ["https://h5.m.taobao.com/?sprefer=sypc00","https://m.toutiao.com/?"], //当前为网页版应用链接,需更换成app的跳转链接 androidUrl: ["https://h5.m.taobao.com/?sprefer=sypc00","https://m.toutiao.com/?"] //当前为网页版应用链接,需更换成app的跳转链接 }; var count = 0; var i = appInfo.androidUrl; var n = appInfo.iosUrl; var ele = document.getElementsByTagName('body')[0]; ele.addEventListener('touchstart',function () { count++; if (count>=3) { if (browser.versions.ios) { console.log("ios"); window.location.href = n[0]; //设置定时器的目的是如果第一个app没有安装,则自动跳转第二个 setTimeout(function(){ window.location.href = n[1]; },3000); }else if(browser.versions.android){ console.log("android"); window.location.href = i[0]; setTimeout(function(){ window.location.href = i[1]; },3000); } } }); })();
那么接下来就应该判断当前手机上是否有安装某款应用,但是要知道js是无法判断手机上是否安装了哪款app的,所以有app打开app,没有app跳转到商店就可以这么做,js打开ios系统app的方法是这样的,拿淘宝为例: taobao:// 那么同理安卓的方法也是一样的,只不过打开app的协议不同,这个对应的打开app的协议是你们ios和安卓开发的小伙伴提供给你的,接下来的原理就是尝试发起打开app的请求,如果有提示是否在某款app中打开,那就可以直接打开了,如果打不开那么我们就要做另外一件事情了
if (browser.versions.ios) { window.location.href = "taobao://"; setTimeout(function(){ window.location.href = "你的app在商店中的地址"; window.location.href = "你的app在商店中的地址"; //为什么要加两遍我下面会说到 },2000) }else if (browser.versions.android){ window.location.href = "taobao://**"; setTimeout(function(){ window.location.href = "你的app的下载地址"; },2000) }
当然为什么要加定时器,相信大家也都知道,因为打开app是需要时间的,而js代码瞬间就执行完毕了,当然这里还有几个坑,ios系统第一次window.location.href尝试打开app有时候会弹一下是否在某款app中打开之后马上跳到商店,为了解决这个问题我加了两遍window.location.href。哈哈管他呢,反正目的是达到了。那么安卓的话就是有的浏览器支持不友好。这个目前我没什么办法。
电脑
相关阅读
-
-
win10电脑无法还原出厂设置-(win10电脑无法还原出厂设置怎么办)
(win10电脑无法还原出厂设置怎么办)当iPad内存不足、经常性卡顿、卡死、其它系统内存占用过多等情况时,你是不是会想到将iPad进行出厂重置?当iPad遇到黑屏、白苹果、白屏等iPadOS系统造成的故...
2022-12-26
-
-
iso系统文件怎么打开软件-()
()前言一般有做过移动端开发的前端都会遇到这种唤起App的问题,这篇总结的很齐全。今日早读由时光网@会说话的鱼授权分享。@会说话的鱼,就职于时光网,前端负责人。推崇效率至上,对一切可提升组内工作效率技术都感兴趣。Java与Nodejs爱...
2022-12-26
-
-
tcl电脑bios设置时间设置时间-()
()时序及相关概念参考:royalk以下我把时序分为两部分,只是为了下文介绍起来作为归类,非官方分类方法。第一时序:CL-tRCD-tRP-tRAS-CR,就是我们常说的5个主要时序。第二时序:(包含所有XMP时序)在讲时序之前,我想先让大家明白一些概念。内存时钟信号...
2022-12-26
-
-
hp580设置u盘启动-(hpdl580设置u盘启动项)
(hpdl580设置u盘启动项)手上一个改造项目,十几台windows2003server+西门子wincc6.0服务器进行软硬件升级。没想到也折腾了一番啊,记录一下过程:第一步,拆开服务器机箱,安装西门子cp1623网卡。虽然机箱里面有两个空的pci槽,但是都不能让cp1623网卡被识别,必须拆掉原配的一块光纤网卡,再把cp1623装上去。第二步,机器上电,...
2022-12-26
-
-
u盘发现木马病毒怎么办-(u盘发现木马病毒怎么办啊)
(u盘发现木马病毒怎么办啊)U盘与硬盘的最大不同是,它不需物理驱动器,即插即用,且其存储容量远超过软盘,极便于携带,所以深受众多用户的喜爱,但是当U盘处于不安全的网络环境中,容易U盘中病毒让里面的所有数据丢失,这时候该怎么办呢?请继续往下了解。U盘中病毒的...
2022-12-26
191路由网 - 192.168.1.1,192.168.0.1无线路由器设置教程
版权声明:本站的文章和图片来自互联网收集,仅做分享之用如有侵权请联系站长,我们将在24小时内删除