vue中h5端打开app(判断是安卓还是苹果)

1.开发环境 vue+vant

2.电脑系统 windows10专业版

3.在h5端开发的过程中,我们经常需要点击一个按钮来判断用户使用安装了app(首先判断是安卓还是苹果,然后判断是否安装了app,如果没有安装则跳转到下载页面,如果安装了则打开)。

4.废话不多说,直接上代码:

<div class="xiding-r" @click="openapp">
 Open APP
</div>

5.在methods中添加如下代码:

  openapp() {
  var u = navigator.userAgent,
   app = navigator.appVersion;
  var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
  var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  if (isAndroid) {
   // alert("我是安卓");
   this.android();
  }
  if (isIOS) {
   // alert("我是苹果");
  }
  },

android() {
  var _clickTime = new Date().getTime();
  window.location.href = 'zhihu://'; /***打开app的协议，有安卓同事提供***/

  //启动间隔20ms运行的定时器，并检测累计消耗时间是否超过3000ms，超过则结束
  var _count = 0, intHandle;
  intHandle = setInterval(function () {
   _count++;
   var elsTime = new Date().getTime() - _clickTime;
   if (_count >= 100 || elsTime > 5000) {
   console.log(_count)
   console.log(elsTime)
   clearInterval(intHandle);
   //检查app是否打开
   if (document.hidden || document.webkitHidden) {
    // 打开了
    window.location.href = "zhihu://";
    // alert('打开了');
    window.close();
    // return;
   } else {
    // 没打开
    // alert('没打开');
    window.location.href = "";//下载链接
   }
   }
  }, 20);
  },

5.注意:在这个案例中我是用的知乎的例子:

6.注意

使用Custom URL Scheme的好处就是,你可以在其他程序中通过这个url打开应用程序。如果A应用程序注册了一个 url scheme:myApp,那么就在mobile浏览器中就可以通过<a href ="myApp://">打开你的应用程序。请注意,IOS中如果系统注册了 url schemen且安装了那个应用程序,通过上面那种网页的方式就可以打开应用程序(亲测有效)。注意:IOS中不能注册为http://xxx这样的url scheme,而android是可以的。

到此这篇关于vue中h5端打开app(判断是安卓还是苹果)的文章就介绍到这了,更多相关vue中h5端打开app 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 微信通过页面(H5)直接打开本地app的解决方法

    微信通过页面(H5)直接打开本地app的解决方法

    简述 微信中通过页面直接打开app分为安卓版和IOS版,两个的实现方式是完全不同的. 安卓版实现:使用腾讯的应用宝,只要配置了"微下载"之后,打开链接腾讯会帮你判断本地是否已经安装了app,如果本地安装就直接打开,没有安装的话就是腾讯微下载的页面进行app下载,当然微下载的页面腾讯提供了几个模板,可以自己选择和修改. IOS实现:ios像直接点击链接打开本地app就难了,有两种方式可供我们选择: 1.腾讯深度合作的公司,微信可以帮你打开app: 2.使用IOS9+的新功能"U

  • app开发之原生开发、H5开发和混合开发的区别

    APP开发模式 目前市场上主流的APP分为三种: 原生APP Web APP(即HTML5) 混合APP 当然,还有flutter等 APP开发模式对比 1. 原生开发 原生开发(Native App开发),是在Android.IOS等移动平台上利用官方提供的开发语言.开发类库.开发工具进行App开发.比如Android是利用Java.Eclipse.Android studio:IOS是利用Objective-C 和Xcode进行开发. 优点: 可访问手机所有功能(如GPS.摄像头等).可实现

  • iOS APP实现微信H5支付示例总结

    微信H5支付流程 1.发起下单请求(调用统一下单接口)注:交易类型trade_type=MWEB 2.统一下单接口返回支付相关参数给商户后台,如支付跳转url(参数名"mweb_url"),商户通过mweb_url调起微信支付中间页.如:https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx27142704550165900edae5270331515985&package=600759311&

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

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

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

  • uniapp H5 https跨域请求实现

    uniapp H5 https跨域请求实现

    什么是跨域 跨域是浏览器的专用概念,指js代码访问自己来源站点之外的站点.比如A站点网页中的js代码,请求了B站点的数据,就是跨域. A和B要想被认为是同域,则必须有相同的协议(比如http和https就不行).相同域名.和相同端口号(port). 如果你是做App.小程序等非H5平台,是不涉及跨域问题的. 由于uni-app是标准的前后端分离模式,开发h5应用时如果前端代码和后端接口没有部署在同域服务器,就会被浏览器报跨域. 本文主要介绍uniapp H5开发中,本地调试https的接口实现跨

  • vue中h5端打开app(判断是安卓还是苹果)

    vue中h5端打开app(判断是安卓还是苹果)

    1.开发环境 vue+vant 2.电脑系统 windows10专业版 3.在h5端开发的过程中,我们经常需要点击一个按钮来判断用户使用安装了app(首先判断是安卓还是苹果,然后判断是否安装了app,如果没有安装则跳转到下载页面,如果安装了则打开). 4.废话不多说,直接上代码: <div class="xiding-r" @click="openapp"> Open APP </div> 5.在methods中添加如下代码: openapp

  • vue中PC端地址跳转移动端的操作方法

    需求:pc端和移动端是两个独立的项目,两个项目项目中的内容基本相同,链接组合的方式都有规律可循,接到的需求便是在移动端访问pc端的URL连接时,重定向至移动端对应页面. 这个需求实现的方式比较明了,我的大致思路是在路由守卫处监听每个进来的路由请求,分析该请求是否是由移动端访问,若不是,则该路由请求直接放行:若是则分析要进入的路由路径,提取路径中的必要字段,组合称新的移动端链接即可. 里面涉及到了三个知识点:1.路由守卫,2.客户端判断.3.正则提取文字,接下来就分别按照这几点讲解一下,并附上整个

  • vue中移动端调取本地的复制的文本方式

    我就废话不多说了,大家还是直接看代码吧~ _this.$vux.confirm.show({ title: '复制分享链接', content: '分享的内容', onConfirm() { // _this.$vux.toast.text('复制成功') let url = '分享的内容'; let oInput = document.createElement('input'); oInput.value = url; document.body.appendChild(oInput); o

  • 详解vue中移动端自适应方案

    方案1: 直接引入js  (自己 写的动态改变fontsize的js) function htRem() { var ww = document.documentElement.clientWidth; if (ww > 750) { ww = 750; } document.documentElement.style.fontSize = ww / 7.5 + "px"; } htRem(); window.onresize = function() { htRem(); };

  • vue中template模板编译的过程全面剖析

    vue中template模板编译的过程全面剖析

    目录 简述过程 vue的渲染过程 parse parse过程总结 generate生成render函数 简述过程 vue template模板编译的过程经过parse()生成ast(抽象语法树),optimize对静态节点优化,generate()生成render字符串 之后调用new Watcher()函数,用来监听数据的变化,render 函数就是数据监听的回调所调用的,其结果便是重新生成 vnode. 当这个 render 函数字符串在第一次 mount.或者绑定的数据更新的时候,都会被调

  • Vue的H5页面唤起支付宝支付功能

    目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付.下面介绍一下Vue中H5页面如何使用支付宝支付.其实很简单的,只不过是调自己后台的一个接口而已(后台根据支付宝文档,写好支付接口). 触发支付宝支付调用后台接口,后台会返回支付宝提供的form表单,我们只要在vue里面创建新节点,将返回的form表单append进去,并提交就可以唤起支付宝支付.另在此说一下这个 returnUrl , 它是支付后支付宝回调的页面.具体可以根据自身业务,后台写死或者由前端控制. methods () {

  • vue中elementUI里面一些插件的使用

    vue中elementUI里面一些插件的使用

    目录 全屏插件的引用 动态主题的设置 多语言实现 初始化多语言包 引入自定义语言包 封装多语言插件 总结 全屏插件的引用 全屏功能可以使用插件来实现 第一步,安装全局插件screenfull npm i screenfull@5.1.0 第二步,封装全屏显示的插件 ScreenFull/index.vue <template> <div> <!-- 放置一个按钮 --> <el-button class="icon" @click="

  • VUE使用 wx-open-launch-app 组件开发微信打开APP功能

    在微信中开发使用vue框架,通过 wx-open-launch-app 微信自定义注册组件开发 微信H5打开app功能 template <template> <div class="beva-home"> <!-- ===== 微信浏览器打开贝瓦APP ===== --> <div class="weixin-open-app" v-if="openAppState"> <img class

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

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

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

  • vue.js移动端app实战1：初始配置详解

    vue.js移动端app实战1：初始配置详解

    本系列将会用vue.js2制作一个移动端的webapp单页面,页面不多,大概在7,8个左右,不过麻雀虽小,五脏俱全,常用的效果如轮播图,下拉刷新,上拉加载,图片懒加载都会用到.css方面也会有一些描述,像不同分辨率的适配,flex布局以及scss来编写mixin来处理2x,3x图等. 初始工作: 通过vue-cli安装webpack模板后,会自动生成一大堆文件,通常我们只关心src/目录下的东西.  个人习惯在src下新建一个base目录,用来存放通用的css及js,比如样式重置css,一切js

随机推荐