Egg + Vue + 微信公众号开发(基础框架搭建)

1,336 阅读1分钟

一. 内网穿透准备

简简单单下载一个【花生壳(戳我下载)】,后面会用到。

二. 微信公众号准备工作

去申请接口测试号(猛戳我)image.png

三. Egg准备工作

1.快速创建一个Egg基础架构

npm init egg --type=simple

2. 敲代码

2.1. 配置 [config.default.js]

'use strict';

module.exports = appInfo => {
  // .....此处省略一万行
  config.security = {
    csrf: {
      enable: false,  // 要将 csrf 关闭  不然post请求会报错
    },
  };
  config.wechat_config = {
    token: '你的token', // 按照官方要求随即填写即可
    appid: '你的appid',
    encodingAESKey: '你的encodingAESKey' // 按照官方要求随即填写即可
  };
  // .....此处省略一万行
  return {
    ...config,
  };
};

2.2. controller/wechat.js

编写前,先安装npm install sha1,controller中新建wechat.js

'use strict';

const { Controller } = require('egg');
const sha1 = require('sha1');

class WechatController extends Controller {
  async check() {
    const obj = this.ctx.query;
    const token = this.ctx.app.config.wechat_config.token;
    const timestamp = obj.timestamp;
    const nonce = obj.nonce;
    const echostr = obj.echostr;
    const signature = obj.signature;
    const str = [ token, timestamp, nonce ].sort()
      .join('');
    const sha = sha1(str);
    if (sha === signature) {
      this.ctx.body = echostr + '';
    }
  }
}

module.exports = WechatController;

2.2.3. router.js

'use strict';

module.exports = app => {
  const { router, controller } = app;
  router.get('/wechat', controller.wechat.check);
};

3. 启动项目 & 配置【花生壳】

四. 完善申请接口测试号

现在再次回到【申请接口测试号】页面,点击提交后,就会出现一个二维码,此时微信扫描关注就成功了~~

image.png