实现“用App打开”功能（从网站跳转到App）

用App打开

最近项目中涉及到了这个功能，拿到需求时候让我这个小白一脸懵逼，好在看了看博客后还是实现了。

涉及到的逻辑：

1. 判断当前环境 ；
2. 根据不同的环境进行跳转到 “下载” 或者直接 “打开应用” ；
3. 当前是 微信中 打开的话，需要进行额外的操作（下面会有详细写）；

代码

• 主要代码

  openApp: function (param) {
    var localUrl = this.createScheme(param)
    var openIframe = this.createIfream()
    if (this.isMobile()) {
      if (!this.isWeChat()) {
        if (this.isIos()) {
          window.location.href = localUrl
          var loadDateTime = Date.now()
          setTimeout(() => {
            var timeOutDateTime = Date.now()
            if (timeOutDateTime - loadDateTime < 1000) {
              // ios下载地址
              window.location.href = this.DOWNLOAD_URL
            }
          }, 25)
        } else if (this.isAndroid()) {
          if (this.isChrome()) {
            // chrome浏览器用iframe打不开得直接去打开
            window.location.href = localUrl
          } else {
            // 抛出你的scheme
            openIframe.src = localUrl
          }
          setTimeout(() => {
            // 安卓下载地址
            window.location.href = this.DOWNLOAD_URL
          }, 500)
        } else {
          // winphone
          openIframe.src = localUrl
          setTimeout(() => {
            // win phone 下载地址
            window.location.href = this.DOWNLOAD_URL
          }, 500)
        }
      } else {
        // 当前是微信，路由跳转到步骤指引页面（右上角选择浏览器打开的那个页面）
        // 下面详细讲
        window.location.href = `/#/***?id=${param.id}`
      }
    } else {
      window.open(this.DOWNLOAD_URL)
    }
  }

• 生成新的iframe，用于打开应用

  createIfream: function () {
    var iframe
    return function () {
      if (iframe) {
        return iframe
      } else {
        iframe = document.createElement('iframe')
        iframe.style.display = 'none'
        iframe.classList.add('iframe')
        document.body.appendChild(iframe)
        return iframe
      }
    }
  },

• 拼接打开应用的命令（地址），需要和app端协议好

  // 格式：***://***?id=**
  createScheme: function (options) {
    return urlScheme = `${this.baseScheme}://${options.routeName}?id=${options.id}`
  },

• 各种环境判断代码

isIos: function () {
    let u = navigator.userAgent
    let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1
    let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
    if (isAndroid) {
      return false
    }
    if (isIOS) {
      return true
    }
  },
  isChrome: function () {
    let userAgentInfo = navigator.userAgent
    let flag = false
    if (userAgentInfo.indexOf('Chrome') > 0) {
      flag = true
    }
    return flag
  },
  isAndroid: function () {
   // 百度一下，您就知道
   // 其实是这个没写...
    return true
  },
  isMobile: function (params) {
    var userAgentInfo = navigator.userAgent
    var Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']
    var flag = false
    for (var v = 0; v < Agents.length; v++) {
      if (userAgentInfo.indexOf(Agents[v]) > 0) {
        flag = true
        break
      }
    }
    return flag
  },
  isWeChat: function () {
    var ua = navigator.userAgent.toLowerCase()
    var isWeixin = ua.indexOf('micromessenger') !== -1
    if (isWeixin) {
      return true
    } else {
      return false
    }
  }

整个打开逻辑的代码就是这些了

在微信中打开的逻辑

1. 目标页面显示在微信的浏览器中
2. 点击“打开App”
3. 跳转路由，到指引页面
4. 指引页面中选择用浏览器查看
5. 浏览器打开目标页面
6. 再次点击“打开App”
7. 启动App，进入目标页面

• 指引页面代码

 created () {
    // 当前在非微信浏览器中打开，说明已经选择过在浏览器中打开，此时需要在新的浏览器页面显示详情页
    if (!this.isWeChat()) {
      const {id} = this.$route.query
      this.$router.push({name: '***', query: {id, mediaType}})
    }
  },

参考

跳转方法：https://blog.csdn.net/nickroprak/article/details/79925415
环境判断：https://www.cnblogs.com/zhuchenglin/p/7528250.html