产品需求:分享出去的链接比如到微信朋友圈,微博的H5页面,添加一个按钮 open App 用来打开并启动自己公司的APP (如果当前手机已经安装自己公司的APP)

废话少说直接上代码:

<input type="button" value="从APP打开" onClick="openApp();">

<script language="javascript">
function openApp(){
var schemeUrl = 'app里即有的协议如: apps custom url schemes ';
if (navigator.userAgent.match(/(iPhone|iPod|iPad)/i)) {
var loadDateTime = new Date();
window.setTimeout(function() {
var timeOutDateTime = new Date();
if (timeOutDateTime - loadDateTime < 5000) {
   window.location.href = '没安装APP时要跳转的链接';
} else {
alert('无法打开');
}
},25);
window.location.href = schemeUrl;
} else if (navigator.userAgent.match(/android/i)) {
var state = null;
try {
state = window.open(schemeUrl, '_blank');
} catch(e) {}
if (state) {
alert('无法打开');
window.close();
} else {
window.location.href = '没安装APP时要跳转的链接';
}
}
}
</script>

apps custom url schemes 是什么呢?
其实就是你与APP约定的一个协议URL,你的IOS同事或Android同事在写程序的时候会设置一个URL Scheme,

例如设置: URL Scheme :app
然后其他的程序就可以通过   URLString = app:// 调用该应用。

还可以传参数,如:app://reaction/?uid=1
原理:500ms内,本机有应用程序能解析这个协议并打开程序,调用该应用;如果本机没有应用程序能解析该协议或者500ms内没有打开这个程序,则执行setTimeout里面的function,就是跳转到你想跳转的页面。

WebApp JS 打开 app的更多相关文章

  1. js 打开app应用,如果没有安装就去下载

    废话不多说,直接上代码 var APPCommon = { iphoneSchema: 'XingboTV://', iphoneDownUrl: 'https://itunes.apple.com/ ...

  2. 通过JS唤醒app(安卓+ios)

    有需求说要通过页面按钮唤醒app,或者手机上没有这款app跳转到商店,然后刚开始也是查了资料的,结果发现一头雾水,不过最后还是捣鼓出来了,当然也参考了前人分享的经验,下面我就将方法整理一下: 首先明确 ...

  3. 微信扫描打开APP下载链接提示代码优化

    上一次我发了一篇文章叫“微信打开网址添加在浏览器中打开提示”,里面我发出来了三个代码,分别是纯JS.js+html.jQuery+HTML代码.今天来一个简化版带可以关闭的按钮操作.使用的是纯JS+H ...

  4. 微信扫描打开APP下载链接提示代码优化(转)

    上一次我发了一篇文章叫“微信打开网址添加在浏览器中打开提示”,里面我发出来了三个代码,分别是纯JS.js+html.jQuery+HTML代码.今天来一个简化版带可以关闭的按钮操作.使用的是纯JS+H ...

  5. 实现微信浏览器内打开App Store链接(已被和谐,失效了)

    微信浏览器是不支持打开App Store 页面的,不知道微信为什么这么做.比如你页面写 <a href=”http://itunes.apple.com/us/app/id399608199″& ...

  6. webapp检测安卓app是否安装并launch

    1. cordova插件 1)查看所有已安装的安卓app https://www.npmjs.com/package/cordova-plugin-packagemanager A simple pl ...

  7. WebApp与Native App有何区别

    转:http://blog.sina.com.cn/s/blog_5f2df1e401018hjj.html 今天看的一篇关于html5的Web App与Native App的技术分析,真的很棒分享一 ...

  8. JS调用App方法及App调用JS方法

    做App内嵌H5项目时,经常会遇到js与App的交互,最普遍的就是方法的互相调用,那么如何实现方法的互相调用呢? 写在前面: 如果只是小项目且后期扩大的可能性不大的时候,可以忽略,可如果是长期项目的话 ...

  9. 关于Vue中main.js,App.vue,index.html之间关系进行总结

    在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,我们从培训视频或者官方文档上可以了解到: index.html---主页,项目入口 App. ...

随机推荐

  1. MATLAB 实用函数

    MATLAB个人工具箱(MATLAB) mymail.m 可以利用MATLAB发送邮件(支持附件和群发),非常实用的函数,适用于:耗时很长的脚本完成后通知作者:外加定时器后用于信息推送:家庭监视器紧急 ...

  2. 三方框架之masonry

    这个详细的介绍:http://www.cocoachina.com/ios/20141219/10702.html Masonry 源码:https://github.com/Masonry/Maso ...

  3. NULL值比较,两个列的合并,列值按条件替换。

    show create table 表名 -- 显示创建表的sql语句. 为已有的表增加新列.alter table 表名 add 列名 int NULL -- 此行加了一个int 类型 默认可以nu ...

  4. JS常用的设计模式(16)—— 享元模式

    享元模式主要用来减少程序所需的对象个数. 有一个例子, 我们这边的前端同学几乎人手一本<JavaScript权威指南>. 从省钱的角度讲, 大约三本就够了. 放在部门的书柜里, 谁需要看的 ...

  5. Overcome the Dilemma of "unlock" and "trust"

    When examining an Android phone, we have to overcome some barriers first so that we could extract da ...

  6. leetcode 104

    104. Maximum Depth of Binary Tree Given a binary tree, find its maximum depth. The maximum depth is ...

  7. 银行ATM机工作流程模拟编程(代码)

    #include<stdio.h>#include<stdlib.h>#include <conio.h>#include <string.h> voi ...

  8. UIButton设置imgae图片自适应button的大小且不变形

    在某些情况下,我们使用的UIButton的背景图片不一定就是标准的尺寸,有时会偏大,那么怎么办? 这个比较简单直接设置 :    self.imageView.contentMode = UIView ...

  9. 通过Migration在EF6中用多个DbContext

    通过Migration在EF6中用多个DbContext EF EF6 C# Migration 通过Migration在EF6中用多个DbContext 前言 实现目标 设置多数据上下文 更新数据脚 ...

  10. MAC OS下免费下载YouTube

    YouTube上有很多不错的视频,你感兴趣的视频除了可以加入自己播放列表之外,还可以将其下载到本地收藏起来.推荐这款软件“Xilisoft Download YouTube Video for Mac ...