微信h5頁面中跳轉外部瀏覽器下載APK的辦法
阿新 • • 發佈:2019-01-26
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的辦法