如何创建永不过期的微信群邀请二维码-逐梦个人博客

大部分朋友应该都知道微信群邀请二维码的有效期只有7天，7天之后就自动失效了，用户无法再通过我们之前分享的二维码进入群聊，而对于如何让我们的群邀请二维码长期有效，目前也有很多现成的解决方案，最终的实现方式不外乎就是动态二维码。

所谓动态二维码，就是客户看到的二维码是不变的，但是二维码识别后的内容是动态可变的，而针对微信群邀请二维码我们只需要每7天更新一次二维码，当然即使用上了动态二维码，还是有可能忘记及时更新二维码，本文我们将从不同的角度着手去创建一个永不过期的微信群邀请二维码，就像下面的二维码一样。

一、二维码失效的情况分析

1、在不借助动态二维码的情况下，我们需要手动去更新展示给用户的二维码，而且可能需要对图片进行一定的裁剪和大小调整，再加上时效性问题，容易让人产生一种抵触心理，久了就忘记了，就算想起来也不太愿意去更新。

2、而对于使用了动态二维码的大部分站长来说，导致二维码失效的原因是因为忘记了上一次更新的时间，又没有收到及时的提醒，导致没有及时去更新二维码。

3、当然可能有些工具提醒做的很到位，但是由于提醒的发送时间或者接收到提醒时所处的位置比如不在电脑旁，导致没有及时更新，后面可能就忘记了。

不管是上面哪种情况导致的二维码失效，都可能会让我们流失掉一部分有意愿加入我们群聊的用户，而这些问题的原因分析下来主要就两个关键点：工具、提醒。接下来我们分别从这2个方面介绍实现方式。

二、自建动态二维码工具

上面我们提到了，目前大部分动态二维码工具可能都更适用于电脑端操作，对于手机端操作可能不是那么方便，这也导致了很多朋友不能及时去更新二维码从而失效，本文将使用node+koa从零开始实现一个适用于手机端的动态二维码工具，首先看一下工具的运行截图。

通过截图可知，我们的动态二维码工具主要有两个功能：更新、展示，接下来我们先初始化一个koa项目，这里选用ejs作为模板语言，命令：koa2 -e wechat-qr，如果还没有安装koa-generator，先通过命令npm install -g koa-generator进行安装，项目初始化好后运行命令cd wechat-qr && npm i安装项目默认依赖，除默认依赖外，我们还需要安装fs-extra和koa-body，命令：npm i fs-extra@10.1.0 koa-body --save，然后我们开始逐步创建动态二维码工具。

1、在根目录创建config.json，用于存储配置信息，比如更新二维码的路径，这个不能让别人知道，相比做登录鉴权，使用自定义的路径会更方便一点，大家在部署项目时一定记得更新这个路径，内容如下：

{
    "update_path": "/qr"
}

2、在views目录中新增模板文件qr.ejs，内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0">
    <title><%= title %></title>
  </head>
  <style>
    body {
        display: flex;
        justify-content: center;
        flex-direction: column;
        text-align: center;
    }
    img {
        max-width: 100%;
    }
    #file {
        display: none;
    }
</style>
  <body>
    <p><img src="/images/qr.jpg" id="img"/></p>
    <p><button id="update">更新二维码</button><input type="file" id="file" accept="image/jpeg,image/png"></p>
    <script>
        update.onclick = function() {
            file.click();
        }
        file.onchange = function(e) {
            var file = e.target.files[0];
            if (file) {
                const formData = new FormData();
                formData.append('file', file);
                var xhr = new XMLHttpRequest()
                xhr.open('POST', '<%= update_path %>/upload');
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        img.src = '/images/qr.jpg?' + Date.now();
                    }
                }
                xhr.send(formData);
            }
        }
</script>
  </body>
</html>

这一步主要是让我们可以选择最新的二维码图片上传并更新，其中update_path取自配置文件。

3、在routes目录中新增路由文件qr.js，内容如下：

const fs = require('fs-extra');
const path = require('path');
const router = require('koa-router')();
const { update_path } = require('../config.json');
const destPath = path.join(__dirname, '../public/images/qr.jpg');

router.prefix(update_path);

router.get('/', async (ctx, next) => {
    await ctx.render('qr', {
        update_path,
        title: '微信群二维码维护'
    });
});

router.post('/upload', async (ctx, next) => {
    const { filepath } = ctx.request.files.file;
    await fs.move(filepath, destPath, { overwrite: true });
    ctx.body = 'ok';
});

module.exports = router;

这一步用于处理维护模板的显示和接受用户上传的图片文件。

4、修改app.js，增加koaBody用于图片上传，修改后的代码如下：

const Koa = require('koa')
const app = new Koa()
const views = require('koa-views')
const json = require('koa-json')
const onerror = require('koa-onerror')
const { koaBody } = require('koa-body')
const bodyparser = require('koa-bodyparser')
const logger = require('koa-logger')

const index = require('./routes/index')
const qr = require('./routes/qr')

// error handler
onerror(app)

// middlewares
app.use(koaBody({
  multipart: true,
  formidable: {
    maxFieldsSize: 2 * 1024 * 1024,
    multipart: true
  }
}));
app.use(bodyparser({
  enableTypes:['json', 'form', 'text']
}))
app.use(json())
app.use(logger())
app.use(require('koa-static')(__dirname + '/public'))

app.use(views(__dirname + '/views', {
  extension: 'ejs'
}))

// logger
app.use(async (ctx, next) => {
  const start = new Date()
  await next()
  const ms = new Date() - start
  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)
})

// routes
app.use(index.routes(), index.allowedMethods())
app.use(qr.routes(), qr.allowedMethods())

// error-handling
app.on('error', (err, ctx) => {
  console.error('server error', err, ctx)
});

module.exports = app

这一步的主要目的是引入koaBody用于上传文件，并使用qr路由。

5、修改模板views/index.ejs，内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0">
    <title><%= title %></title>
  </head>
  <style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
    }
    img {
        max-width: 100%;
    }
</style>
  <body>
    <p style="color: #f00; font-weight: bold;">长按下方图片识别二维码进群</p>
    <p><img src="/images/qr.jpg" id="img"/></p>
    <script>
        img.src = '/images/qr.jpg?' + Date.now();
</script>
  </body>
</html>

6、修改路由routes/index.js，内容如下：

const { update_path } = require('../config.json');
const router = require('koa-router')();

router.get('/', async (ctx, next) => {
  await ctx.render('index', {
    title: '微信群邀请'
  });
});

module.exports = router;

至此动态二维码工具已经创建完成了，我们可以把服务跑起来测试一下，注意koa服务默认运行在3000端口，测试没问题将首页地址生成二维码，比如这里就是http://localhost:3000，这个二维码就是最终展示给用户的二维码，我们可以根据自己的需要做一些美化，后期这个二维码也不会再做更改了。

三、实现通知提醒

上面我们自建了动态二维码工具，已经可以满足更新和展示二维码的需求，但是考虑到我们可能会忘记更新，所以我们需要做一定的提醒，这里直接使用shell脚本来实现，图方便这里直接检测二维码图片的最后更新时间和当前时间的差值，如果大于等于阙值比如5天就提醒，提醒的方式可以是邮件、微信推送等等，当然有条件的也可以使用短信发送，shell脚本的内容如下：

TIME_STR=`curl -sI /api/images/qr.jpg | grep "Last-Modified" | cut -d' ' -f 2-`
CREATE_TIME=$(date -d "$TIME_STR" +%s)
CUR_DATE=$(date +%s)
DIFF=$(($CUR_DATE-$CREATE_TIME))
DIFF_DAY=$(($DIFF/86400))
if [ $DIFF_DAY -ge 5 ]; then
    // 发送通知
fi

将上面的二维码地址换成自己的，然后发送通知的逻辑，最后通过cronjob做定时任务，时间最好选择一个自己大概率可能在用手机的时间，比如我选择的是早上8:30，

30 8 * * *  /www/server/cron/wechat-qr.sh >> /www/server/cron/wechat-qr.log 2>&1

当收到通知后，不管我们在哪里，通过简单的手机操作就可以及时的去更新群二维码。

当然除了上面的方式，实现的方式还有很多，也可以选择更直接一点直接更新暴露给前端用户的二维码，那就需要做二维码动态裁剪了，但是主体思路都差不多，大家可以根据自己的需求做修改。

如需下载本文所涉及的源码及素材包，请在关注本站公众号后发送：wxqun