Node.js开发第三方微信公众平台


Posted in Javascript onJune 05, 2017

一、写在前面的话

  Node.js是一个开放源代码、跨平台的JavaScript语言运行环境,采用Google开发的V8运行代码,使用事件驱动、非阻塞和异步输入输出模型等技术来提高性能,可优化应用程序的传输量和规模。这些技术通常用于数据密集的事实应用程序。——来自维基百科

  最近花了差不多近一个月的时间去学习Node.js,由于它的代码语言是 Javascript ,因此对于语法上就没有过多的去研究,毕竟做过Web开发的程序员,很少有不会Javascript的。而写这篇文章,也只是为了


Node.js开发第三方微信公众平台

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

二、准备工作

  在正式开始码代码之前,我们需要准备以下东西:

搭建 Node 环境。Node的安装过程太过简单,网上也有太多的教程,大家可以自行百度;申请微信公众号,同样这里也不做介绍,大家自行百度。服务器和域名。打开Node.js中文网文档 打开 微信开发者文档 三、接入微信公众平台 1.创建Node.js 项目

  首先我们在电脑的任意磁盘上创建文件夹,命名随意,我这命名为 wechat;

  随后在文件夹中创建两个文件,一个是config.json,另一个为app.js。如下图所示:
Node.js开发第三方微信公众平台

PS:这里我的 IDE 是 VSCode,各位可随意使用自己喜欢的 IDE。

  为了后续功能的扩展,我加入了Express框架,具体操作如下:

电脑打开运行界面,快捷键为:win+R,输入cmd后回车,进入dos界面,输入命令

npm install -g express

进行全局安装;由于 Express 自 4.x 版本中将命令工具分离出来,因此还需要输入下一个命令

npm install -g express-generator@4

安装成功后,在dos界面中输入以下 命令

express -h

结果如下图所示:

Node.js开发第三方微信公众平台

Node.js开发第三方微信公众平台

什么?你的运行结果提示: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.微信文档步骤

  如果在没有考虑清楚之前,就开始码代码的话,这样做是非常危险的。我们先打开微信文档,点击 开始开发 中的 接入指南,如图:

Node.js开发第三方微信公众平台

跳过第一步,直接看第二步,如图:

Node.js开发第三方微信公众平台

正如帮助文档所说的那样,我们总结以四个步骤:

获取微信服务器Get请求的参数 signature、timestamp、nonce、echostr 将token、timestamp、nonce三个参数进行字典序排序将三个参数字符串拼接成一个字符串进行sha1加密开发者获得加密后的字符串可与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 会按照 Node.js 的加载优先级顺序进行导入,即 js文件 > json文件 > node文件。


Node.js开发第三方微信公众平台

 实际上就是这么简单,我们也就不再纠结这个问题,继续下面的工作。

   实例 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.js项目

node app.js

启动成功后,我们打开浏览器输入地址:http://localhost:3000 访问我们的node.js项目,如图

Node.js开发第三方微信公众平台

Node.js开发第三方微信公众平台

小技巧 :

  在每次更改完 node.js 项目后,我们都需要先将 node.js停止(快捷键: Ctrl+C),然后再通过命令再次运行,这样特别麻烦。这里我推荐使用 supervisor 工具,npm 安装命令为:npm install -g supervisor。这样我们启动 node.js 项目命令改为 supervisor app.js,更改项目后只需要保存,刷新浏览器页面就可以得到更改后的结果了。

  完成上面的工作后,我们就可以正式开始写接入微信公众平台的主要代码,废话不多说直接贴代码

Node.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.打开花生壳的软件,点击内网穿透:

Node.js开发第三方微信公众平台

2.点击添加映射

Node.js开发第三方微信公众平台

3.配置映射

Node.js开发第三方微信公众平台

  由于微信只接受80端口,我们在映射类型选择为 网站80端口;内网主机就是我们电脑的 IP 地址;内网端口号就是node.js的监听端口;点击确定后,就成功映射到外网了,可以通过花生壳提供的域名进行访问。

5.接入验证

  再次进入微信公众平台在左侧菜单点击基本配置,如图:

Node.js开发第三方微信公众平台

Node.js开发第三方微信公众平台

点击修改配置。其中服务器地址,就是我们外网映射的地址;令牌(Token)就是我们在 config.json 文件中 定义的 token 值;消息加密可以点击随机生成按钮,当然你也可以随便定义;消息加解密方式这块可以随便选择,这里我就使用默认的,如图:

Node.js开发第三方微信公众平台

Node.js开发第三方微信公众平台

  点击提交按钮,提示 提交成功,那么我就要祝贺你了

Node.js开发第三方微信公众平台

你已经成功的步入了Node.js开发微信的开发的第一步。

   GITHUB源代码:https://github.com/SilenceHVK/wechatByNode 。对文章有不正确之处,请给予纠正。github源代码请顺手给个 Star,最后感谢您的阅读。

Javascript 相关文章推荐
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
Dec 22 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
Jul 20 Javascript
js 中 document.createEvent的用法
Aug 29 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
Jan 06 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
JS常用表单验证方法总结
May 22 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 Javascript
vue-cli中的webpack配置详解
Sep 25 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 Javascript
vue 全局封装loading加载教程(全局监听)
Nov 05 Javascript
js自定义Tab选项卡效果
Jun 05 #Javascript
纯js实现动态时间显示
Sep 07 #Javascript
深入理解Angular.JS中的Scope继承
Jun 04 #Javascript
yarn的使用与升级Node.js的方法详解
Jun 04 #Javascript
npm国内镜像 安装失败的几种解决方案
Jun 04 #Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
Jun 04 #Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
Jun 04 #Javascript
You might like
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
深入php数据采集的详解
2013/06/02 PHP
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
php自定义分页类完整实例
2015/12/25 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
javascript 树控件 比较好用
2009/06/11 Javascript
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
javascript用户注册提示效果的简单实例
2013/08/17 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
pytorch中的卷积和池化计算方式详解
2020/01/03 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
捐赠仪式主持词
2014/03/19 职场文书
双拥工作宣传标语
2014/06/26 职场文书
2014年体育部工作总结
2014/11/13 职场文书
起诉意见书范文
2015/05/19 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书
Python实现聚类K-means算法详解
2022/07/15 Python