express 實戰微信公衆號開發一(環境搭建)

說在前頭

本文首發於個人訂閱號 前端糖果屋 或個人技術網站 程序員導航網

上回書說到，咱們公衆號之前的技術支持是 PHP。
而且是在咱技術尚不成熟的條件下做的。
現在咱們將技術棧轉到 nodejs 這邊的一個 express 框架。
咱來看看 express 官網對其自身的描述。

express，基於 Node.js 平臺，快速、開放、極簡的 Web 開發框架

工欲善其事，必先利其器

• 首先得申請一個微信個人訂閱號，當然有能力認證到企業的更好，有更豐富的 API 可以使用。這個在微信公衆平臺申請就可以。這裏給出申請地址：個人訂閱號申請地址
• 要用 express，nodejs，npm 包管理器當然必不可少啦。在這裏可以下載:
  nodejs 下載地址，根據個人操作系統下載對應安裝包，然後傻瓜式安裝即可。
  注 1：最好選擇 v8.9.0 以上的版本下載，可以免去日後一些版本不兼容的問題。
  注 2：windows 下載.msi 安裝包，macOs 下載.pkg 安裝包，安裝的時候會有 add path 選項，環境變量會自動配置進系統，安裝完之後不用再手動配置系統環境變量，這是安裝包較二進制文件（壓縮包）比較方便的地方。
  安裝完成後，點擊桌面 開始 ，輸入 cmd，打開命令提示符，輸入 node -v，回車,輸入 npm -v，回車，出現版本號說明安裝成功。
  [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-2nOgY9XI-1582868443013)(https://shop.io.mi-img.com/app/shop/img?id=shop_6292e64c9929c963b6708320692e8a94.png)]

用 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
  

• 打開瀏覽器查看
  

配置 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
  

• 運行之後是這個樣子的，可以發現隨意改變下文件，保存，工程就會自動重啓
  

創建微信 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工程，真的會簡化好多操作！！！
假定我們部署後映射的線上域名是 https://www.iiter.cn
ok 我們接下來打開微信公衆平臺配置。

微信公衆平臺配置

點擊左側菜單欄 開發 -> 基本配置 右側開啓服務器配置

然後填寫服務器配置

URL： 爲線上的 驗證Token的路由地址，對應的當然就是 https://www.iiter.cn/wechat
Token： 這裏的Token就是剛剛上一步自定義的Token，複製過來粘貼即可。
EncodingAESKey： 點擊隨機生成即可。
消息加解密方式：選擇明文模式
確認無誤的話，點擊提交。
驗證成功則會彈出驗證成功的消息。
打開公衆號，隨意輸入文字發送，公衆號會回覆給你相同的文字。

下一篇我們講講如何處理用戶消息，實現自定義回覆功能。

掃碼關注公衆號查看效果。