先贴参考链接
1、准备工作
ngrok用来做内网映射,Node.js用来搭建后台服务,微信测试帐号用来和服务器交互
这里直接用个人PC做服务器开发测试比较方便(也可以去阿里云,腾讯云买服务器,还需要买域名,域名备案也比较麻烦需要公司资质)
微信公众号当前分为订阅号、服务号、企业号(现在叫企业微信)具体区别见http://kf.qq.com/faq/120911VrYVrA130805byM32u.html(公众平台服务号、订阅号、企业号的相关说明),
简单来说订阅号更适合做信息群发,服务号则可以跟用户交互,功能更多(比如微信支付功能),企业号用来公司内部通讯用
订阅号支持组织和个人,服务号和企业号需要公司资质,而且高级接口和微信支付功能都需要微信认证(需要公司资质和300元认证费用,开通微信支付还需要300)
直接做开发测试弄个微信测试帐号就行了,真正上线才需要云服务器,域名备案和微信认证这些东西
相关资源链接
ngrok下载
https://ngrok.com/downloadNode.js英文官网
https://nodejs.org/en/
Node.js中文官网
http://nodejs.cn/download/
公众平台测试帐号,微信扫码登陆后会得到
https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
2、开发环境配置
安装Node.js
安装下载的Node.js安装包后,确认下是否成功安装
win+R,输入cmd后回车,进入dos界面,输入命令 node -v
得到版本信息说明安装成功
npm安装express(Node.js的一个web开发框架,封装了很多底层接口用起来比较方便,而且遵循mvc开发规范)
同样dos命令npm install -g express进行全局安装(这个命令是链接官方的npm网站下载一般不会出现链接失败的问题,如果链接失败的话可以切淘宝源,也就是国内的npm包镜像,10分钟同步一次。方式是执行npm install -g cnpm -- registry=https://registry.npm.taobao.org,以后的命令就变成了cnpm install -g express,参数和npm一样)
还需要输入下一个命令,这样就可以在任何目录执行express命令,不执行的话得去express安装目录执行cmd(路径npm安装的时候会显示)
npm install -g express-generator
创建express项目,cmd进入你想创建项目的目录下执行express porjectName,我这里直接在E盘根目录下建了一个weixin-test项目
他这里也给提示了install dependencies:> cd weixin-test && npm install,当前目录执行cd weixin-test && npm install来安装依赖模块
还有启动命令run the app:> SET DEBUG=weixin-test:* & npm start,直接进weixin-test执行npm start就行,他会直接找bin下的www配置文件启动
项目目录执行npm Install 会将package.json(项目配置文件)里配置的依赖包都下载下来,express建的项目package.json里是express需要的一些基础服务模块
启动项目浏览器访问测试
7个npm包下载完后就可以启动服务器了,express4.x创建的服务器默认端口为3000;配置文件在项目目录下的bin/www
启动命令直接在项目目录下执行npm start,用webstrom的话可以配置后直接在webstrom启动,webstrom配置如下
dos启动
浏览器访问
ngrok内网映射,测试域名链接
解压下载的ngrok进入目录执行cmd调起dos,执行ngrok.exe http 3000(这个3000是express项目bin下面的www配置文件里面的端口),连接成功后会返回映射的http和https域名
返回映射域名
测试映射是否成功http和https连接都可以(美国的服务器链接会比较慢)
实现微信接入交互代码(参考微信官方文档https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421135319)
主要要实现的逻辑如下
首先需要安装crypto模块,项目目录执行npm install crypto --save(--save参数会将模块加入到package.json里的dependencies属性里,这个属性里存的是当前项目的依赖模块,上线的时候用。还有一个参数是--save-dev区别是加入到package.json里的devDependencies属性,这个属性用来存放开发用的模块,比如gulp自动构建用的方便开发,上线的时候不用这些模块)---更新下(这里不用下crypto模块了,直接require就行,Crypto库是随Nodejs内核一起打包发布的,主要提供了加密、解密、签名、验证等功能。)
修改app.js增加路由配置,这里require的api文件需要在routes下建用来实现具体的验证逻辑
1 var express = require('express');
2 var path = require('path');
3 var favicon = require('serve-favicon');
4 var logger = require('morgan');
5 var cookieParser = require('cookie-parser');
6 var bodyParser = require('body-parser');
7
8 var index = require('./routes/index');
9 var users = require('./routes/users');
10 var api = require('./routes/api');//引入js文件,先要在routes下新建api.js
11
12 var app = express();
13
14 // view engine setup
15 app.set('views', path.join(__dirname, 'views'));
16 app.set('view engine', 'jade');
17
18 // uncomment after placing your favicon in /public
19 //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
20 app.use(logger('dev'));
21 app.use(bodyParser.json());
22 app.use(bodyParser.urlencoded({ extended: false }));
23 app.use(cookieParser());
24 app.use(express.static(path.join(__dirname, 'public')));
25
26 app.use('/', index);
27 app.use('/users', users);
28 app.use('/api', api);//增加路由
29
30 // catch 404 and forward to error handler
31 app.use(function(req, res, next) {
32 var err = new Error('Not Found');
33 err.status = 404;
34 next(err);
35 });
36
37 // error handler
38 app.use(function(err, req, res, next) {
39 // set locals, only providing error in development
40 res.locals.message = err.message;
41 res.locals.error = req.app.get('env') === 'development' ? err : {};
42
43 // render the error page
44 res.status(err.status || 500);
45 res.render('error');
46 });
47
48 module.exports = app;
routes下新建api.js
1 var express = require('express');
2 var crypto = require('crypto');
3 var router = express.Router();
4
5 var token = "xxxxx"; //此处需要你自己修改!微信公众测试号里设置的token需要和这里一样
6
7 router.get('/getToken', function(req, res, next) {
8 var signature = req.query.signature;
9 var timestamp = req.query.timestamp;
10 var nonce = req.query.nonce;
11 var echostr = req.query.echostr;
12
13 /* 加密/校验流程如下: */
14 //1. 将token、timestamp、nonce三个参数进行字典序排序
15 var array = new Array(token,timestamp,nonce);
16 array.sort();
17 var str = array.toString().replace(/,/g,"");
18
19 //2. 将三个参数字符串拼接成一个字符串进行sha1加密
20 var sha1Code = crypto.createHash("sha1");
21 var code = sha1Code.update(str,'utf-8').digest("hex");
22
23 //3. 开发者获得加密后的字符串可与signature对比,标识该请求来源于微信
24 if(code===signature){
25 res.send(echostr)
26 }else{
27 res.send("error");
28 }
29 });
30
31 module.exports = router;
重启项目,ctrl + c 然后y回车 或者直接两次ctrl +c 然后npm start
登录微信测试公众号填写相关信息
访问https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login扫码进入会出现如下页面
appID和appsecret是自动分配的信息,用来后台实现公众号自定义菜单或者微信网页授权等功能用
接口配置信息就是微信接入的接口,微信服务器会用GET请求访问这个接口并匹配返回的信息,一致的话则认证成功(这里的路径http://xxxx.ngrok.io/api/getToken是根据你app.js里的路由和api.js里的get配置路径定义的,因为加密校验代码在api.js里,当然也可以配置http://xxxx.ngrok.io或者http://xxxx.ngrok.io/api或者别的http://xxxx.ngrok.io下的接口但是相应的api.js里的代码也要对应上,具体可以百度下express路由)
Token要跟你api.js里面的Token一致用来做加密校验,不一致的话当然校验也不会通过
JS接口安全域名是以后网页使用微信JSSDK时用,不加http https协议内容
填写接口配置信息然后点提交
页面返回结果失败的话重试,可能会碰到网络问题
返回成功则接入成功了,可以进行进一步开发了