vue扫码下载app，并区分安卓和ios

由于微信扫码，并不能识别apk文件，所以先做一个前置页，把这个前置页做成二维码，我是用草料二维码生成器的，很方便。

下面贴一下前置页AppDownload.vue代码


<template><div class="guide-wrap" v-show="guideShow">app下载</div>
</template>
<script >
export default {name: 'AppDownload',data() {return {guideShow:false,userAgent: navigator.userAgent.toLowerCase()}},created() {if (this.isWeChatOrQQ(this.userAgent)) {// 是微信或者QQ，使页面变为引导页，引导用户在浏览器中打开该链接this.guideShow = true} else if (this.isAndroid(this.userAgent) || this.isHuaWei(this.userAgent)) {//直接跳转app下载页面this.$router.push('/download')} else if (this.isIOS(this.userAgent)) {//直接跳转app下载页面this.$router.push('/download')} else {// alert('无法判断终端操作系统类型')document.write('userAgent: \t', this.userAgent)}},methods: {isIOS() {return !!this.userAgent.match(/\(i[^;]+;( U;)? cpu.+mac os x/)},isAndroid() {return this.userAgent.indexOf('android') > -1 || this.userAgent.indexOf('linux') > -1},isHuaWei() {return !!(this.userAgent.indexOf('windows nt') > -1)},isWeChatOrQQ() {const ua = this.userAgent.toLowerCase()if (ua.indexOf('micromessenger') > -1) {// 如果是微信return true} else if (/mqqbrowser[\S|\s]*qq/.test(ua) || / qq/.test(ua)) {// 如果是QQreturn true}return false},async downloadFile(url, fileName) {await fetch(url, {method: 'Get',mode: 'cors',headers: {},responseType: 'blob'}).then((response) => {response.blob().then(blob => {if (window.navigator.msSaveOrOpenBlob) {navigator.msSaveBlob(blob, fileName)} else {var link = document.createElement('a')link.href = window.URL.createObjectURL(blob)link.download = fileNamelink.click()window.URL.revokeObjectURL(link.href)}})})}}
}
</script>
<style type="text/css">body, div, span, i {font-size: 100%;box-sizing: border-box;}.guide-wrap {position: fixed;top: 0;bottom: 0;left: 0;right: 0;background: white;}.guide-item {display: block;background: #fff;}.guide-text {width: 15rem;position: absolute;top: 10%;left: 60%;transform: translate(-50%, -50%);padding: 0.4rem 1rem;border-radius: 5rem;border-top-right-radius: 1rem;overflow: hidden;}.gudde-btn {width: 10rem;text-align: center;position: absolute;bottom: 10%;left: 50%;transform: translate(-50%, 0%);padding: 0.4rem 1rem;border-radius: 5rem;overflow: hidden;}@keyframes fade {from {top: 0;}to {top: 100vh;}}@-webkit-keyframes fade {from {top: 0;}to {top: 100vh;}}.wrap-fade {animation: fade 3s ease-in;}
</style>

把这个前置页生成二维码后，扫描这个二维码，就会跳到下载页。下面就是下载页download.vue代码


<template><div class="downloadwrap"><div style="text-align: center;padding-top: 35%"></div><div class="downloadbtn" @click="download">下载App</div></div>
</template>
<script>
export default {name: 'download',methods: {download() {var browser = {versions: function() {var u = navigator.userAgent, app = navigator.appVersion;return {trident: u.indexOf('Trident') > -1, //IE内核presto: u.indexOf('Presto') > -1, //opera内核webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器iPad: u.indexOf('iPad') > -1, //是否iPadwebApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部};}(),language: (navigator.browserLanguage || navigator.language).toLowerCase()}if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) {//判断是IOS后跳转到相应的链接window.location.href = 'xxxxxxxx'}else if (browser.versions.android) {//判断是android后跳转到相应的链接window.open('')}}}
}
</script>
<style type="text/css">body, div, span, i {font-size: 100%;box-sizing: border-box;}@keyframes fade {from {top: 0;}to {top: 100vh;}}@-webkit-keyframes fade {from {top: 0;}to {top: 100vh;}}.downloadbtn{width: 260px;height: 40px;line-height: 40px !important;color: white;background: linear-gradient(270deg,#37a0ff, #2b6eef);text-align: center;font-size: 0.6rem;line-height: 1rem;margin: 15% auto;border-radius: 0.2rem;}
</style>

我这里跳转地址就是下载地址，如果是后端返回的再修改下就好了。其实大部分代码都是借鉴的，自己总结一下知识点。

vue扫码下载app，并区分安卓和ios相关推荐

vue扫码下载APP安装包
把appDownload.vue地址生成二维码即可临时跳转页 appDownload.vue <template><div class="guide-wrap" ...
微信扫码下载APP（带有蒙层）
微信扫码下载APP APP下载 <div class="photo" id="photo"><div class="buttonTo ...
微信扫码下载app的前端界面代码
下载app二维码扫码下载,当用户微信扫码下载时微信不能直接下载应用,所以做了一个过渡界面给用户来交互响应.效果图如下图: html的源代码如下. <!DOCTYPE html> < ...
java实现二维码扫码下载APP
1.需要的组件 /** * 生成二维码(QRCode)图片的公共方法 * @param content 存储内容 * @param imgType 图片类型 ...
vue生成app二维码，并扫码下载app
文章目录项目需求开发 web官网下载页的开发 web官网地址生成下载二维码项目需求公司要做一个web官网的下载页面,功能是微信扫码可以直接下载Ios手机端app.Android手机端app.及 ...
Vue实现路径转二维码，并用手机扫码下载APP
目录 1.安装qrcodejs2插件 2. 页面中引入 3.页面中填充 4.页面中调用 5.完整代码 6.最终效果今天,组长让我做一下扫二维码就可以下载APP的一个功能,也参考了网上其他技术大佬的一 ...
flutter 双端扫码下载app
需求:将android和ios下载路径合并到一个二维码里面,当android或ios设备扫描该二维码会跳转到相对应的链接进行下载解决方案 1:使用编写html代码生成html文件,名称为qrcode ...
Java实现扫码二维码下载app流程
1.先生成一个二维码(二维码里面包含了下载的地址信息,推荐用二维码里面包含是过滤器网站,安全),在草料网https://cli.im/ 进行生成,这里我们生成网址 2.生成后就可以下载,然后放到你的网 ...
二维码和app扫码下载
文章目录二维码基本原理二级码生成在线二维码生成 java代码生成二维码前端二维码生成 app扫码下载二维码基本原理参考: https://cli.im/help/48235 二维条码是指在 ...

vue扫码下载app，并区分安卓和ios

vue扫码下载app，并区分安卓和ios相关推荐

最新文章

热门文章