文章目录
- 项目需求
- 开发
- web官网下载页的开发
- web官网地址生成下载二维码
项目需求
- 公司要做一个web官网的下载页面,功能是微信扫码可以直接下载Ios手机端app、Android手机端app、及电脑端可以下载windows的桌面端应用程序
- 下载页面的官网地址,会在其余端生成一个二维码,在手机端微信打开二维码时可以直接辨别手机型号去下载对应的手机app。如果有app则直接跳转到app的内部
开发
web页面显示
web官网下载页的开发
- 这个比较简单,请求后台接口,接口返回Android以及ios的下载地址链接,前端使用qrcodejs2将下载地址链接生成二维码。
- 这时微信扫码就可以进行下载
web官网地址生成下载二维码
- 所有端的手机都可以扫这个二维码进行下载。
- 先判断是否是从该二维码扫码进入的,http://192.168.3.101:80/web/#/download?type=screen在地址中加type类型
- 在mounted中判断是否有type,如果有type,则直接去判断扫码的手机类型
mounted() {
if (this.$route.query.type) {
this.visibleMask = true
this.typeQuery = this.$route.query.type
this.getAndroidJI()
}
},
methods: {
// 判断判断客户端是否是iOS或者Android
getAndroidJI() {
const ran = navigator.userAgent
const isAndroid = ran.indexOf('Android') > -1 || ran.indexOf('Linux') > -1
const isIOS = !!ran.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
//判断是否是微信环境
if (this.isWeixin()) {
if (isAndroid) {
// Android手机
this.maskValue = '请在浏览器中打开'
} else {
try {
//ios
window.location.replace('http://apps.apple/cn/app/id387682726')
} catch (error) {}
}
} else {
this.visibleMask = false
if (isAndroid) {
this.explorer = true
}
if (isIOS) {
try {
window.location.replace('http://apps.apple/cn/app/id387682726')
} catch (error) {}
}
}
},
// 判断是否是微信客户端
isWeixin() {
var ua = window.navigator.userAgent.toLowerCase()
if (ua.match(/MicroMessenger/i) == 'micromessenger' || ua.match(/_SQ_/i) == '_sq_') {
return true
} else {
return false
}
},
// 判断是否电脑端
IsPC() {
var userAgentInfo = navigator.userAgent
var Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']
var flag = true
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false
break
}
}
return flag
}
}
- 安卓微信扫码
- 安卓点击右上角的浏览器中打开
- 此时点击下载时
<div @click="onNavigationApp" class="button" v-if="explorer">立即下载</div>
onNavigationApp() {
// 点击时,会先跳转android的scheme链接,该链接会自动打开app,如果有安装app的话。如果跳转失败,会走catch去下载app,scheme链接需要手动点击去调用
try {
window.location.href = 'android://的scheme地址,这个地址安卓开发人员提供'
} catch (error) {}
setTimeout(() => {
window.location.replace(this.androidUrl)
}, 1500)
},
- 当手机有此app时
- 没有此app时
- ios微信扫码
更多推荐
vue生成app二维码,并扫码下载app
发布评论