扫描二维码下载APP文件在项目中的实现

拼搏现实的明天。 2024-04-18 09:02 30阅读 0赞

**实现思路**

现在的很多项目都拥有web网页端和APP端，一般都是同时使用，当使用APP时则需要下载，常用的方式则是扫描二维码下载。现在来分享一下自己在工作中具体是如何实现扫描二维码进行下载的。

**生成二维码**

### [草料*二维码生成*器][Link 1][https://cli.im/][https_cli.im] ###

比如上面这个网站，可以在线生成二维码，然后打开手机上面可以扫描二维码的应用，就可以看到自己添加的内容。项目中实现的方式也是类似，将下载页面的地址放到二维码中，当用户下载时，会获取一个访问的地址，这个地址是一个app下载页面，打开这个页面时就开始下载app。如果用户第一次取消，则当其再次点击下载页面或者是下载按钮时还可以下载。

不管是Java或者是Node.js都有可以免费生成二维码的包，现在以node为例进行讲解。先跳转到下载页面：

/**
     * 跳转到app下载页面
     */
    router.route("/toDownload").get(function (req, res) {
        try{
            res.render('../views/app/project/app_download/app_download');
        }catch(e){
            console.error('跳转到app下载页面失败：' + e);
            res.json({success:false,msg:`跳转到app下载页面失败`,code:'1000',reason:e});
        }
    });

在生成二维码之前，先将app上传到服务器上面去。然后配置一个二维码地址，如下:

//二维码地址
    qr_code: {
        url: 'http://192.168.33.174:13012/zngl/toDownloadRoute/toDownload'
    },

生成二维码图片的时候，就将这个地址放入到二维码中，如下：

/**
     * 生成二维码图片
     * @param req
     * @param res
     */
    router.get("/createQRcode", function (req, res) {
        let qr_url = config.qr_code.url;
        let img = qr.image(qr_url,{'type': 'png'});
        res.writeHead(200, {'Content-Type': 'image/png'});
        img.pipe(res);
    });

这样，每次请求时都可以生成动态生成二维码的，因为有可能配置地址会变，本地的和服务器的地址不一样。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rlbmd5aWxhbmcxMjM_size_16_color_FFFFFF_t_70][]

**APP文件下载**

当用户扫描时，就会获取到二维码里面的请求地址，然后发起请求，这个请求主要是去到下载页面下载app。首先页面加载完成时，主动下载一次app,使用window.open()发起一个请求即可下载。如果用户取消，则让其还可以点击页面，重新下载。到此为止，扫面二维码下载APP的功能完全实现。如果各位有更好的方法，欢迎分享。

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>App下载</title>
        <script src="{
      {projcfg.appurl}}/static/themes/beyond/js/zngl-v.js"></script>
    </head>
    <style>
        html{
            width: 100%;
            height: 100%;
        }
        body{
            width: 100%;
            height: 100%;
            background-image: url('{
      {projcfg.appurl}}/static/abc/img/download.png');
            background-size:100% 100%;
            background-repeat: repeat;
            background-attachment:fixed;
        }
    </style>
    <body οnclick="download_app()">
    </body>
    <script>
        $(document).ready(function() {
            download_app();
        });
    
        function download_app() {
            window.open(`{
      {projcfg.appurl}}/toDownloadRoute/downloadApp`,"_top");
        }
    </script>
    </html>

[Link 1]: https://www.baidu.com/link?url=c4-0-cEjcbmKUyw_7ni9lF2KRgxzh4C5uJW5np5mYQW&wd=&eqid=e2940dfc00244ebe000000065d6faa96
[https_cli.im]: https://cli.im/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rlbmd5aWxhbmcxMjM_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190904203221755.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rlbmd5aWxhbmcxMjM=,size_16,color_FFFFFF,t_70