express 实战微信公众号开发-1

1,240 阅读4分钟

说在前头

本文首发于个人订阅号 前端糖果屋 或个人技术网站 程序员导航网

工欲善其事,必先利其器

  • 首先得申请一个微信个人订阅号,当然有能力认证到企业的更好,有更丰富的 API 可以使用。这个在微信公众平台申请就可以。这里给出申请地址:个人订阅号申请地址
  • 要用 express,nodejs,npm 包管理器当然必不可少啦。在这里可以下载: nodejs 下载地址,根据个人操作系统下载对应安装包,然后傻瓜式安装即可。
    注 1:最好选择 v8.9.0 以上的版本下载,可以免去日后一些版本不兼容的问题。
    注 2:windows 下载.msi 安装包,macOs 下载.pkg 安装包,安装的时候会有 add path 选项,环境变量会自动配置进系统,安装完之后不用再手动配置系统环境变量,这是安装包较二进制文件(压缩包)比较方便的地方。
    安装完成后,点击桌面 开始 ,输入 cmd,打开命令提示符,输入 node -v,回车,输入 npm -v,回车,出现版本号说明安装成功。

express是啥

express,基于 Node.js 平台,快速、开放、极简的 Web 开发框架

用 express 脚手架生成工程

  • 全局安装
    npm i express-generator -g
    
  • 生成目录名为 wechat-express 的工程
    express -e wechat-express
    
  • 进入工程根目录
    cd wechat-express
    
  • 安装依赖(使用淘宝源安装会快很多,相信我)
    npm install --registry=https://registry.npm.taobao.org
    
  • 运行
    npm start
    
  • 打开浏览器查看
    express工程运行成功

配置 nodemon,让 nodejs 开发更便利。

官网是这样介绍的:

Nodemon is a utility that will monitor for any changes in your source and automatically restart your server. Perfect for development

译: Nodemon 是一个实用程序,它将监视源代码中的任何更改并自动重新启动服务器。适合在开发环境中使用它。

咱们都知道 nodejs 开发,修改了源代码之后需要重新运行才能看到最新的运行结果。那 nodemon 存在的意义,就是监听源代码中的任何更改,并自动重启服务器

安装 nodemon

npm install nodemon //yarn add nodemon

使用 nodemon

  • 首先在工程根目录下创建nodemon.json文件,写入以下内容

    {
      "restartable": "rs",
      "ignore": [".git", ".svn", "node_modules/**/node_modules"],
      "verbose": true,
      "execMap": {
        "js": "node --harmony"
      },
      "watch": [],
      "env": {
        "NODE_ENV": "development"
      },
      "ext": "js json"
    }
    
  • 再打开package.json 文件,给 script 属性中添加一行,保存。

    "scripts": {
      "start": "nodemon app.js",
      "nodemon": "nodemon app.js" //多加这一行
    },
    
  • 运行

    npm run nodemon
    
  • 运行之后是这个样子的,可以发现随意改变下文件,保存,工程就会自动重启

    nodemon运行后状态

创建微信 Token 验证路由

  • 根目录下打开终端,安装jssha这个加解密的库
npm install jssha
  • 然后在工程的 routes 文件夹下创建一个 wechat.js 文件,写入以下内容

注意:wechat.js文件中有个自定义Token,这个Token必须为英文或数字,长度为3-32字符

const express = require("express");
const router = express.Router();
const jsSHA = require("jssha");
/**
 * 授权验证
 */
router.get("/", function(req, res, next) {
  const token =
    "这里是你的自定义Tken,与公众平台的Token相对应,不然会验证不成功";
  //1.获取微信服务器Get请求的参数 signature、timestamp、nonce、echostr
  let signature = req.query.signature, //微信加密签名
    timestamp = req.query.timestamp, //时间戳
    nonce = req.query.nonce, //随机数
    echostr = req.query.echostr; //随机字符串

  //2.将token、timestamp、nonce三个参数进行字典序排序
  let array = [token, timestamp, nonce];
  array.sort();

  //3.将三个参数字符串拼接成一个字符串进行sha1加密
  let tempStr = array.join("");
  let shaObj = new jsSHA("SHA-1", "TEXT");
  shaObj.update(tempStr);
  let scyptoString = shaObj.getHash("HEX");

  //4.开发者获得加密后的字符串可与signature对比,标识该请求来源于微信
  if (signature === scyptoString) {
    console.log("验证成功");
    res.send(echostr);
  } else {
    console.log("验证失败");
    res.send("验证失败");
  }
});
module.exports = router;
  • 打开根目录下app.js文件,引入该路由并注册
const wechatRouter = require("./routes/wechat");
app.use("/wechat", wechatRouter);

本地验证路由地址毫无疑问就是 http://localhost:3000/wehat
完后将整个工程打包放到线上环境,这里推荐使用宝塔面板结合pm2进程管理工具部署express工程,对于一个前端er来说,宝塔面板真的会简化好多操作!!!
假定我们部署后映射的线上域名是 www.iiter.cn
ok 我们接下来打开微信公众平台配置。

微信公众平台配置

点击左侧菜单栏 开发 -> 基本配置 右侧开启服务器配置

公众号配置
然后填写服务器配置
服务器配置信息
URL: 为线上的 验证Token的路由地址,对应的当然就是 www.iiter.cn/wechat
Token: 这里的Token就是刚刚上一步自定义的Token,复制过来粘贴即可。
EncodingAESKey: 点击随机生成即可。
消息加解密方式:选择明文模式
确认无误的话,点击提交。
验证成功则会弹出验证成功的消息。
打开公众号,随意输入文字发送,公众号会回复给你相同的文字。
公众号回复
下次我们有机会讲讲如何处理用户消息,实现自定义回复功能。

扫码关注公众号查看效果。

mp-qrcode.jpg