移动端H5唤起APP的写法实例（IOS、android）

IOS

1.url scheme

这个方案基本上就是针对微信、qq内置浏览器，qq浏览器等之外的其余浏览器，从native那边要一个scheme ，然后放在a标签里或者location.href跳一下就行了

用一个iframe去做的一个跳页，有的话唤起scheme没有的话，会触发定时器跳到下载地址。但是这个方式在ios里面，在没有app的时候会遇到两次提示，

 var openApp = function (src) {
        // 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为
        // 否则打开a标签的href链接
        const ifr = document.createElement('iframe');
        ifr.src = src;
        ifr.style.display = 'none';
        document.body.appendChild(ifr);
        var poenTime = +new Date()
        window.setTimeout(() => {
          document.body.removeChild(ifr);
          if ((+new Date()-openTime>2500)){
            window.location = 'APP Store下载的地址 '
          }
        }, 600);
      };

2.Universal Link（ios）

这是iOS9推出的一项功能，如果你的应用支持Universal Links(通用链接)，那么就能够方便的通过传统的HTTP链接来启动APP(如果iOS设备上已经安装了你的app，不需要额外做任何判断等)，或者打开网页(iOS设备上没有安装你的app)。或许可以更简单点来说明，在iOS9之前，对于从各种从浏览器，Safari、UIWebView或者 WKWebView中唤醒APP的需求，我们通常只能使用scheme。

window.location.href ="APP给的Universal Link"

总结

兼容写法

if (isGreaterThan9){
   window.location.href ="APP给的Universal Link" ;
   return;
}
openApp(src)

android

方法类似

 if (openApp('url scheme url')) {
            openApp('url scheme url');
          } else {
            setTimeout(() => {
              window.location.href = 'APP 市场下载地址';// 一般是google, 各个应用商店不一样
            }, 600);
          }
      }

总结

到此这篇关于移动端H5唤起APP的文章就介绍到这了,更多相关移动端H5唤起APP内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • H5唤醒APP实现方法及注意点总结

    H5唤醒APP实现方法及注意点总结

    目录 前言 跳转APP方式 URL Scheme meta标签 Universal Links 各种方式的使用 URL Scheme使用 meta标签使用 Universal Links使用 总结 实现唤醒APP功能 提示浏览器打开 实现判断头部APP的功能 唤醒APP的核心方法 openApp的实现 jumpApp的实现 noApp的实现 总结 前言 作为前端开发人员经常会有这样的需求,如果某个用户安装了自己的APP就打开APP首页或则指定页面,如果没有安装APP就跳转到相应下载页面.这样的一

  • 移动端H5唤起APP的写法实例（IOS、android）

    IOS 1.url scheme 这个方案基本上就是针对微信.qq内置浏览器,qq浏览器等之外的其余浏览器,从native那边要一个scheme ,然后放在a标签里或者location.href跳一下就行了 用一个iframe去做的一个跳页,有的话唤起scheme没有的话,会触发定时器跳到下载地址.但是这个方式在ios里面,在没有app的时候会遇到两次提示, var openApp = function (src) { // 通过iframe的方式试图打开APP,如果能正常打开,会直接切换到AP

  • js 简易版滚动条实例(适用于移动端H5开发)

    废话不多说,直接上代码 <!DOCTYPE html> <html> <head> <title>滑动条</title> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" conte

  • php 服务端集成支付宝APP支付实例

    支付宝支付分为了很多种场景,这里只讲述支付宝APP支付功能集成,期间遇到了特别大的坑,因此我简单描述下集成过程,并概述遇到的问题及解决方案 由于公司业务简单,只支持支付宝支付,而无需关心退款,查询等等额外功能,因此该篇内容仅仅讲述支付宝支付接口时服务端如何准备APP拉取支付订单的信息,大概流程如下 一.创建应用及配置 首先,需要到蚂蚁金服开发平台(open.alipay.com)注册应用,并获取应用ID,并配置应用,这里在配置时主要是签约,生成应用的RSA2公私钥,同时获取到支付宝提供的支付公钥

  • Django实现web端tailf日志文件功能及实例详解

    这是Django Channels系列文章的第二篇,以web端实现tailf的案例讲解Channels的具体使用以及跟Celery的结合 通过上一篇 <Django使用Channels实现WebSocket--上篇> 的学习应该对Channels的各种概念有了清晰的认知,可以顺利的将Channels框架集成到自己的Django项目中实现WebSocket了,本篇文章将以一个Channels+Celery实现web端tailf功能的例子更加深入的介绍Channels 先说下我们要实现的目标:所有

  • 详解搭建一个vue-cli的移动端H5开发模板

    简介 vue-mobile 是是基于 vue-cli 实现的移动端 H5 开发模板,其中已经搭建好基本的开发框架,可帮助您实现快速开发. 技术栈:vue + vux + axios + less 源码地址:https://github.com/Michael-lzg/vue-mobile 功能 搭建项目目录 配置 css 预处理器 配置 UI 组件库 vux 解决移动端适配 配置页面路由缓存 axios 请求封装 工具类函数封装 toast 组件封装 dialog 组件封装 底部导航组件封装 列

  • vue实现移动端H5数字键盘组件使用详解

    本文实例为大家分享了vue实现移动端H5数字键盘组件的使用代码,供大家参考,具体内容如下 我们平时扫码付款的时候,经常会输入一些数字进行付款,仔细看了下键盘和系统的键盘有点不一样,于是今天买甘蔗的时候扫码付款就想了一下要怎么去实现一个.话不多说,直接上代码. 结果如下: 代码如下: <template> <div class="keyboard-wrapper"> <input type="text" v-model="NUM

  • vue开发移动端h5环境搭建的全过程

    vue开发移动端h5环境搭建的全过程

    目录 技术选型 环境搭建 引入库 配置环境 运行 网络封装 结语 补充 总结 技术选型 公司现在需要开发移动端的h5,使用现在比较流行的vue 2.0开发,使用的脚手架是Vant2,网络访问使用的是axios,路由跳转使用的是vue-router,开发工具是vscode,作为一个安卓开发程序员,对vue是不熟悉的,好在把环境搭建起来了,通过博客记录一下 Vant 2 vue cli vue vue中使用axios最详细教程 vue router 环境搭建 引入库 我这里已经安装好了nodejs,

  • JS移动端/H5同时选择多张图片上传并使用canvas压缩图片

    最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候的想法是如果给file表单加了 multiple 属性就没有办法调用手机的摄像头拍照了,如果不加,就无法同时选择多张图片,于是我就照实跟同事说了这个情况.但回头一想,单张图片可以上传,那多张图片呢?于是就有了本文的内容. HTML5定义了 FileReader 作为文件 API 的重要成员用于读取文

  • 移动端滑动切换组件封装 vue-swiper-router实例详解

    移动端滑动切换组件封装 vue-swiper-router实例详解

    具体代码如下所述: <strong>组件部分</strong> <template> <div class="main"> <div class="page-tab"> <div :class="nowPath == item.path ? 'tab-item tab-item_active' : 'tab-item'" v-for='(item, index) in tabLis

  • Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例

    引言 在与实现了语音合成.语义分析.机器翻译等算法的后端交互时,页面可以设计成更为人性化.亲切的方式.我们采用类似于聊天对话的实现,效果如下: 智能客服(输入文本,返回引擎处理后的文本结果) 语音合成(输入文本,返回文本以及合成的音频) 如上图所示,返回文本后,再返回合成出的音频. 音频按钮嵌在对话气泡中,可以点击播放. 语音识别(在页面录制语音发送,页面实时展示识别出的文本结果) 实现功能及技术要点 1.基于WebSocket实现对话流 页面与后端的交互是实时互动的,所以采用WebSocket

随机推荐