产品需求:分享出去的链接比如到微信朋友圈,微博的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. Win2D 官方文章系列翻译 - DPI (每英寸点数)和 DIPs(设备独立像素)

    本文为个人博客备份文章,原文地址: http://validvoid.net/win2d-dpi-dips/ 本文旨在解释物理像素与设备独立像素(DIPs, device independent pi ...

  2. Android7.0 Phone应用源码分析(一) phone拨号流程分析

    1.1 dialer拨号 拨号盘点击拨号DialpadFragment的onClick方法会被调用 public void onClick(View view) { int resId = view. ...

  3. 《FPGA全程进阶---实战演练》第二十一章 电源常用类型:LDO和 DCDC

    高速电路中的电源设计 高速电路中的电源设计大概分为两种,一种是集总式架构,一种是分布式架构.集总式架构就是由一个电源输入,然后生成多种所需要的电压.如图1所示.这种架构会增加多个DC/DC模块,这样成 ...

  4. FusionCharts for Flex报错

    1.昨天,我新建了一个Flex项目,并将FusionCharts组件添加进去了,但是Flex应用程序还是报错 具体错误如下: 2.但是,Flex项目已经导入FusionCharts.swc

  5. 在xargx命令中如何使用重定向

    ls *.txt | xargs -i -n 1 sh -c "cut -f 1-3 {} > ../{}"即可

  6. 利用SecondaryNameNode文件恢复Namenode-实践可行

    二. namenode故障恢复(importCheckpoint) *注意事项: (1) 为了便于将随便一台datanode临时用作namenode,datanode和namenode配置需要一模一样 ...

  7. BochsDebug

    Bochs User Manual   Chapter 8. Tips and Techniques   8.12. Using Bochs internal debugger Note, if yo ...

  8. JavaScript中this详解

    这里的主题是 this ,不扯远了.this 本身原本很简单,总是指向类的当前实例,this 不能赋值.这前提是说 this 不能脱离 类/对象 来说,也就是说 this 是面向对象语言里常见的一个关 ...

  9. IOS多线程(一)

    一.绪论 1.进程:平时看到的一个应用程序,即可算作一个线程. 每个进程都有一个PID作为进程ID,有一个Process Name作为进程名字等. 2.线程:一个进程可以有多个线程,而每个线程只可属于 ...

  10. subpage和secondary page的区别

    Hi,  Can you tell me the differences between subpage and secondary  page and when to use which ? I n ...