通过JS唤醒app(安卓+ios)
有需求说要通过页面按钮唤醒app,或者手机上没有这款app跳转到商店,然后刚开始也是查了资料的,结果发现一头雾水,不过最后还是捣鼓出来了,当然也参考了前人分享的经验,下面我就将方法整理一下:
首先明确一下目的,是要在分享出去的html页面,通过js操作唤醒app或者打开商店,那么第一步就应该先判断当前的环境,这里我附上详细的判断方法,通用的
var browser = {
versions: function() {
var u = navigator.userAgent,
app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1,
presto: u.indexOf('Presto') > -1,
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/),
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
iPhone: u.indexOf('iPhone') > -1,
iPad: u.indexOf('iPad') > -1,
webApp: u.indexOf('Safari') == -1,
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){
//你的代码
}
那么接下来就应该判断当前手机上是否有安装某款应用,但是要知道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。
通过JS唤醒app(安卓+ios)的更多相关文章
- 史上最简单JS复制功能,兼容安卓ios!
1.JS复制原理: 被复制内容的元素不能被其他元素遮盖,否则无效. (设置opacity透明为0,不可以设置display:none); 2.常规的复制方法 function copyUrl2() ...
- 手机浏览器_安卓_苹果手机Webview 中唤醒APP
Url scheme是iOS,Android平台都支持,只需要原生APP开发时注册scheme, 那么用户点击到此类链接时,会自动跳到APP.比如 <!-- 打开考拉APP首页 --> & ...
- iOS universallinks唤醒app
从iOS9之后,苹果就推出了这个功能,用来唤醒外部app.这个功能在那些电商app上使用尤其广泛,当你打开对应的h5网页后,上面跳出一个是否跳转app的按钮. 现在iOS11已经基本覆盖,iOS12也 ...
- ios下微信浏览器如何唤醒app?app已上架应用宝
android下可以通过在应用宝微下载地址后面加参数&android_schema='应用schema'来实现,ios下如何实现? ios下微信浏览器如何唤醒app?app已上架应用宝 > ...
- 利用ios safari浏览器生成桌面快捷方式并唤醒app的示例代码
html 内容: //通过a链接唤醒app <a href="app约定好的scheme" id="qbt" style="display:n ...
- H5唤醒app,第三方开源库
在微信浏览器内,安卓打开应用宝,ios跳进appstore,基本都可以成功在外部浏览器内,已安装可进入应用内,未安装进入应用宝提示下载,需客户端支持.<!DOCTYPE html> < ...
- js调用app启动页
第一步:添加js $(function () { var ua = window.navigator.userAgent.toLowerCase(); //微信 if(ua.match(/MicroM ...
- 从浏览器或者Webview 中唤醒APP
本文来自网易云社区 作者:刘新奇 移动互联时代,很多互联网服务都会同时具备网站以及移动客户端,很多人认为APP的能帮助建立更稳固的用户关系,于是经常会接到各种从浏览器.webview中唤醒APP的需求 ...
- H5网页唤醒app,判断app安装
在阅读本文之前你首先应该对js有基本对掌握,并且对Scheme,intent有一定的理解.更多的是代码 上午给朋友做了一个产品引导页,但是需要判断ios系统的TestFlight是否安装,进行了goo ...
随机推荐
- 《Linux Device Drivers》第八章 分配内存——note
本章主要介绍Linux内核的内存管理. kmalloc函数的内幕 不正确所获取的内存空间清零 分配的区域在物理内存中也是连续的 flags參数 <linux/slab.h> <lin ...
- ALSA声卡驱动中的DAPM详解之三:如何定义各种widget
上一节中,介绍了DAPM框架中几个重要的数据结构:snd_soc_dapm_widget,snd_soc_dapm_path,snd_soc_dapm_route.其中snd_soc_dapm_pat ...
- iOS-获取子视图父控制器
开发中有的时候需要涉及当前视图的父级视图,可以通过UIResponder来获取,有两种实现方式: UIView *next=sender; while ([next superview]) { nex ...
- mysql复制数据
前言:由于工作需要,我要造大量数据,最好的方法是直接copy已有的数据,改其中一些值即可.操作的表有主键,且自增,AUTO_INCREMENT 按照以往的经验无外乎: 类别一. 如果两张张表(导出表和 ...
- Sqoop 产生背景(一)
Sqoop 的产生主要源于: 1.目前很多使用hadoop技术的企业,有大量的数据存储在传统关系型数据库中. 2.早期由于工具的缺乏,hadoop与传统数据库之间的数据传输非常困难. 1)传统数据库中 ...
- springboot自定义常量配置
现在你建一个类: import org.springframework.boot.context.properties.ConfigurationProperties; /** * Created b ...
- mysql简单增删改查(CRUD)
先描述一下查看表中所有记录的语句以便查看所做的操作(以下所有语句建议自己敲,不要复制以免出错): user表,字段有 id, name,age,sex:id为主键,自增,插入时可以写 NULL 或者 ...
- iOS动画——DynamicAnimate
力学动画 以dynamicAnimate为首的力学动画是苹果在iOS7加入的API,里面包含了很多力学行为,这套API是基于Box2d实现的.其中包含了重力.碰撞.推.甩.和自定义行为. 涉及到的类如 ...
- CSS实现两栏布局
写在前面 两栏布局是指页面布局由主栏和边栏组成,是许多网页的布局方式,一般使用CSS去实现两栏布局. 实现两栏布局的方式有多种,这里采用四种比较常见的实现方式.主要是流体布局(liquid layou ...
- DataTable And DataRow
/// <summary> /// 将DataTable的字段名全部翻译为中文 /// </summary> /// <param name="table&qu ...