您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

详解如何通过H5唤起本地app

2024/2/28 21:22:18发布31次查看
h5如何打开或者说唤起手机本地的app,纵观百度和google上面的答案,无非是两种:本文主要介绍了详解如何通过h5(浏览器/webview/其他)唤起本地app的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助到大家。
第一种方式:
通过在html的a标签里面的href中直接配置android端的schema,当然,如果有host其他的配置,跟在后面就可以了,android端配置和代码如下:
android端配置:
<activity android:name = ".mainactivity"> <intent-filter> <action android:name = "android.intent.action.main" /> <category android:name = "android.intent.category.launcher" /> </intent-filter> <intent-filter> <action android:name="android.intent.action.view"/> <category android:name="android.intent.category.default"/> <category android:name="android.intent.category.browsable"/> <data android:host="jingewenku.com" android:scheme="abraham"/> </intent-filter> </activity>
注:如果这个是配置在启动页要和标签并列在一起,不然运行后手机app的图标会没有;注意schema协议要小写,否则会有不能响应的异常!
html代码:
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>insert title here</title> </head> <body> <a href="abraham://jingewenku.com/?pid=1">打开app</a><br/> </body> </html>
这里我们来看看schema拼接协议的格式:
< a href="[scheme]://[host]/[path]?[query]">启动应用程序< /a>
各个项目含义如下所示:
scheme:判别启动的app。 ※详细后述
host:适当记述
path:传值时必须的key ※没有也可以
query:获取值的key和value ※没有也可以
以上就能实现打开本地的app了,当然是在app存在的情况下,否则的话没有反应。
大家可能会问上面的html代码中配置的不是android里面配置的schema协议吗?我明明没有配置pid,为什么要写这个呢?这是因为我们有些时候在唤起本地app的时候可能会向app传递一些参数,这些参数我们就可以配置在这里,我们只需要在oncreate里面获取就可以了,代码如下:
intent intent = getintent(); uri uri = intent.getdata(); if (uri != null) { string pid = uri.getqueryparameter("pid"); }
如果还想要获取android里面配置的schema协议的话,还可以这样:
uri uri = getintent().getdata(); if(uri != null) { // 完整的url信息 string url = uri.tostring(); log.e(tag, "url: " + uri); // scheme部分 string scheme = uri.getscheme(); log.e(tag, "scheme: " + scheme); // host部分 string host = uri.gethost(); log.e(tag, "host: " + host); //port部分 int port = uri.getport(); log.e(tag, "host: " + port); // 访问路劲 string path = uri.getpath(); log.e(tag, "path: " + path); list<string> pathsegments = uri.getpathsegments(); // query部分 string query = uri.getquery(); log.e(tag, "query: " + query); //获取指定参数值 string goodsid = uri.getqueryparameter("goodsid"); log.e(tag, "goodsid: " + goodsid); }
如何判断一个schema是否有效 :
packagemanager packagemanager = getpackagemanager(); intent intent = newintent(intent.action_view, uri.parse("abraham://jingewenku.com:8888/goodsdetail?goodsid=10011002")); list<resolveinfo> activities = packagemanager.queryintentactivities(intent, 0); booleanisvalid = !activities.isempty(); if(isvalid) { startactivity(intent); }
这种方式也是我百度到的最多的方式,但是这样就带来了一个问题了,上面的需求说的是“在页面上有一个连接, 如果用户安装了app,则点击打开对应的app;如果用户没有安装,则点击打开对应的设置连接”,这明显就不符合需求了,这只能作为一些个别需求来使用了。
第二种方式:
既然通过在href配置schema协议不行,那就只能通过js代码来实现了,只有这样才能根据判断实现app有的时候就打开,没有的时候就跳转到下载链接下载。
我们知道,js是无法判断手机是否安装了某款app的,所以我们只能够曲线救国了,我们可以获取时间如果,长时间不能呼起app则默认为没有安装这款app,然后跳转到下载页。当然这不是我想出来的,是网上的各位大佬的想法。在这里又要细分为两种情况了。
1.直接唤醒
说明:通过h5可换醒app,如访问一个url,点击按钮,打开应用,如果该应用app没有安装,那么直接跳转到app store的app下载页面,通过点击的方式兼容性较好,如果安装了app,在手机各大浏览器(360浏览器、uc浏览器、搜狗浏览器、qq浏览器、百度浏览器 )和qq客户端中,能唤醒。微信、新浪微博客户端、腾讯微博客户端无法唤醒。
代码如下:
<html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=content-type content="text/html;charset=utf-8"> <head> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <title>点击唤醒demo</title> </head> <body> <style> #zjmobliestart{font-size:40px;} </style> <!-- 说明:通过h5可换醒app,如访问一个url,点击按钮,打开应用,如果该应用app没有安装,那么直接跳转到app store的app下载页面,通过点击的方式。兼容性较好,如果安装了app,在手机各大浏览器(360浏览器 uc浏览器 搜狗浏览器 qq浏览器 百度浏览器 )和qq客户端中,能唤醒。微信 新浪微博客户端 腾讯微博客户端无法唤醒。 --> <a href="zjmobile://platformapi/startapp" id="zjmobliestart" target="_blank">唤醒浙江移动手机营业厅!</a> <script type="text/javascript"> function applink(){ return function(){ var clickedat = +new date; settimeout(function(){ !window.document.webkithidden && settimeout(function(){ if (+new date - clickedat < 2000){ window.location = 'https://itunes.apple.com/us/app/zhe-jiang-yi-dong-shou-ji/id898243566#weixin.qq.com'; } }, 500); }, 500) }; } document.getelementbyid("zjmobliestart").onclick = applink(); </script> </body> </html>
2.点击唤醒
说明:通过h5可换醒app,如访问一个url就能直接打开应用,如果该应用app没有安装,那么直接跳转到app store的app下载页面。兼容性一般:在手机各大浏览器(360浏览器、uc浏览器、搜狗浏览器 qq浏览器、百度浏览器 )能唤醒。微信、qq客户端、新浪微博客户端、 腾讯微博客户端无法唤醒。
代码如下:
<!doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=content-type content="text/html;charset=utf-8"> <head> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <title>直接唤醒demo</title> </head> <body> <style> #zjmobliestart{font-size:40px;} </style> <!-- 说明:通过h5可换醒app,如访问一个url就能直接打开应用,如果该应用app没有安装,那么直接跳转到app store的app下载页面 兼容性一般:在手机各大浏览器(360浏览器 uc浏览器 搜狗浏览器 qq浏览器 百度浏览器 )能唤醒。微信 qq客户端 新浪微博客户端 腾讯微博客户端无法唤醒。 --> <p id="zjmobliestart">唤醒浙江移动手机营业厅!</p> <script type="text/javascript"> function applink(){ window.location = 'zjmobile://platformapi/startapp'; var clickedat = +new date; settimeout(function(){ !window.document.webkithidden && settimeout(function(){ if (+new date - clickedat < 2000){ window.location = 'https://itunes.apple.com/us/app/zhe-jiang-yi-dong-shou-ji/id898243566#weixin.qq.com'; } }, 500); }, 500) } applink(); </script> </body> </html>
这样就完成了我们的需求了,在这个过程中,也遇到了很多热心人的讲解,这里记录一下,刚开始有人没理解我的需求,以为我是在android端来实现,让我通过包名的方式来检验app是否安装,这里记录一下方法,代码如下:
更多方法请查看我的工具类: commonutillibrary
还有的就是以为我是要在app里面通过加载webview的形式来唤起本地的app,这里也记录一下,代码如下:
webview.setwebviewclient(new webviewclient(){ @override public boolean shouldoverrideurlloading(webview view, string url) { uri uri=uri.parse(url); if(uri.getscheme().equals("abraham")&&uri.gethost().equals("jingewenku.com")){ string arg0=uri.getqueryparameter("arg0"); string arg1=uri.getqueryparameter("arg1"); }else{ view.loadurl(url); } return true; }});
还要注意的是,如果是在微信中唤起本地app,手机的微信中,是利用微信内置的浏览器(你可以将之前获取的页面在服务器上的地址发给你的任何联系人,点击发送的消息即可打开网页)打开那个简单的html页面,注意:直接打开scheme://host/datastring是不可行的,微信不会把这串字符解析成网址,必须包装成网页才能借助微信的浏览器打开。进入后就是我们刚刚设计的页面。这个时候,直接点击“启动应用程序”是不会唤醒之前安装的app的,因为微信做了屏蔽,你需要在右上角的菜单中选择“在浏览器中打开”。这个时候,有些浏览器就可以唤醒,有些浏览器则不行,比如笔者测试机mx4上的内置浏览器不行,uc浏览器就能唤醒。部分浏览器不能唤醒,笔者查阅了很多资料也不能彻底解决,我现在唯一能想到的是将遇到问题的浏览器让前端做一个判断,提示不支持,应该使用什么浏览器。如果有读者有解决方案,敬请留言,多谢!
后记:
微信中为什么无法唤醒app,需要“用浏览器打开”?
因为微信对所有的分享连接做了scheme屏蔽,也就是说分享连接中所有对于scheme的调用都被微信封掉了。
那为什么有些应用是可以唤起的,比如大众点评,嘀嘀打车?
从非技术角度讲,因为大众点评,嘀嘀打车都是微信的干儿子,亲儿子。对于儿子有特殊照顾。
从技术角度讲,微信有一个白名单,对于在白名单中的分享连接是不会屏蔽掉scheme调用的。
听不明白?那我们举一个例子。
比如大众点评的分享连接是 http://dazhongdianping.share.1.com
对应到微信白名单中就会有 http://dazhongdianping 这一项,所有源自于这个连接的分享,都不会屏蔽scheme,
比如 http://dazhongdianping.share.2.com
http://dazhongdianping.share.3.com
就算是大众点评的子公司也可以http://zigongsi.dazhongdianping.share.3.com,根域名也在白名单中,所以也可以使用。
到这里,大家就应该明白,想借用大众点评的scheme,绕过这个问题是不可能的,除非你的分享连接能挂到大众点评的根域名上。
这个问题应该解释清楚了,另外提一句,对于下载apk这种,微信是屏蔽任何应用的,对于儿子也不例外,所以你想提供下载链接,无论你是不是儿子,都逃不过使用浏览器打开之中low的方式了.
附录:常见应用的url scheme
1,系统默认应用
名称url schemebundle identifier
safari http://  
maps http://maps.google.com  
phone tel://  
sms sms://  
mail mailto://  
ibooks ibooks://  
app store itms-apps://itunes.apple.com  
music music://  
videos videos://
2,常用第三方软件
名称url schemebundle identifier
qq mqq://  
微信 weixin://  
腾讯微博 tencentweibo://  
淘宝 taobao://  
支付宝 alipay://  
微博 sinaweibo://  
weico微博 weico://  
qq浏览器 mqqbrowser:// com.tencent.mttlite
uc浏览器 dolphin:// com.dolphin.browser.iphone.chinese
欧朋浏览器 ohttp:// com.oupeng.mini
搜狗浏览器 sogoumse:// com.sogou.sogouexplorermobile
百度地图 baidumap:// com.baidu.map
chrome googlechrome://  
优酷 youku://  
京东 openapp.jdmoble://  
人人 renren://  
美团 imeituan://  
1号店 wccbyihaodian://  
我查查 wcc://  
有道词典 yddictproapp://  
知乎 zhihu://  
点评 dianping://  
微盘 sinavdisk://  
豆瓣fm doubanradio://  
网易公开课 ntesopen://  
名片全能王 camcard://  
qq音乐 qqmusic://  
腾讯视频 tenvideo://  
豆瓣电影 doubanmovie://  
网易云音乐 orpheus://  
网易新闻 newsapp://  
网易应用 apper://  
网易彩票 ntescaipiao://  
有道云笔记 youdaonote://  
多看 duokan-reader://  
全国空气质量指数 dirtybeijing://  
百度音乐 baidumusic://  
下厨房 xcfapp://
h5的多线程如何实现web worker
h5实现桌面通知以及提示功能的实例
h5中如何获取和设置自定义属性
以上就是详解如何通过h5唤起本地app的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product