首页手记 nodejs微信公众号开发之微信开放的JS接口

nodejs微信公众号开发之微信开放的JS接口

标签：

Node.js Html5

这篇文章会一步一步带你，用 nodejs 实现微信公众号的分享接口。微信分享接口，需要认证的公众号才能调用。并且设置JS接口安全域名后，公众号开发者可在该域名下调用微信开放的JS接口。

配置安全域名

登录公众号，在公众号设置 - 功能设置 - JS接口安全域名中添加上你自己的调用域名。

官方文档

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=&lang=zh_CN

步骤一：绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注：登录后可在“开发者中心”查看对应的接口权限。

步骤二：引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js

如需使用摇一摇周边功能，请引入 http://res.wx.qq.com/open/js/jweixin-1.1.0.js

备注：支持使用 AMD/CMD 标准模块加载方法加载

步骤三：通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持 pushState 的H5新特性，所以使用 pushState 来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

wx.config({

debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

appId: '', // 必填，公众号的唯一标识

timestamp: , // 必填，生成签名的时间戳

nonceStr: '', // 必填，生成签名的随机串

signature: '',// 必填，签名，见附录1

jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2

});
步骤四：通过ready接口处理成功验证

wx.ready(function(){

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

});
参数说明

appId 公众号 id 没啥说的
timestamp 时间戳

//生成时间戳 10 位字符
var createTimestamp = function () {
return parseInt(new Date().getTime() / 1000) + '';
};
nonceStr 随机串

//生成随机字符串 15 位
var createNonceStr = function () {
return Math.random().toString(36).substr(2, 15);
};

//toString(arg) 规定表示数字的基数，使 2 ~ 36 之间的整数。若省略该参数，则使用基数 10。但是要注意，如果该参数是 10 以外的其他值，则 ECMAScript 标准允许实现返回任意值。
signature 签名
附录1-JS-SDK使用权限签名算法

jsapi_ticket

生成签名之前必须先了解一下 jsapi_ticket，jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下，jsapi_ticket的有效期为7200秒，通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限，频繁刷新jsapi_ticket会导致api调用受限，影响自身业务，开发者必须在自己的服务全局缓存jsapi_ticket 。

1.参考以下文档获取 access_token（有效期7200秒，开发者必须在自己的服务全局缓存access_token）：../15/54ce45d8d30b6bf6758f68d2e95bc627.html

2.用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）： https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
成功返回如下JSON：

{

"errcode":0,
"errmsg":"ok",                    "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
"expires_in":7200

}
获得jsapi_ticket之后，就可以生成JS-SDK权限验证的签名了。

签名算法

签名生成规则如下：参与签名的字段包括 noncestr（随机字符串）, 有效的 jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分）。对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。

即 signature=sha1(string1)。示例：

noncestr=Wm3WZYTPz0wzccnW

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg

timestamp=1414587457

url=http://mp.weixin.qq.com?params=value
步骤1. 对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1：

var ret = {
jsapi_ticket: jsapi_ticket,
nonceStr: createNonceStr(),
timestamp: createTimestamp(),
url: url
};

var raw = function (args) {
var keys = Object.keys(args);
keys = keys.sort(); //字典排序得到 keys ["jsapi_ticket", "nonceStr", "timestamp", "url"]
var newArgs = {};
keys.forEach(function (key) {
newArgs[key.toLowerCase()] = args[key]; //key val 转小写
});

  var string = '';
  for (var k in newArgs) {
    string += '&' + k + '=' + newArgs[k]; //用 & 链接 去掉第一个 &
  }
  string = string.substr(1);
  return string;

};

string1 = raw(ret);
//得到：jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value
步骤2. 对string1进行sha1签名，得到signature：

jsSHA = require('jssha');
shaObj = new jsSHA(string1, 'TEXT');
signature = shaObj.getHash('SHA-1', 'HEX');

//或者
var sha1 = require('sha1');
signature = sha1(string1);
//signature： 0f9de62fce790f9a083d5c99e95740ceb90c27ed
注意事项

1.签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。

2.签名用的url必须是调用JS接口页面的完整URL。

3.出于安全考虑，开发者必须在服务器端实现签名的逻辑。
前端代码参考

//load weixin
var ua = navigator.userAgent.toLowerCase(),
isWeixin = ua.indexOf('micromessenger') != -1;

isWeixin && document.write('<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> ');
function WxApi(opts, callback) {
var doc = document,
href = location.href,
hArr = href.split('/');
hArr.pop();

var $desc = doc.querySelector('meta[name=description]'),
    $img = doc.querySelector('img') ;

this.opts = {
    title: doc.title  '请加上标题',
    desc: $desc && $desc.getAttribute('content'),
    imgUrl: $img && $img.src,
    url: href
};
for (var i in opts) {
    this.opts[i] = opts[i]
}

this.callback = callback;

isWeixin ? this.init(this.callback) : console.log('NOT IN WX!');
//this.init()

}

WxApi.prototype.init = function (cb) {
var self = this;

$.ajax({
    url: 'http://****/core/cross/wxapi?callback=?',
    data: {url: location.href.split('#')[0]},
    type: 'GET',
    dataType: 'jsonp',
    success: function(res) {
        config(res.timestamp, res.nonceStr,res.signature);
        cb && cb();

    },
    error: function() {
        isWeixin ? self.init(cb) : console.log('NOT IN WX!');

        //alert('LOC ERROR...')
    }
});
function config(time, ns, sign) {
    wx.config({
        debug: !1,
        appId: '*************',
        timestamp: time,
        nonceStr: ns,
        signature: sign,
        jsApiList: [
            'checkJsApi',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'showOptionMenu',
            'hideOptionMenu',//wx.hideOptionMenu();
            'scanQRCode',    //scanQRCode
        ]
    });
}

};

WxApi.prototype.hideOM = function () {
if (!isWeixin) return;

var self = this;

wx.ready(function() {
    wx.hideOptionMenu();
})

};

WxApi.prototype.qr = function (fn) {
if (!isWeixin) return;

var self = this;

wx.ready(function() {
    wx.scanQRCode({
        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
        success: function (res) {
            var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
            fn && fn(result);
        }
    });
});

};

WxApi.prototype.share = function (obj) {
if (!isWeixin) return;
console.log('============');

var self = this;

wx.ready(function () {
    console.log('=========ready');

    wx.onMenuShareAppMessage({
        title: obj.title  self.opts.title,
        desc: obj.desc  self.opts.desc,
        link: obj.url  self.opts.url,
        imgUrl: obj.imgUrl  self.opts.imgUrl,
        trigger: function (res) {
        },
        success: function (res) {
        },
        cancel: function (res) {
        },
        fail: function (res) {
            alert(JSON.stringify(res));
        }
    });

    wx.onMenuShareTimeline({
        title: obj.title  self.opts.title,
        link: obj.url  self.opts.url,
        imgUrl: obj.imgUrl  self.opts.imgUrl,
        trigger: function (res) {
        },
        success: function (res) {
        },
        cancel: function (res) {
        },
        fail: function (res) {
            alert(JSON.stringify(res));
        }
    });

    wx.onMenuShareQQ({
        title: obj.title  self.opts.title,
        desc: obj.desc  self.opts.desc,
        link: obj.url  self.opts.url,
        imgUrl: obj.imgUrl  self.opts.imgUrl,
        trigger: function (res) {
        },
        complete: function (res) {
            console.log(JSON.stringify(res));
        },
        success: function (res) {
        },
        cancel: function (res) {
        },
        fail: function (res) {
            alert(JSON.stringify(res));
        }
    });

    wx.onMenuShareWeibo({
        title: obj.title  self.opts.title,
        desc: obj.desc  self.opts.desc,
        link: obj.url  self.opts.url,
        imgUrl: obj.imgUrl  self.opts.imgUrl,
        trigger: function (res) {
        },
        complete: function (res) {
            console.log(JSON.stringify(res));
        },
        success: function (res) {
        },
        cancel: function (res) {
        },
        fail: function (res) {
            alert(JSON.stringify(res));
        }
    });
});

};

点击查看更多内容