1.Node.js 接入微信公眾平臺開發

来源:http://www.cnblogs.com/hvkcode/archive/2017/05/27/6913033.html
-Advertisement-
Play Games

一、寫在前面的話   Node.js是一個開放源代碼、跨平臺的JavaScript語言運行環境,採用Google開發的V8運行代碼,使用事件驅動、非阻塞和非同步輸入輸出模型等技術來提高性能,可優化應用程式的傳輸量和規模。這些技術通常用於數據密集的事實應用程式。—— "來自維基百科" ...


一、寫在前面的話

  Node.js是一個開放源代碼、跨平臺的JavaScript語言運行環境,採用Google開發的V8運行代碼,使用事件驅動、非阻塞和非同步輸入輸出模型等技術來提高性能,可優化應用程式的傳輸量和規模。這些技術通常用於數據密集的事實應用程式。——來自維基百科

  最近花了差不多近一個月的時間去學習Node.js,由於它的代碼語言是 Javascript ,因此對於語法上就沒有過多的去研究,畢竟做過Web開發的程式員,很少有不會Javascript的。而寫這篇文章,也只是為了


“記錄裝逼的過程”

如有不正確的地方,希望大家指正。

二、準備工作

  在正式開始碼代碼之前,我們需要準備以下東西:

  1. 搭建 Node 環境。Node的安裝過程太過簡單,網上也有太多的教程,大家可以自行百度;
  2. 申請微信公眾號,同樣這裡也不做介紹,大家自行百度。
  3. 伺服器和功能變數名稱。
  4. 打開Node.js中文網文檔
  5. 打開 微信開發者文檔

三、接入微信公眾平臺

1.創建Node.js 項目

  首先我們在電腦的任意磁碟上創建文件夾,命名隨意,我這命名為 wechat;
  隨後在文件夾中創建兩個文件,一個是config.json,另一個為app.js。如下圖所示:
Node.js項目
PS:這裡我的 IDE 是 VSCode,各位可隨意使用自己喜歡的 IDE。

  為了後續功能的擴展,我加入了Express框架,具體操作如下:

  1. 電腦打開運行界面,快捷鍵為:win+R,輸入cmd後回車,進入dos界面,輸入命令

     npm install -g express

    進行全局安裝;由於 Express 自 4.x 版本中將命令工具分離出來,因此還需要輸入下一個命令

    npm install -g express-generator@4

    安裝成功後,在dos界面中輸入以下 命令

    express -h

    結果如下圖所示:
    express 安裝成功

震驚什麼?你的運行結果提示:express不是內部或外部命令。那你必須要檢查一下安裝 node.js 的時候有沒有添加環境變數。點擊<a href="http://jingyan.baidu.com/article/1876c8529c79e2890b1376dd.html?st=2&net_type=&bd_page_type=1&os=0&rst=&word=WWWDHZJS.ORG" target="_blank">解決express不是內部或外部命令問題

2.微信文檔步驟

  如果在沒有考慮清楚之前,就開始碼代碼的話,這樣做是非常危險的。我們先打開微信文檔,點擊 開始開發 中的 接入指南,如圖:
接入指南

跳過第一步,直接看第二步,如圖:
驗證消息來自微信伺服器

正如幫助文檔所說的那樣,我們總結以四個步驟:

  1. 獲取微信伺服器Get請求的參數 signature、timestamp、nonce、echostr
  2. 將token、timestamp、nonce三個參數進行字典序排序
  3. 將三個參數字元串拼接成一個字元串進行sha1加密
  4. 開發者獲得加密後的字元串可與signature對比,標識該請求來源於微信

3.接入功能的實現

   整理好思路後我們就按照上一節的步驟去實現。首先我們在打開 config.json 文件,輸入以下內容:

{
    "token":"wechat"
}

   config.json 文件是我們程式的配置文件,在後面的文章中,我們會將程式名稱、微信定義的參數名稱、請求地址等配置內容存放在該文件中。
   打開 app.js 文件,該文件屬於我們程式的入口,在文件啟動及以後路由配置都是再次實現的,首先我們導入重要的模塊:

const express = require('express'), //express 框架 
       crypto = require('crypto'),  //引入加密模塊
       config = require('./config');//引入配置文件

上面的代碼不難理解,require 就是導入模塊的意思。這裡主要針對我們自定義的config.json文件講解一下:
 "./" 表示與 app.js 在同一及目錄下,為什麼要這麼寫呢?原因很簡單就是在我們通過 npm 命令安裝模塊時,如果我們指定了全局安裝,也就是 -g,安裝後的文件則會保存在我們 node.js 安裝路徑下的 node_modules 文件夾中;同理,我們不指定全局安裝,安裝後的文件則會保存在我們安裝命令輸入時所在的文件夾根目錄下的 node_modules 文件夾中,此時如果沒有該文件,系統會自動創建。

 這裡我們都是使用 require 去導入模塊的,node.js 怎麼分辨系統模塊和我們自定義的模塊呢,聰明的你一定想到了,沒錯就是 "./" 這個,如果你不想用它的話,你也可以把自定義的模塊文件移到 node_modules 文件夾中。

require 是通過模塊名稱去導入模塊文件的,因此在引入的時候不需要寫入文件的尾碼名。如果兩個文件重名,但尾碼名不同, require 會按正序 導入排在最前面的文件。


原來如此

 實際上就是這麼簡單,我們也就不再糾結這個問題,繼續下麵的工作。

   實例 express 以及 創建伺服器

//實例 express
var app = express();
//用於處理所有進入 3000 埠 get 的連接請求
app.get('/',function(req,res){
    //對請求連接返回內容
    res.send("Hello Node.js");
});
//監聽3000埠
app.listen(3000);

  上面的代碼通過註釋,我們就能明白其意思,這裡我就不再做細緻的講解。再次進入 dos 界面,通過命令進入我們項目的文件的根目錄下,如圖:
進入項目根目錄下
輸入命令,啟動我們的Node.js項目

node app.js

啟動成功後,我們打開瀏覽器輸入地址:http://localhost:3000 訪問我們的node.js項目,如圖
啟動node.js項目

範文結果

小技巧 :
  在每次更改完 node.js 項目後,我們都需要先將 node.js停止(快捷鍵: Ctrl+C),然後再通過命令再次運行,這樣特別麻煩。這裡我推薦使用 supervisor 工具,npm 安裝命令為:npm install -g supervisor。這樣我們啟動 node.js 項目命令改為 supervisor app.js,更改項目後只需要保存,刷新瀏覽器頁面就可以得到更改後的結果了。

  完成上面的工作後,我們就可以正式開始寫接入微信公眾平臺的主要代碼,廢話不多說直接貼代碼

後退!我要開始裝逼了

const express = require('express'), //express 框架 
       crypto =  require('crypto'), //引入加密模塊
       config = require('./config');//引入配置文件

var app = express();//實例express框架

//用於處理所有進入 3000 埠 get 的連接請求
app.get('/',function(req,res){
    //1.獲取微信伺服器Get請求的參數 signature、timestamp、nonce、echostr
    var signature = req.query.signature,//微信加密簽名
        timestamp = req.query.timestamp,//時間戳
            nonce = req.query.nonce,//隨機數
          echostr = req.query.echostr;//隨機字元串

    //2.將token、timestamp、nonce三個參數進行字典序排序
    var array = [config.token,timestamp,nonce];
    array.sort();

    //3.將三個參數字元串拼接成一個字元串進行sha1加密
    var tempStr = array.join('');
    const hashCode = crypto.createHash('sha1'); //創建加密類型 
    var resultCode = hashCode.update(tempStr,'utf8').digest('hex'); //對傳入的字元串進行加密

    //4.開發者獲得加密後的字元串可與signature對比,標識該請求來源於微信
    if(resultCode === signature){
        res.send(echostr);
    }else{
        res.send('mismatch');
    }
});

//監聽3000埠
app.listen(3000);

4.部署項目

   完成了代碼後我們就可以把項目發佈到外網上了,這裡我用的是花生殼內網映射外網的軟體,各位可以隨意使用其他工具。
1.打開花生殼的軟體,點擊內網穿透:
花生殼
2.點擊添加映射
點擊添加映射
3.配置映射
這裡寫圖片描述
  由於微信只接受80埠,我們在映射類型選擇為 網站80埠;內網主機就是我們電腦的 IP 地址;內網埠號就是node.js的監聽埠;點擊確定後,就成功映射到外網了,可以通過花生殼提供的功能變數名稱進行訪問。

5.接入驗證

  再次進入微信公眾平臺在左側菜單點擊基本配置,如圖:
基本配置

修改伺服器配置

點擊修改配置。其中伺服器地址,就是我們外網映射的地址;令牌(Token)就是我們在 config.json 文件中 定義的 token 值;消息加密可以點擊隨機生成按鈕,當然你也可以隨便定義;消息加解密方式這塊可以隨便選擇,這裡我就使用預設的,如圖:
微信伺服器配置

微信公眾平臺接入

  點擊提交按鈕,提示 提交成功,那麼我就要祝賀你了

哎呦不錯哦

  你已經成功的步入了Node.js開發微信的開發的第一步。

   文章源代碼https://github.com/SilenceHVK/wechatByNode 。對文章有不正確之處,請給予糾正。github源代碼請順手給個 Star,最後感謝您的閱讀。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • IE6IE7Firefox瀏覽器不相容原因及解決辦法 一、IE6IE7Firefox瀏覽器不相容原因及解決辦法1.文字 本身的大小不相容。同樣是font-size:14px的宋體文字,在不同瀏覽器下占的空間是不一樣的,ie下實際占高16px,下留白3px,ff下實際占高17px,上留白1px,下留白 ...
  • 直接上代碼: ...
  • 一個規範性強的代碼便於修改和理解,所以做出如下總結,希望少走彎路; 基礎內容,大神請繞道...................... 1.命名規範 命名一定要有意義,畢竟代碼寫下來不是給你一個人看的,在css中,在前面寫上父元素進行規範,不要偷懶 2.請不要一會寫原生,一會寫jquery 這個問題好 ...
  • Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架,用於開發響應式佈局、移動設備優先的 WEB 項目。 使用感覺簡約大氣便捷,扁平化設計。好多好多CSS、JS....總有你心儀的那一款!喜歡就上官網找,那裡更豐富呦! ...
  • 查看完整的代碼請到 我的github地址 https://github.com/qianyinghuanmie/vue2.0-demos 一、結果展示 二、前期準備: 1.引入漢字轉拼音的插件,利用NPM安裝 代碼指令為 npm install pinyin --save ,詳細步驟請到pinyin ...
  • 數組 數組的概念 當我們需要表示一組數據,或者叫做一次性定義很多相似的數字或變數時,就需要使用數組,數組的字面意思就是一組數據,一組(一般情況下相同類型)的數據(不一定都是數字),數組的作用是:使用單獨的變數名來存儲一系列的值。 遍曆數組: 普通for迴圈 for(var i=0; i<5; i++ ...
  • 用vue-cli搭建一個前端開發環境確實是極其方便,在寫前端代碼肯定也是少不了需要調用後臺提供的業務介面進行前後端交互,特別在敏捷開發中,前後端都要提前確定業務介面併進行打樁,在開發過程中基本是沒有現成的後臺可以調用,基本上都是自己寫mock進行模擬。 在vue-cli搭建的項目中,框架上用的是ex ...
  • css基礎 1、 Css新建格式 Css語法: 選擇符{屬性名稱:屬性值;} 1、內部樣式表(嵌套到頁面中) 語法: <style type="text/css"> css語句 </style> 註:使用style標記創建樣式時,最好將該標記寫在<head></head>; 2、內聯樣式(行間樣式, ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...