微信h5頁面中跳轉下載第三方app的辦法
阿新 • • 發佈:2019-01-14
mes 上架 自動 代碼 col views ide app上架 hash
需求:在微信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 } } }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
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: [‘暫不支持,敬請期待~‘]}) } } }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
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: [‘暫不支持,敬請期待~‘]})
}
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
微信h5頁面中跳轉下載第三方app的辦法