基于node+express开发wx.config配置项

开局一张图

image.png

1. express创建项目后
   需要用的插件，敲命令安装
   cnpm install jssha js-base64 request --save

2. 根目录下新建文件夹 utils,内建两个js sign.js,wx.js
   image.png

3. sign.js代码如下

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
 */
var sign = function(jsapi_ticket, url) {
    var ret = {
        jsapi_ticket: jsapi_ticket,
        nonceStr: createNonceStr(),
        timestamp: createTimestamp(),
        url: url
    };
    var string = raw(ret);
    jsSHA = require('jssha');
    shaObj = new jsSHA(string, 'TEXT');
    ret.signature = shaObj.getHash('SHA-1', 'HEX');

    return ret;
};

module.exports = sign;

4.wx.js代码如下

/*********************************************************************************
 * @file: 返回微信开发需要的config数据
 * @desc:
 *      1,通过appid和secret获取access_token
 *      2.根据access_token获取ticket
 *      3.根据ticket和url(访问的页面地址由接口传过来 )通过sgin加密返回前度需要用到的config数据
 * @ahthor: leinov
 * @usedate:2018-11-07
 **********************************************************************************/

const request = require("request");
const Base64 = require("js-base64").Base64;
const sign = require("./sign.js");
const base = {
    appId: "wx66f269ee4713d667", //公众号的appid
    secret: "c5d0693fb91781906cfe1e856cdb851e ", //公众号的secret 重要不要暴露给前端
    wxapi: "https://api.weixin.qq.com/cgi-bin"
};

/**
 * 根据appid,secret获取access_token
 */
function getAccessToken() {
    return new Promise((resolve, reject) => {
        request.get(`${base.wxapi}/token?grant_type=client_credential&appid=${base.appId}&secret=${base.secret}`, function(error, response, body) {
            if (error !== null) {
                reject("获取access_token失败 检查getAccessToken函数");
            }

            resolve(JSON.parse(body));
        });
    });
}

/**
 * 根据access_token获取api_ticket
 *
 * @param  {String} access_token
 * @return {Promise}
 */
function getTicket(access_token) {
    return new Promise((resolve, reject) => {
        request.get(`${base.wxapi}/ticket/getticket?access_token=${access_token}&type=jsapi`, function(error, response, body) {
            if (error !== null) {
                reject("获取api_ticket失败 检查getTicket函数");
            }

            resolve(JSON.parse(body));
        });
    });
}

/**
 * 根据api_ticket和url通过加密返回所有config数据
 *
 * @param  {String} href
 * @return {Object} configdata
 */
async function getConfigData(href) {
    let configData;
    try {
        const accessTokenData = await getAccessToken();
        const ticketData = await getTicket(accessTokenData.access_token);
        const decodeHref = (href);
        configData = sign(ticketData.ticket, decodeHref);
        configData.appId = base.appId;
    } catch (err) {
        //打印错误日志
        console.log(err);
        configData = {};
    }
    return configData;
}

module.exports = getConfigData;

注意：appid，appsecret ，可以去申请测试号获取
网址https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

5. router文件夹内写接口，我在index.js内直接写的，代码如下：

var express = require('express');
var router = express.Router();
var getConfigData = require("../utils/wx");

/* GET home page. */
router.post('/getConfigData', function(req, res, next) {
    let href = req.body.href; //get获取前端传来的base64网页地址
    getConfigData(href).then((data) => {
        res.json({
            code: 200,
            data: data,
            msg: "请求成功！"
        })
    });
});

module.exports = router;

前端请求 http://localhost:3000/getConfigData post方式，传参 href，不用编码

image.png

记得要设置js安全域名要和传过去的href一样,注意不要加https://或http://