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。

上一篇:nginx,作为前端的你会多少?


下一篇:Fabric链码及应用快速开发工具箱【Go/Java/JavaScript】