微信扫码下载APK失败,跳转浏览器打开点击下载

码上开发

于 2023-06-19 16:20:21 发布

阅读量760

点赞数

文章标签： javascript css vue.js 前端 es6

本文链接：https://blog.csdn.net/qq_42408481/article/details/131069092

版权

文章描述了一个场景，当用户在微信中扫描二维码尝试下载APK文件时，系统提示需在浏览器中打开才能下载。为解决这个问题，作者提出了一个实现思路：创建一个下载页面和相关路由，生成二维码，然后通过检测用户是否在微信环境中，如果在微信，则显示遮罩层提示用户使用浏览器下载。文章提供了相关的Vue.js代码片段来展示如何实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：微信扫描二维码跳转下载页面下载apk失败，提示浏览器打开下载。

实现思路：添加下载页面及路由，将该路由地址生成二维码，判断是否是微信扫描，如果是，给这个下载页面添加一个遮罩层并提示使用浏览器打开。（http协议下，浏览器扫描可直接下载）

实现步骤：

1、配置路由和添加下载页面

路由配置
{
    path: "/appDownload",
    name: "appDownload",
    component: () => import("@/views/app/app.vue"),
  },

下载页面

<template>
    <div class="background">
        <div class="downBtn">
            <a :href="url1">
                <el-button type="primary" class="pdaButton">WMS(PDA)应用下载</el-button></a>
            <a :href="url2">
                <el-button type="primary" class="pdaButton">WMS(领用)应用下载</el-button>
            </a>
            <p>安卓需 Android6.0以上操作系统</p>
            <p>不支持IOS下载</p>
        </div>
     //遮罩层
        <div v-if="isWeixin" class="appDialog">
            <img src="../../assets/images/appDialog.png" alt="">
        </div>
    </div>
</template>

<script>
import api from "@/api";
const { getApp } = api.app;
export default {
    data() {
        return {
            isWeixin: false,
            url1: '',
            url2: ''
        }
    },
    created() {
//判断是否微信扫描
        let ua = navigator.userAgent;
        this.isWeixin = !!/MicroMessenger/i.test(ua);
        this.download('app包名1')
        this.download('app包名2')

    },
    methods: {
        download(data) {
            getApp(data).then(res => {
                if (data === 'app包名1') {
                    this.url1 = res.data
                }
                this.url2 = res.data
            })
        }
    }
}
</script>

<style scoped>
.background {
    background-image: url(../../assets/images/appDownloadImage.png);
    background-size: 100% 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.downBtn {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.downBtn p {

    font-size: 12px;
    color: #8E8E8E;
}

.pdaButton {
    width: 250px;
    margin: 20px;
    border-radius: 200px;

}

.appDialog {
    height: 100%;
    width: 100%;
    position: fixed;
    background: rgba(0, 0, 0, 0.6);
    padding: 20px;
    padding-top: 50px;
}

.appDialog img {
    width: 100%;
}
</style>

2、网址生成二维码

3、效果

微信扫描的结果