利用nodejs+express快速搭建公眾號(hào)開發(fā)環(huán)境

jssdk:就是一個(gè)js 文件，這個(gè)JS文件可以 在微信公共賬號(hào)里面想調(diào)用手機(jī)原生的功能民晒，比如掃描二維碼精居，拍照，分享到朋友圈自定義顯示等等潜必！
有的小伙伴可能要問了靴姿，調(diào)用手機(jī)原生功能，直接調(diào)用原生App提供的方法就行了磁滚，為什么還要后臺(tái)搭建環(huán)境佛吓？微信為了安全考慮，不會(huì)讓隨便什么人都能調(diào)用他的方法的垂攘，想要調(diào)用维雇，必須注冊(cè)成為開發(fā)者，而且有一套簽名驗(yàn)證流程晒他，只有通過這些驗(yàn)證吱型，才能成功調(diào)用SDK里的方法。
那么具體流程是怎樣的呢仪芒？注冊(cè)賬號(hào)這一步就不說了唁影，假設(shè)你已經(jīng)成功注冊(cè)一個(gè)開發(fā)者賬號(hào)耕陷，我們從前端開始掂名。
微信開發(fā)者文檔中說，調(diào)用SDK哟沫，分為五個(gè)步驟：
1.綁定域名饺蔑，先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”
2.步驟二：引入JS文件在需要調(diào)用JS接口的頁(yè)面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js
3.步驟三：通過config接口注入權(quán)限驗(yàn)證配置

wx.config({
    debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來嗜诀，若要查看傳入的參數(shù)猾警，可以在pc端打開孔祸，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印发皿。
    appId: '', // 必填崔慧，公眾號(hào)的唯一標(biāo)識(shí)
    timestamp: , // 必填，生成簽名的時(shí)間戳
    nonceStr: '', // 必填穴墅，生成簽名的隨機(jī)串
    signature: '',// 必填惶室，簽名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

4.步驟四：通過ready接口處理成功驗(yàn)證

wx.ready(function(){
    // config信息驗(yàn)證后會(huì)執(zhí)行ready方法玄货，所有接口調(diào)用都必須在config接口獲得結(jié)果之后皇钞，config是一個(gè)客戶端的異步操作，所以如果需要在頁(yè)面加載時(shí)就調(diào)用相關(guān)接口松捉，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行夹界。對(duì)于用戶觸發(fā)時(shí)才調(diào)用的接口，則可以直接調(diào)用隘世，不需要放在ready函數(shù)中可柿。
});

5.步驟五：通過error接口處理失敗驗(yàn)證

wx.error(function(res){
    // config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗(yàn)證失敗丙者，具體錯(cuò)誤信息可以打開config的debug模式查看趾痘，也可以在返回的res參數(shù)中查看，對(duì)于SPA可以在這里更新簽名蔓钟。
});

通過以上步驟可以看出永票，調(diào)用的關(guān)鍵是在步驟三，其余幾個(gè)步驟都好理解滥沫，第三步wx.config方法的參數(shù)侣集，timestamp時(shí)間戳、nonceStr隨機(jī)串兰绣，signature簽名從哪里來呢世分？沒做過微信開發(fā)的想必看著官方文檔也會(huì)懵。我們下面介紹的核心內(nèi)容都是圍繞這三個(gè)參數(shù)的獲取來講的缀辩。
打開這個(gè)網(wǎng)站臭埋，http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login，
申請(qǐng)測(cè)試號(hào)臀玄。然后進(jìn)行相關(guān)配置瓢阴；
第一步：配置url和token

1.png

2.png

3.png

真實(shí)搭建開始

二話不說上后臺(tái)代碼,代碼里面有注釋闺金，不用過多解釋了吧逾滥。

var express = require('express'); //node的一個(gè)框架 就是相當(dāng)于jquery
var path = require('path');
var request = require('./request.js');
var ejs = require('ejs'); // 后臺(tái)模板庫(kù)
var wechat = require('wechat'); //第三方處理微信推送的庫(kù)
var https = require('https'); // node 端 請(qǐng)求別的服務(wù)的模塊
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')));
//發(fā)送請(qǐng)求
app.get('/index', function(req, res) {
    res.render('index');
});
//處理URL 驗(yàn)證的 微信服務(wù)器要通過get請(qǐng)求來測(cè)試的
app.get('/weixin', wechat('wechat', function(req, res, next) {
    console.log('true');
}));
//處理后臺(tái)獲取簽名的請(qǐng)求
app.post('/getSignature', function(req, res) {
    var token = 'wechat',
        appsecret = '3c8dfb57bd4c3f5e189a63e8c10defee', //你申請(qǐng)的
        APPID = 'wx249331f661eb5583', //你申請(qǐng)的id
        url = 'http://tanghui.tunnel.qydev.com/index' //JS接口安全域名 參與簽名用的
    Res = res;
    //發(fā)送https get請(qǐng)求 獲取 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, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來，若要查看傳入的參數(shù)败匹，可以在pc端打開寨昙，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印掀亩。
                    appId : 'wx249331f661eb5583', // 必填舔哪，appID公眾號(hào)的唯一標(biāo)識(shí)
                    timestamp : config.timestamp, // 必填，生成簽名的時(shí)間戳
                    nonceStr : config.nonceStr, // 必填归榕，生成簽名的隨機(jī)串
                    signature : config.signature,// 必填尸红，簽名吱涉，見附錄1
                    jsApiList : [ 'scanQRCode' ,'onMenuShareTimeline',"chooseImage"]
                // 必填刹泄，需要使用的JS接口列表外里，所有JS接口列表見附錄2
                });
                //alert('配置成功！');
            }
          });
        });

        wx.ready(function() {
            // 9.1.2 掃描二維碼并返回結(jié)果
            document.querySelector('#scanQRCode1').onclick = function() {
                wx.scanQRCode({
                    needResult : 1,
                    desc : '微信調(diào)掃描',
                    success : function(res) {
                        //掃描成功的返回值
                        //alert(JSON.stringify(res));
                    }
                });
            };
            document.querySelector("#share").onclick = function(){
                alert("hhh");
                wx.onMenuShareTimeline({
                    title: '分享', // 分享標(biāo)題
                    link: 'http://861261d9.ngrok.io/index', // 分享鏈接
                    imgUrl: './img3.png', // 分享圖標(biāo)
                    success: function () { 
                        // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
                        alert("成功");
                    },
                    cancel: function () { 
                        // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
                        alert("失敗");
                    }
                });
            }
            document.querySelector('#choseImg').onclick = function(){
                wx.chooseImage({
                    count: 1, // 默認(rèn)9
                    sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖特石，默認(rèn)二者都有
                    sourceType: ['album', 'camera'], // 可以指定來源是相冊(cè)還是相機(jī)盅蝗，默認(rèn)二者都有
                    success: function (res) {
                        var localIds = res.localIds; // 返回選定照片的本地ID列表，localId可以作為img標(biāo)簽的src屬性顯示圖片
                      document.querySelector('img').src = localIds[0];
                      wx.uploadImage({
                            localId: localIds[0], // 需要上傳的圖片的本地ID姆蘸，由chooseImage接口獲得
                            isShowProgressTips: 1, // 默認(rèn)為1墩莫，顯示進(jìn)度提示
                            success: function (res) {
                                var serverId = res.serverId;
                                alert(serverId)
                            }
                        });
                    }
                });
            }
            //分享到朋友圈
        });
    });

然后啟動(dòng)本地服務(wù)，并且打開ngrok,啟動(dòng)成功提示如下逞敷，ngrok使用方法自行百度

4.png

然后用手機(jī)微信訪問圖中l(wèi)ocalhost：3000左側(cè)的公網(wǎng)地址狂秦，先點(diǎn)擊獲取簽名，再點(diǎn)擊拍照推捐，我們可以看到裂问，攝像頭成功調(diào)起。注意牛柒，調(diào)攝像頭之前一定要關(guān)注自己的測(cè)試賬號(hào)堪簿。
以上就是jssdk簡(jiǎn)單的接入流程介紹，有不清楚的歡迎留言