H5网页判断终端并唤起app
1.完成目标
通过打开一个h5 网页,这个h5 页面做一个中转(期间可能要拉接口,拉取后台配置的跳转页面url,比如跳转到一个活动页面),最后跳转对应app对应的界面中。
2.H5 网页嵌入app
现在很多app并不是所有的页面都是原生的,很多页面都是嵌入了H5的页面,这个就是App混合开发(hybrid app)。这样设计灵活,方便快速开发自己的产品,把一些经常改动的页面,比如活动页面嵌入app中,这个页面单独部署就好。就不需要app 发版,减少用户更新app的次数。
那么问题来了,网页如果跟APP的交互呢? webview,UIWebView。 如何去完成,这里不是小编的专长,推荐文章,有兴趣的童鞋可以看看,https://bxbxbai.github.io/2015/08/16/talk-about-bybird-app/ 。下面是在网页里如何唤起app的方法总结。
3.基于vue的h5 开发。
2.1 项目背景: vue-cli 脚手架生成的模板。
2.2 代码介绍
data:
data () { return { schemeUrl: '', appurl: '' } },
schemeUrl: 就是和APP约定的一个URL,在浏览器打开这个URL,继而打开我们的app 或者调到对应的下载页面
appurl: 对应是app里面的具体页面的。 这个也是和app 约定,和上面 schemeUrl进行拼接成最终我们想要跳转到app界面。
created:
created () { if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { this.ios = true } else if (/(Android)/i.test(navigator.userAgent)) { this.Android = true } else if (/MicroMessenger/i){ this.weixin = true } else { window.location.href = 'pc.html' } }
检查 navigator 里面具体的内容,判断设备是什么。
methods:
judgeMachine () { let IOSUrlDownload = 'https://itunes.apple.com/us/app/***' let AndroidUrlDownload = 'http://a.app.qq.com/o/simple.jsp?****' if (this.ios) { let loadDateTime = new Date() window.setTimeout(function () { let timeOutDateTime = new Date() if (timeOutDateTime - loadDateTime < 5000) { window.location.href = IOSUrlDownload } else { alert('对不起,暂时无法打开') } }, 25) window.location.href = this.schemeUrl } else if (this.Andriod) { let loadDateTime = new Date() window.location.href = this.schemeUrl window.setTimeout(function () { let timeOutDateTime = new Date() if (timeOutDateTime - loadDateTime < 5000) { window.location.href = AndroidUrlDownload } }, 1500) } else if (this.weixin) { window.wx.ready(function () { window.location.href = this.schemeUrl }) } }
上面方法的思路: 先跳转到对应的 schemeUrl,通过定时器来监测时间,一段时间内如果打开app了,那么就是有app的,没有打开则是没有app, 需要跳转到对应的下载页面,安卓的应用市场, iOS 的appstore。
注意: 在微信里面需要有一个微信的js, 不然会没有效果。微信js的引入可以查看上一篇文章 https://www.cnblogs.com/adouwt/p/9045881.html 。
本篇就是一个小应用,如果这方法还不够应用于生产,后期还会在追加修改代码。目前此方案,已经通过测试。
如果有不妥之处,敬请指出。
不吝赐教,thank U。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
我要做 Android 之单例模式
Q:实现单例模式有几种方法?懒汉式中双层锁的目的是什么?两次判空的目的又是什么? 懒汉式(线程不安全) 单例模式最后的目的无非就是获取当前存在的实例对象,如果没有实例对象就实例化一个,有就直接返回。所谓懒汉式,可以从名字进行理解,就是在你第一次使用这个实例之前我都(懒得)不去进行实例化,一直等到第一次需要使用到这个单例的地方再(迫不得已)实例化。 提到单例模式,大多数开发者会直接写出下面的代码: public class SingleTon { private static SingleTon instance; private SingleTon(){ } public static SingleTon getInstance(){ if (instance==null){ instance = new SingleTon(); } return instance; } } 而上面的代码也就是懒汉式的单例模式,只有在第一次调用了getInstance方法的地方才会对instance进行实例化。 这种单例模式的写法在单线程的时候没有问题,但需要注意的是,在 多线程的情况下,这种单例模式...
- 下一篇
Python全栈 Web(JavaScript 数组、string、正则、Math、Date)
数组: 常用的API: toString() 将数组转换为字符串 默认是将数组的元素 使用逗号隔开 链接成字符串在进行返回 join(seperator) 将数组的元素使用seperator字符串作为分隔符 链接成字符串再进行返回 reverse() 将数组进行反转 该函数会改变现有数组的结构 不需要接受返回值 sort() 对数组的元素进行排序 默认按照Unicode码进行排序 对数字不准确 会改变原有数组的内容 特点: 允许自定义的排序规则(排序函数)用来指定数组的排序方式 语法: arr.sort(排序函数); 排序函数: 升序的排序函数: function sortAsc(a, b){ return a - b; } arr.sort(sortAsc); 匿名函数实现: arr.sort(function(a, b){ return a - b; }) 降序排序: 排序后
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- Mario游戏-低调大师作品
- CentOS7安装Docker,走上虚拟化容器引擎之路
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- CentOS7,CentOS8安装Elasticsearch6.8.6
- SpringBoot2初体验,简单认识spring boot2并且搭建基础工程
- CentOS6,CentOS7官方镜像安装Oracle11G
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- 设置Eclipse缩进为4个空格,增强代码规范