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。