H5唤起app

H5唤起app

1.判断是否在微信中打开

无论是在哪个平台的客户端Android/IOS,在微信的平台上访问都有一个问题,那就是无法启动客户端,这是微信为了安全性考虑的限制,android这边屏蔽schema协议,除非公司是微信的伙伴加入了白名单才能使用,IOS系统可以去访问app对应appstore的下载页,但是微信经常屏蔽appstore的这个网址,进而访问不到。比较方便的做法就是在微信浏览器中,无论是IOS还是android都去应用宝的下载(IOS 这边最后会到appstore中)页面打开。

var agent = navigator.userAgent || ''
var isWx = /micromessenger/i.test(agent)
if(isWx){
    //微信,提示用户用浏览器打开
}else{
    //非微信
}

js的test() 方法用于检测一个字符串是否匹配某个模式.

RegExpObject.test(string)
//string为要检测的字符串。
//如果字符串 string 中含有与 RegExpObject 匹配的文本,则返回 true,否则返回 false。

2.判断是否为iOS

var isIOS = /iPhone|iPad|iPod/i.test(agent)   //返回true/false

3.唤起app

H5启动APP本质上是通过URL scheme打开APP,一个APP可以设置一个或多个打开自己的URL scheme,浏览器去访问某一个APP的URL scheme,然后若系统安装有这个APP,则会请求权限去打开这个APP。

其实也算是浏览器app打开另一个app,iOS就可以使用 UIApplication 的 canOpenUrl 方法来检测URL scheme 是否能打开对应的APP,而android也是类似的方式。

当然如果JS跳转URL scheme没有反应,也意味着这个手机没有装这个app。

<a class='btn'>打开app</a>

如果需要跳转到app指定页面,在URL scheme后面再加一个url即可(URL scheme及url由app开发人员提供。)

if (isIOS) {
    $('.btn').attr('href','BonDayApp://' + url);
} else {
    $('.btn').attr('href','bondayapp://bonday.com/scheme?' + url);
}

原文地址:https://www.cnblogs.com/jasmine-95/p/9504774.html

时间: 2024-10-10 21:24:51

H5唤起app的相关文章

H5按钮唤起APP应用(IOS)或跳转至APPstore

昨天刚到公司收到了内部邮件,让调研是否可以由H5页面直接唤起APP.因为之前搞过这个东西,所以直接回复可以唤起,但是与前端联调时,遇到了种种的坎,所以今天特此记录一下,方便以后使用. 首先H5唤起APP,需要在H5和APP中进行不同的设置. 原理说明 首先需要说明,不管iOS还是Android,浏览器都不可能预知本地是否安装了某个APP的.或者更严谨地说,我们不能通过浏览器来预知本地是否安装.因为就算浏览器可以读取本地应用的安装列表,但是目前也没任何一家浏览器提供查询的API,所以这条路是走不通

(转)html5唤起app的方法

这篇文章主要介绍了html5唤起app的方法的相关资料,觉得挺不错的,现在分享给大家,也给大家做个参考.一起来看看吧 感觉不错的话就帮助顶起来吧h5唤起app这种需求是常见的.在移动为王的时代,h5在app导流上发挥着重要的作用.目前我们采用的唤起方式是url scheme(iOS,Android平台都支持),只需原生APP开发时注册scheme, 那么用户点击到此类链接时,会自动跳到APP.三种唤起方案iframevar last = Date.now(),     doc = window.

html5唤起app的方法

这篇文章主要介绍了html5唤起app的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 h5唤起app这种需求是常见的.在移动为王的时代,h5在app导流上发挥着重要的作用. 目前我们采用的唤起方式是url scheme(iOS,Android平台都支持),只需原生APP开发时注册scheme, 那么用户点击到此类链接时,会自动跳到APP. 三种唤起方案 iframe ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 1

h5唤起地图导航

在H5页面中跳转到地图App,或者在本地App中加载的H5页面跳转到地图App,唤起App进行导航: 1.腾讯地图: 调用方式: http://apis.map.qq.com/uri/v1/marker?marker=coord:lat,lng;addr:address 其中lat.lng.address分别为经纬度和详细地址三个参数,更多参数介绍可在腾讯地图api找到:https://lbs.qq.com/uri_v1/guide.html 当用户手机未安装腾讯地图APP时,可通过浏览器调起腾

js在微信、微博、QQ、Safari唤起App的解决方案

背景 最近在做微信.QQ.微博中使用js唤起App,之前也做过类似的功能,不过比较粗糙,考虑的情况不太全,而且那已经是很久之前的事情了,很多技术都已过时,现在有体验更好,功能更加完善的唤起技术,之前的很多的方案,到了现在都已是不太必要了,现在通过这篇文章分享给大家一个全面的.最新的唤起方案,希望对大家有帮忙. 最终实现的效果 用户点击H5页面的打开App或者下载按钮(这个按钮可能在一个下载入口页.各种分享页面的吸顶或吸底的banner),如果用户已经安装了App,则根据业务跳转到相应的Nativ

“H5跨平台APP开发”APICloud从入门到精通

"H5跨平台APP开发"APICloud从入门到精通 课程学习地址:http://www.xuetuwuyou.com/course/164 课程出自学途无忧网:http://www.xuetuwuyou.com 课程介绍:               一.课程使用到的软件 APICloud Studuio(或Sublime.WebStorm加上APICloud插件) Google Chrome浏览器 海马玩手机模拟器(或真机) 二.课程目的:     随着IOS.Android等原生

通过页面调用APP【H5与APP互通】

现在H5和App原生的内容原来越互通,所涉及的业务也越来越复杂和融合,所以如何互相之间方便的调用才是王道. 场景1 比如用hybrid获取地理位置和短信信息,这当然需要框架封装好,比如利用框架的bridge.js(下一篇文章会详细讲这个内容) 场景2    最简单的比如用H5调用App然后再判断是否有安装此应用,如果有则直接打开应用,则安装如果没有则去itunes或者google市场安装. 比如淘宝上的立即打开功能 首先场景2的功能,我们需要了解他的几个流程 1.判断程序系统环境 2.判断有应用

小程序和H5、app、公众号、有什么区别?

小程序和H5.app.公众号.有什么区别?下面木鱼小铺就和大家分享一下四者之间的区别.一.小程序和app的不同之处 1.开发 app需要适配市场上很多款的主流手机,开发成本大. 小程序一次开发就可以自动适配所有手机. 2.开发周期 一款完善的双平台app平均的开发周期约3个月: 小程序平均开发周期约2周内,仅为app的六分之一. 3.发布 app需要向十几个应用商店提交审核,且每个应用商店要求的资料都不一样,非常繁琐:小程序只需要提交到公众平台审核. 4.下载 app从应用商店里下载. 小程序通

【转帖】H5 手机 App 开发入门:概念篇

H5 手机 App 开发入门:概念篇 http://www.ruanyifeng.com/blog/2019/12/hybrid-app-concepts.html 作者: 阮一峰 日期: 2019年12月10日 感谢 腾讯课堂NEXT学院 赞助本站,腾讯官方的前端课程 免费试学. 手机现在是互联网的最大入口.根据<中国互联网报告>,手机网民已经超过8亿,人均每天上网三个多小时. 毫不奇怪,手机应用软件(mobile application,简称 mobile App)的开发工程师供不应求,一