vue扫码下载APP安装包

把appDownload.vue地址生成二维码即可

临时跳转页 appDownload.vue


<template><div class="guide-wrap" v-show="guideShow"><img src="@/assets/images/downloadapp/openinbrowser.png"/></div>
</template>
<script>export default {name: 'AppDownload',components: {},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: 38%"><img src="@/assets/images/downloadapp/bim+logo.png"/></div><div class="downloadbtn" @click="download">下载App</div></div>
</template>
<script>
import { latest } from '@/api/appDownload'export default {name: 'AppDownload',components: {},data() {return {baseUrl: '',// iosItemService: 'itms-services://?action=download-manifest&url=',// iosPlist: 'static/app-download-helper/tzmIos.plist',// androidFileName: 'static/app-download-helper/app/com.bonc.tzs.app_3.1.0.apk',iosItemService: '',iosPlist: '',androidFile: '',androidFileName: '',userAgent: navigator.userAgent.toLowerCase()}},created(){//用于调用后端接口获取app包信息。this.getLatest();},methods: {download(){console.log(this.isAndroid(this.userAgent))if (this.isAndroid(this.userAgent) || this.isHuaWei(this.userAgent)) {window.open(this.androidFile)} else if (this.isIOS(this.userAgent)) {//TODO ios跳转APP STORE应用商店下载window.location.replace(iosItemService + baseUrl + iosPlist)} else {// alert('无法判断终端操作系统类型')document.write('userAgent: \t', this.userAgent)}},async getLatest() {const result = await latest()if (result.code === 10000) {console.log(result.data.downloadLink)this.androidFile = result.data.downloadLinkthis.androidFileName = result.data.fileUrlList[0].name}},getIOS() {console.log('下载ios安装包')window.open(this.iosItemService + this.baseUrl + this.iosPlist)},getAndroid() {console.log('下载android安装包')// window.open(this.androidFile, '_blank')this.downloadFile(this.androidFile, this.androidFileName)},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;}@keyframes fade {from {top: 0;}to {top: 100vh;}}@-webkit-keyframes fade {from {top: 0;}to {top: 100vh;}}.downloadwrap{background-image: url("./assets/images/downloadapp/bimbg2.png");background-repeat: no-repeat;background-size: 100%;}.downloadbtn{width: 260px;height: 40px;color: white;background: linear-gradient(270deg,#37a0ff, #2b6eef);text-align: center;font-size: 0.4rem;line-height: 1rem;margin: 15% auto;border-radius: 0.2rem;}
</style>

vue扫码下载APP安装包相关推荐

vue扫码下载app，并区分安卓和ios
由于微信扫码,并不能识别apk文件,所以先做一个前置页,把这个前置页做成二维码,我是用草料二维码生成器的,很方便. 下面贴一下前置页AppDownload.vue代码 <template> ...
微信扫码下载APP（带有蒙层）
微信扫码下载APP APP下载 <div class="photo" id="photo"><div class="buttonTo ...
java实现二维码扫码下载APP
1.需要的组件 /** * 生成二维码(QRCode)图片的公共方法 * @param content 存储内容 * @param imgType 图片类型 ...
微信扫码下载app的前端界面代码
下载app二维码扫码下载,当用户微信扫码下载时微信不能直接下载应用,所以做了一个过渡界面给用户来交互响应.效果图如下图: html的源代码如下. <!DOCTYPE html> < ...
vue生成app二维码，并扫码下载app
文章目录项目需求开发 web官网下载页的开发 web官网地址生成下载二维码项目需求公司要做一个web官网的下载页面,功能是微信扫码可以直接下载Ios手机端app.Android手机端app.及 ...
Vue实现路径转二维码，并用手机扫码下载APP
目录 1.安装qrcodejs2插件 2. 页面中引入 3.页面中填充 4.页面中调用 5.完整代码 6.最终效果今天,组长让我做一下扫二维码就可以下载APP的一个功能,也参考了网上其他技术大佬的一 ...
微信内置浏览器不支持下载的解决方案微信点击链接直接下载app安装包功能实现方式
由于微信引流具备快速性和高效的二次传播性,故众多商家纷纷选择微信推广为主要的推广方式.但在使用微信分享链接和营销方案的过程中经常会遇到分享链接在微信内被拦截从而无法打开或者打开后无法下载文件的情况, ...
flutter 双端扫码下载app
需求:将android和ios下载路径合并到一个二维码里面,当android或ios设备扫描该二维码会跳转到相对应的链接进行下载解决方案 1:使用编写html代码生成html文件,名称为qrcode ...
Java实现扫码二维码下载app流程
1.先生成一个二维码(二维码里面包含了下载的地址信息,推荐用二维码里面包含是过滤器网站,安全),在草料网https://cli.im/ 进行生成,这里我们生成网址 2.生成后就可以下载,然后放到你的网 ...

vue扫码下载APP安装包

vue扫码下载APP安装包相关推荐

最新文章

热门文章