H5网页怎么判断终端并唤起app

这篇文章主要讲解了“H5网页怎么判断终端并唤起app”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“H5网页怎么判断终端并唤起app”吧！

1.完成目标

　　通过打开一个h6 网页，这个h6 页面做一个中转（期间可能要拉接口，拉取后台配置的跳转页面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的方法总结。宁波男科医院http://www.jzspfk.com/

3.基于vue的h6 开发。

　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, 不然会没有效果。

感谢各位的阅读，以上就是“H5网页怎么判断终端并唤起app”的内容了，经过本文的学习后，相信大家对H5网页怎么判断终端并唤起app这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！