微信公衆號開發

說明：因爲最近開發公衆號，特寫篇文章來記錄下開發流程和開發中的坑。
開發用的技術爲 react + express , nodejs做爲中間層。

一.配置篇

首先申請接口測試號
地址：https://mp.weixin.qq.com/wiki...

上面爲測試號配置頁面

1.接口配置信息 修改

這裏的接口配置信息 須要和 微信進行一次通訊，纔可以填寫。
這一層通訊是在nodejs層裏進行的。
在項目裏建立一個路由，通訊代碼以下：

const sha1 = require('sha1');
router.get('/wx', function(req, res) {
    const {
        signature,
        timestamp,
        nonce,
        echostr
    } = req.query;

    const token = config.token;

    let str = [token, timestamp, nonce].sort().join('');
    const sha = sha1(str);

    if( sha === signature) {
        console.log('驗證成功')
        res.send(echostr);
    } else {
        console.log('驗證失敗')
        res.send('驗證失敗');
    }
});

這裏的URL就是填寫你通訊路由的地址，Token要和 通訊代碼中的 token保持一致。
而後點擊 提交 按鈕，微信就會向你填寫的URL發起請求。URL和Token無誤，便可提交成功。

2.JS接口安全域名

主要是在調用微信JS-SDK時用到。
這裏咱們有作一個朋友圈分享功能,要調用SDK的頁面和分享的連接，要填寫在安全域名下，才能成功
(在下面的微信JS-SDK使用會講到)

3.受權回調頁面

這裏的域名填寫你項目的域名（例如）： xxx.com 便可，不須要加http/https。
到這裏爲止測試號配置就完成了!!!

二.微信網頁受權篇

接口地址爲：https://mp.weixin.qq.com/wiki...
這裏你可使用此地址上的接口進行本身編寫，也可使用別人封裝好的SDK。
這裏我使用的別人封裝好的SDK
https://github.com/node-webot...
這裏也是在node層進行處理

$ npm install wechat-oauth

var OAuth = require('wechat-oauth');
var client = new OAuth('your appid', 'your secret’);

生成引導用戶點擊的URL。

var url = client.getAuthorizeURL('redirectUrl', 'state', 'scope');

若是是PC上的網頁，請使用如下方式生成

var url = client.getAuthorizeURLForWebsite('redirectUrl');

獲取Openid和AccessToken
用戶點擊上步生成的URL後會被重定向到上步設置的 redirectUrl，而且會帶有code參數，咱們可使用這個code換取access_token和用戶的openid

client.getAccessToken('code', function (err, result) {
  var accessToken = result.data.access_token;
  var openid = result.data.openid;
});

複製代碼獲取用戶信息
若是咱們生成引導用戶點擊的URL中scope參數值爲snsapi_userinfo，接下來咱們就可使用openid換取用戶詳細信息（必須在getAccessToken方法執行完成以後）

client.getUser(openid, function (err, result) {
  var userInfo = result;
});

經過以上這幾個步驟，就能夠拿到用戶的信息!!!

三. 微信JS-SDK使用篇（這裏以朋友圈分享爲例子）

微信JS-SDK說明文檔
地址：https://mp.weixin.qq.com/wiki...
sdk使用：（這裏搬用下官網的文檔,這裏可詳細參考文檔,這裏惟一麻煩一點的地方就是 簽名算法）

步驟一：綁定域名
先登陸微信公衆平臺進入「公衆號設置」的「功能設置」裏填寫「JS接口安全域名」。

步驟二：引入JS文件
在須要調用JS接口的頁面引入以下JS文件，（支持https）：http://res.wx.qq.com/open/js/...

步驟三：經過config接口注入權限驗證配置

wx.config({
    debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
    appId: '', // 必填，公衆號的惟一標識
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名
    jsApiList: [] // 必填，須要使用的JS接口列表
});

這裏的timestamp，nonceStr，signature須要經過接口獲取,接下來咱們就來獲取 timestamp，nonceStr，signature（在node層處理）
這裏第一步就須要獲取access_token，
要調取微信的SDK，必需要獲取access_token,access_token是公衆號的全局惟一接口調用憑據，公衆號調用各接口時都需使用access_token,access_token有效期爲2個小時,而調取access_token接口的次數限制爲2000，因此須要存儲下來(存的方式看你本身)
獲取access_token接口:
https://mp.weixin.qq.com/wiki...

獲取access_token 和timestamp，nonceStr，signature代碼以下：

const rp = require('request-promise’);
const {sign} = require(‘./sign');
rp(`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${config.appID}&secret=${config.appsecret}`)
    .then(function (response) {
        const access_token = JSON.parse(response).access_token;
        setCookie(res, 'at', access_token);
        rp(`https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${access_token}&type=jsapi`)
            .then(function (response2) {
                let ticket = JSON.parse(response2).ticket;
                let signObj = sign(ticket, config.originUrl + req.originalUrl);
                setCookie(res, 'timestamp', signObj.timestamp);
                setCookie(res, 'nonceStr', signObj.nonceStr);
                setCookie(res, 'signature', signObj.signature);
                /*...*/
            }).catch(function () {
                /*...*/
            });
    }).catch(function () {
        /*...*/
    });

這裏setCookie是我本身寫的存cookie的方法，
這裏的sign是微信的簽名算法：
sign.js

'use strict';
const jsSHA = require('jssha');


var createNonceStr = function () {
    return Math.random().toString(36).substr(2, 15);
};

var createTimestamp = function () {
    return parseInt(new Date().getTime() / 1000) + '';
};

var raw = function (args) {
    var keys = Object.keys(args);
    keys = keys.sort();
    var newArgs = {};
    keys.forEach(function (key) {
        newArgs[key.toLowerCase()] = args[key];
    });

    var string = '';
    for (var k in newArgs) {
        string += '&' + k + '=' + newArgs[k];
    }
    string = string.substr(1);
    return string;
};

/**
 * @synopsis 簽名算法
 *
 * @param jsapi_ticket 用於簽名的 jsapi_ticket
 * @param url 用於簽名的 url ，注意必須動態獲取，不能 hardcode
 *
 * @returns
 */
exports.sign = function (jsapi_ticket, url) {
    var ret = {
        jsapi_ticket: jsapi_ticket,
        nonceStr: createNonceStr(),
        timestamp: createTimestamp(),
        url: url
    };
    var string = raw(ret);
    let shaObj = new jsSHA(string, 'TEXT');
    ret.signature = shaObj.getHash('SHA-1', 'HEX');
    return ret;
};

此時咱們已經把timestamp，nonceStr，signature存了起來，而後咱們來到前臺頁面獲取(我這裏使用的react)

componentDidMount () {
    wx.config({
        debug: false, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
        appId: appID, // 必填，公衆號的惟一標識
        timestamp: Cookies.get('timestamp'), // 必填，生成簽名的時間戳
        nonceStr: Cookies.get('nonceStr'),   // 必填，生成簽名的隨機串
        signature: Cookies.get('signature'), // 必填，簽名
        jsApiList: [
            'onMenuShareTimeline',
            'onMenuShareAppMessage'
        ] // 必填，須要使用的JS接口列表
    });
}

步驟四：在須要的地方調用接口,
代碼以下：

wx.ready(function() {
//分享給朋友
    wx.onMenuShareTimeline({
        title: '', // 分享標題
        link: href, // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
        imgUrl: imgUrl, // 分享圖標
    });
    wx.onMenuShareAppMessage({
        title: '', // 分享標題
        link: href, // 分享連接，該連接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
        imgUrl: imgUrl, // 分享圖標
    });
});

這裏就完成了對微信JS-SDK的調用!!!第一次寫文章，不少地方有漏洞，不完善，但願各位指出。