微信服务号内容分享和自定义分享

之前的文章后台通过useragent判断用户是否从手机端访问页面，公司申请了微信服务号，基础功能完成之后，发现一个问题就是服务号中所有右上角中点击之后可以分享到朋友圈，发送给朋友，分享到QQ，最开始想的办法是隐藏。不过后来发现大多数的公共账号并没有隐藏，只是在分享的时候修改跳转链接。如果没有做过微信开发估计需要思考一下，不用很久你就知道有一个插件叫微信JS-SDK。

开发步骤

微信JS-SDK使用起来很方便，不过大多数的时候我们耗费的时候是在config上面，服务端的Access_Token和JS_Ticket保存当然也是必要的步骤，以下步骤是个人根据实际开发总结的步骤，可根据个人习惯自行安排。

①在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js，请注意，如果你的页面启用了https，务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ，否则将无法在iOS9.0以上系统中成功使用JSSDK；（官方）

②获取Access_Token，https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET，其中APPID和APPSECRET是微信公共号的ID和密钥，有效期为7200s.

③通过获取的Access_Token然后获取生成签名之前需要先获取jsapi_ticket，jsapi_ticket是公众号用于调用微信JS接口的临时票据https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi；

④由于Access_Token和JSjsapi_ticket有效期都是两个小时，每天都有一定的次数限制，因为请自行在获取Access_Token和Ticket之后保存在自己的数据库中，方便测试也方便上线，同时需要定时刷新Access_Token和Ticket；

⑤根据配置文件中的参数信息配置参数，appId不需要解释，就是签名比较难搞定，对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1，然后对string1进行sha1签名，可以获取签名:

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

 签名参数顺序如下所示:

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

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

⑦将所有的操作都放在wx.ready中执行:

wx.ready(function(){

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

 开发历程

①如果单纯只是开发步骤稍微都凑点字数和图片也能搞成一篇文章，不过程序猿还是务实点比较好，对于上面的步骤你有可能有迷惑的地方，有不理解的地方，比较重点的问题是关于config的参数的形式，代码参考如下:

var 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;
};

/**
 * 传入Ticket和Url，Url应该是在配置的域名之下
 * 
 * @returns
 */
var sign = function(jsapi_ticket, url) {
    var ret = {
        jsapi_ticket: jsapi_ticket,
        nonceStr: createNonceStr(),
        timestamp: createTimestamp(),
        url: url
    };

    var string = raw(ret);
    shaObj = new jsSHA("SHA-1", "TEXT");
    shaObj.update(string);
    ret.signature = shaObj.getHash("HEX");
    return ret;
};

exports.sign = sign;

 需要jssha进行sha-1签名，如果不了解可以参考一下官网，最新版本是2.0.2；

②关于定时刷新本人使用的node-schedule，当然也可以使用later，代码参考如下:

exports.tokenSchedule = function() {
    var rule = new schedule.RecurrenceRule();
    rule.minute=0;
    var job = schedule.scheduleJob(rule, function() {　　
        // 刷新
    });
};

 ③自定义分享代码参考如下:

  wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '<%=appId%>', // 必填，公众号的唯一标识
        timestamp: '<%=timestamp%>', // 必填，生成签名的时间戳
        nonceStr: '<%=nonceStr%>', // 必填，生成签名的随机串
        signature: '<%=signature%>', // 必填，签名，见附录1
        jsApiList: ['hideOptionMenu', 'onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });
    wx.ready(function() {
        // wx.hideOptionMenu(); 隐藏分享
        wx.onMenuShareTimeline({
            title: '博客园-FlyElephant', // 分享标题
            link: 'http://www.cnblogs.com/xiaofeixiang/', // 分享链接
            imgUrl: '', // 分享图标
            success: function() {
                // 用户确认分享后执行的回调函数
            },
            cancel: function() {
                // 用户取消分享后执行的回调函数
            }
        });
    });

这样一看微信开发就很简单了~