微信jssdk接入指南

利用nodejs+express快速搭建公众号开发环境

jssdk:就是一个js 文件，这个JS文件可以 在微信公共账号里面想调用手机原生的功能，比如扫描二维码，拍照，分享到朋友圈自定义显示等等！
有的小伙伴可能要问了，调用手机原生功能，直接调用原生App提供的方法就行了，为什么还要后台搭建环境？微信为了安全考虑，不会让随便什么人都能调用他的方法的，想要调用，必须注册成为开发者，而且有一套签名验证流程，只有通过这些验证，才能成功调用SDK里的方法。
那么具体流程是怎样的呢？注册账号这一步就不说了，假设你已经成功注册一个开发者账号，我们从前端开始。
微信开发者文档中说，调用SDK，分为五个步骤：
1.绑定域名，先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”
2.步骤二：引入JS文件在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js
3.步骤三：通过config接口注入权限验证配置

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

4.步骤四：通过ready接口处理成功验证

wx.ready(function(){
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

5.步骤五：通过error接口处理失败验证

wx.error(function(res){
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

通过以上步骤可以看出，调用的关键是在步骤三，其余几个步骤都好理解，第三步wx.config方法的参数，timestamp时间戳、nonceStr随机串，signature签名从哪里来呢？没做过微信开发的想必看着官方文档也会懵。我们下面介绍的核心内容都是围绕这三个参数的获取来讲的。
打开这个网站，http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login，
申请测试号。然后进行相关配置；
第一步：配置url和token

1.png
2.png
注：Url：你服务器的地址，必须公网上的地址
Token：这个token是我们开发者自己随意填写的，微信服务器会给你上面URL 会发送一个请求，带上这个token，再与后台自定义token做一致性的验证，是同一个token就验证通过。（意思就是你在这里写的token跟调用验证方法传入token必须要一样） 3.png
配置完成后，后台生成签名：分为3步；
1.使用之前拿到的 appId和appsecre t向微信获取全局唯一票据access_token（获取就可以了）
http请求方式: GET
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
2：使用access_token获取api_ticket（此调用次数受限，需缓存到服务器）
http请求方式: GET
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=wx_card
3：根据api_ticket和js接口安全域名（访问url） 一起生成签名，再返回给前端：
以上讲了jssdk接入流程，下面我们就根据这个流程，用nodejs作后端，搭建一个简单的开发环境。搭建之前有个问题，就是在配置url和token这一步的时候，我们需要一个公网能够访问得到的域名，作为一个普通开发者来说，我们并没有域名，该怎么办？咱们实际开发的解决方案就是利用花生壳一类的工具进行映射，将我们本地服务映射到公网上。这类工具很多，花生壳很常用，一个月几块钱。当然也有免费的，ngrok,免费的有个缺点就是访问速度慢，域名也是每次打开都随机生成，修改很麻烦，当然，本着节约精神，我还是用免费的。

真实搭建开始

二话不说上后台代码,代码里面有注释，不用过多解释了吧。

var express = require('express'); //node的一个框架 就是相当于jquery
var path = require('path');
var request = require('./request.js');
var ejs = require('ejs'); // 后台模板库
var wechat = require('wechat'); //第三方处理微信推送的库
var https = require('https'); // node 端 请求别的服务的模块
var sign = require('./sign'); //微信提供的签名工具
var app = express();

app.set('views', './views');
app.engine('.html', ejs.__express);
app.set('view engine', 'html');


app.use(express.static(path.join(__dirname, 'assets')));
//发送请求
app.get('/index', function(req, res) {
    res.render('index');
});
//处理URL 验证的 微信服务器要通过get请求来测试的
app.get('/weixin', wechat('wechat', function(req, res, next) {
    console.log('true');
}));
//处理后台获取签名的请求
app.post('/getSignature', function(req, res) {
    var token = 'wechat',
        appsecret = '3c8dfb57bd4c3f5e189a63e8c10defee', //你申请的
        APPID = 'wx249331f661eb5583', //你申请的id
        url = 'http://tanghui.tunnel.qydev.com/index' //JS接口安全域名 参与签名用的
    Res = res;
    //发送https get请求 获取 access_token;l
    https.get("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + APPID + "&secret=" + appsecret, function(res) {
        var datas = [];
        var size = 0;
        res.on('data', function(data) {
            datas.push(data);
            size += data.length;
        });
        res.on("end", function() {
            var buff = Buffer.concat(datas, size);
            var result = buff.toString();
            //console.log(JSON.parse(result).access_token);
            // 获取 jsapi_ticket //异步嵌套是不合理的 不推荐这样 使用promise
            https.get('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + JSON.parse(result).access_token + '&type=jsapi', function(res) {
                var datas = [];
                var size = 0;
                res.on('data', function(data) {
                    datas.push(data);
                    size += data.length;
                });
                res.on('end', function() {
                    var buff = Buffer.concat(datas, size);
                    var rlt = buff.toString();
                    var config = sign(JSON.parse(rlt).ticket, url);
                    console.log(config);
                    Res.json(config);
                });

            }).on('error', function(e) {
                console.log("Got error: " + e.message);
            })


        });

    }).on('error', function(e) {
        console.log("Got error: " + e.message);
    });

});

var server = app.listen(3000, function() {
    var host = server.address().address;
    var port = server.address().port;
    console.log('Example app listening at http://%s:%s', host, port);
});

下面再看前端代码

$(function() {
        $('#getSign').on('click', function(event) {
            event.preventDefault();
            $.post("/getSignature", {}, function(config) {
            if (config != undefined && config != null) {

                wx.config({
                    debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId : 'wx249331f661eb5583', // 必填，appID公众号的唯一标识
                    timestamp : config.timestamp, // 必填，生成签名的时间戳
                    nonceStr : config.nonceStr, // 必填，生成签名的随机串
                    signature : config.signature,// 必填，签名，见附录1
                    jsApiList : [ 'scanQRCode' ,'onMenuShareTimeline',"chooseImage"]
                // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                });
                //alert('配置成功！');
            }
          });
        });

        wx.ready(function() {
            // 9.1.2 扫描二维码并返回结果
            document.querySelector('#scanQRCode1').onclick = function() {
                wx.scanQRCode({
                    needResult : 1,
                    desc : '微信调扫描',
                    success : function(res) {
                        //扫描成功的返回值
                        //alert(JSON.stringify(res));
                    }
                });
            };
            document.querySelector("#share").onclick = function(){
                alert("hhh");
                wx.onMenuShareTimeline({
                    title: '分享', // 分享标题
                    link: 'http://861261d9.ngrok.io/index', // 分享链接
                    imgUrl: './img3.png', // 分享图标
                    success: function () { 
                        // 用户确认分享后执行的回调函数
                        alert("成功");
                    },
                    cancel: function () { 
                        // 用户取消分享后执行的回调函数
                        alert("失败");
                    }
                });
            }
            document.querySelector('#choseImg').onclick = function(){
                wx.chooseImage({
                    count: 1, // 默认9
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function (res) {
                        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                      document.querySelector('img').src = localIds[0];
                      wx.uploadImage({
                            localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
                            isShowProgressTips: 1, // 默认为1，显示进度提示
                            success: function (res) {
                                var serverId = res.serverId;
                                alert(serverId)
                            }
                        });
                    }
                });
            }
            //分享到朋友圈
        });
    });

然后启动本地服务，并且打开ngrok,启动成功提示如下，ngrok使用方法自行百度

4.png

然后用手机微信访问图中localhost：3000左侧的公网地址，先点击获取签名，再点击拍照，我们可以看到，摄像头成功调起。注意，调摄像头之前一定要关注自己的测试账号。
以上就是jssdk简单的接入流程介绍，有不清楚的欢迎留言