说明：由于最近开发公众号，特写篇文章来记录下开发流程和开发中的坑。
开发用的技术为 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的调用!!!
第一次写文章，很多地方有漏洞，不完善，希望各位指出。