1. 程式人生 > >微信h5頁面中跳轉外部瀏覽器下載APK的辦法

微信h5頁面中跳轉外部瀏覽器下載APK的辦法

pretty 直接 style 文件的 oca asc views 通過 pps

技術分享圖片

需求:在微信h5頁面中下載第三方app —— 安卓, 直接下載apk文件包;iphone,跳轉AppStore

分析:微信不支持,在微信中屏蔽了apk文件的下載以及AppStore的跳轉(且除非和TX有合作的應用,否則也不支持通過scheme跳轉第三方app)

技術分享圖片

變通方法:
一、借助TX的應用市場 --‘應用寶’:將app上架應用寶,在微信中點擊下載按鈕(app的應用寶微下載地址),安卓則可跳轉應用直接進行下載,iphone則會自動跳轉Appstore(需在TX開發平臺進行配置)
總結:雖然這種方法可以直接跳出微信並進行下載,但是需要用戶在應用寶中下載
二、在微信中生成遮罩層,然後指引用戶點擊微信中右上角的更多按鈕,選擇【在瀏覽器打開】(iphone為【在safari中打開】,下同)
總結:雖然這種方法需要用戶多操作一步,但貴在原生且不涉及第三方應用市場,本文主要講述的是這種方法(且在瀏覽器中打開後仿應用寶下載效果:安卓直接彈出apk下載框,iphone則直接跳轉AppStore,無需用戶再一次點擊下載按鈕
  • 主要代碼如下(H5頁面由vue構建):

1、識別手機類型

/* 判斷用戶手機為安卓還是iphone */
checkPhone () {
	let self = this
	let agent = (navigator.userAgent || navigator.vendor || window
.opera) if (agent != null) { let agentName = agent.toLowerCase() if (/android/i.test(agentName)) { self.isAndroid = true } else if (/iphone/i.test(agentName)) { self.isIOS = true } } }

2、識別微信環境

/* 判斷是否為微信環境 */
this.isWeiXin = navigator.userAgent.toLowerCase().indexOf(‘micromessenger‘
) > -1 ? true : false
  • 1
  • 2

3、點擊下載按鈕,顯示遮罩層,並為本H5頁面url地址上增加hash值‘download’(改變hash值並不會刷新頁面,但可讓瀏覽器識別),並指引用戶瀏覽器打開

/* 點擊下載按鈕 */
downloadApp () {
      // 微信環境
      let self = this
      self.checkPhone()
      let agent = (navigator.userAgent || navigator.vendor || window.opera)
      if (agent != null) {
        let agentName = agent.toLowerCase()
        // this.$alert({text: [agentName]})
        if (self.isAndroid) {
           // 微信環境
          if (self.isWeiXin) {
            self.downloadInWeixin = true
            window.location.hash = ‘download‘   // 改變hash,便於瀏覽器打開時直接下載安卓包
            return
          }
          // 安卓包下載地址
          window.location.href = config.androidDownloadUrl
        } else if (self.isIOS) {
           // 微信環境
          if (self.isWeiXin) {
            self.downloadInWeixin = true
            window.location.hash = ‘download‘    // 改變hash,便於瀏覽器打開時直接跳轉AppStore
            return
          }
          // 蘋果商店鏈接地址
          window.location.href = config.iosAppstoreUrl
        } else {
          this.$alert({text: [‘暫不支持,敬請期待~‘]})
        }
      }
    }

4、瀏覽器中打開加了hash的url地址,識別hash值,安卓直接彈出apk下載框,iphone則直接跳轉AppStore
重中之重:原來的H5頁面的url地址後面必須跟上‘#/’, 不然瀏覽器不會識別hash值,切記、切記、切記

identityHash () {
	if (window.location.hash.includes(‘download‘)) {
	      window.location.hash = ‘‘   //  還原hash為空
	      self.checkPhone()
	      if (self.isAndroid) {
	        // 安卓,彈出包下載頁面
	        window.location.href = config.androidDownloadUrl
	      } else if (self.isIOS) {
        // ios,直接跳轉Appstore
         window.location.href = config.linkToAppstore
      } else {
        this.$alert({text: [‘暫不支持,敬請期待~‘]})
      }
    }
}

微信h5頁面中跳轉外部瀏覽器下載APK的辦法