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這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！