关于微信的jsdk的若干亲身实践之小结

• 前言：

业务来源：自主研发的手机app软件有分享文章到微信或者QQ以及微博的功能，而在微信中再次点击分享按钮的时候，情况就出现的不可把控了：

          文章显示的缩略图不能正常显示；文章的简介不能显示……而我们领导的要求便是再次分享的时候，显示自己app的logo，于是就开始了微信jsdk的整天研究。（题外话：其实在去年，自己就看过微信jsdk文档，但是苦于研究不出什么名堂，而且当时是找了一种‘投机取巧’的方法，算是完美的解决了当时的需求，但是意外总是在不经意间就降临了，那天突然看见了微信公众号中说道：“

JSSDK自定义分享接口的策略调整

2017-03-29 微信团队 微信开发者

为规范自定义分享链接功能在网页上的使用，自2017年4月25日起，JSSDK“分享到朋友圈”及“发送给朋友”接口，自定义的分享链接，其域名或路径必须与当前页面对应的公众号JS安全域名一致，否则将调用失败。

例如，当前页面是 http://www.abc.com/123，其公众号对应的JS安全域名为 www.abc.com 以及 www.xyz.com，则分享自定义链接 http://www.abc.com/456 可以成功，分享 http://www.xyz.com/123 或 http://www.def.com/123 均将失败。

对于未接入微信JSSDK或已接入但JSSDK调用失败的网页，被用户分享时，分享卡片将统一使用默认缩略图和标题简介，不允许自定义。

接口完整用法请参考《微信JSSDK说明文档》，请开发者及时完成调整。”）

这样的突发情况就如晴天霹雳，让自己不得不面对再次拾起关于微信jsdk的研究。历经“山重水复”的过程，特地把踩过的坑粉分享出来，这样小伙伴们就不会陷入同样的错误中了（下面的版本是基于nodejs环境下的~）。

• 过程：

       这是官方文档地址：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=&lang=zh_CN，先看文档再上手；按照步骤，一步步进行；关于具体的文档中都有，小伙伴们仔细看文档肯定就能理解，接下来就只是说说自己在实现这个功能时，问题出在哪里吧……

      1.注意点一：（首先配置js接口安全域名，即程序运行的网址是什么，需要下载的文件，官网上直接下载配置即可；配置完成后，可在“开发者中心”查看对应的接口权限）； 

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

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

     3.注意点二，也是最关键最核心的部分，因为如果这里配置成功，后面便可成功的调用微信粉分享接口，否则便失败；

wx.config({

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

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

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

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

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

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

});

       这便是需要配置的东西，下面谈谈心酸的踩坑经历：

       1）timestamp        //当前时间戳  这里是秒级别的时间戳格式

let timestamp = parseInt( new Date().getTime()/1000);//秒级别

      2）nonceStr        //随机字符串  这里是保留长度为16的随机字符串

let nonceStr = Math.random().toString(36).substr(2,16);//长度为16的随机字符串

     3）signature   ——>  重点来了！关于这个签名的取值，硬生生的耗费了自己很长很长时间，也是因为自己不够聪明，没看清楚文档写的，这里还是要感谢老大，昨晚陪自己加班快十点找问题，直到今早上终于完美解决掉。
           关于动态产生的签名：

a.先使用appid，secret，通过get请求“https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=appid&secret=secret”，得到access_token；

b.用得到的access_token，再次通过get请求”https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='+access_token+'&type=jsapi”,最终得到jsapi_ticket；

c.签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分） 。对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。例如：

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

这里需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义，得到signature。

即signature=sha1(string1)。

      注意点：重点！

生成签名之前必须先了解一下jsapi_ticket，jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下，jsapi_ticket的有效期为7200秒，通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限，频繁刷新jsapi_ticket会导致api调用受限，影响自身业务，开发者必须在自己的服务全局缓存jsapi_ticket 。原本打算在项目中使用session来缓存这两个，最终在老大的知道下，这里使用的是redis存储缓存；

完整前台HTML页面代码：

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    jQuery(function () {
       //页面初始化完成后，先post请求将当前页面的url传到后台，进行signature的计算，而这里一定记得要: encodeURIComponent()一下，去后台后在: decodeURIComponent()，要不就是频繁报“invalid signature"的错误
        jQuery.post("/share/getshare", {"url": encodeURIComponent(window.location.href.split('#')[0]),"t": new Date().getTime()}, function (result) {
            if (result.errno != 0) {
                alert("您当前的网络不稳定请稍后再试！");
                return;
            }
            var shareUrl = result.data.url;
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: 'wxf919e3b61eca36ae', // 必填，公众号的唯一标识
                timestamp: result.data.timestamp, // 必填，生成签名的时间戳
                nonceStr: result.data.nonceStr, // 必填，生成签名的随机串
                signature: result.data.signature,// 必填，签名，见附录1
                jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline','onMenuShareQQ','onMenuShareWeibo'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
            wx.ready(function () {
                var title = "{{data.title}}";
                var desc = "{{data.scontent}}"?"{{data.scontent}}":"";
                var imgUrl = "http://static.gangguwang.com/image/2016/12/16/16/55/5853abfc101887000800111f.jpg";
                wx.onMenuShareTimeline({//“分享到朋友圈”
                    title: title, // 分享标题
                    link: shareUrl, // 分享链接
                    imgUrl: imgUrl, // 分享图标
                    success: function () {
                        // 用户确认分享后执行的回调函数
                    },
                    cancel: function () {
                        // 用户取消分享后执行的回调函数
                    }
                });
                wx.onMenuShareAppMessage({//“分享给朋友”
                    title: title, // 分享标题
                    desc: desc, // 分享描述
                    link: shareUrl, // 分享链接
                    imgUrl: imgUrl, // 分享图标
                    type: 'link', // 分享类型,music、video或link，不填默认为link
                    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                    success: function () {
                        console.log('succ~');
                        // 用户确认分享后执行的回调函数
                    },
                    cancel: function () {
                        console.log('fail~');
                        // 用户取消分享后执行的回调函数
                    }
                });
                wx.onMenuShareQQ({//“分享到QQ”
                    title: title, // 分享标题
                    desc: desc, // 分享描述
                    link: shareUrl, // 分享链接
                    imgUrl: imgUrl, // 分享图标
                    success: function () {
                        // 用户确认分享后执行的回调函数
                    },
                    cancel: function () {
                        // 用户取消分享后执行的回调函数
                    }
                });
                wx.onMenuShareWeibo({//“分享到腾讯微博”
                    title: title, // 分享标题
                    desc: desc, // 分享描述
                    link: shareUrl, // 分享链接
                    imgUrl: imgUrl, // 分享图标
                    success: function () {
                        // 用户确认分享后执行的回调函数
                    },
                    cancel: function () {
                        // 用户取消分享后执行的回调函数
                    }
                });
            });
        });
    })
</script>

后台的处理逻辑：

//这里先要引入sha1依赖包 
//getshare方法便是获得动态签名的方法（这是基于node.js环境下的）
async getshareAction(){
        //将前台得到的url先decodeURIComponent()一下再使用
        let url = decodeURIComponent(this.post().url);
        //当前时间戳
        let timestamp = parseInt( new Date().getTime()/1000);
        //随机字符串
        let nonceStr = Math.random().toString(36).substr(2,16);
        ////获取缓存信息 存在redis中，从 redis 里获取缓存(全局缓存jsapi_ticket   ----->   有效期7200秒)
        let ticket = await think.cache('ticket_weixinshare_ywg', undefined, {type: 'redis'});
        let access_token = await think.cache('token_weixinshare_ywg', undefined, {type: 'redis'});
        let req = think.promisify(request.get);
        if(!access_token){//不存在
            let options1 = {//获取 acess_token
                url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=appid&secret=secret',
                method: "get"
            };
            let res = await req(options1);
            access_token = JSON.parse(res.body).access_token;
            //设置缓存  access_token（这里是thinkjs的redis设置缓存的方法）
            await think.cache('token_weixinshare_ywg', access_token);
        }
        if(!ticket){
            let options2={//计算 jsapi_ticket
                url: 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='+access_token+'&type=jsapi',
                method: "get"
            };
            let res2 = await req(options2);
            if(JSON.parse(res2.body).errcode==0){
                ticket=JSON.parse(res2.body).ticket;
                //设置缓存 ticket
                await think.cache('ticket_weixinshare_ywg', ticket);
            }else{
                console.log('=========error==='+JSON.parse(res2.body).errmsg)
            }
        }
        //按照字段名的ASCII 码从小到大排序（字典序）
        let raw = async (args) =>{
            let keys = Object.keys(args);
            keys = keys.sort();
            let newArgs = {};
            keys.forEach(function (key) {
                newArgs[key.toLowerCase()] = args[key];
            });
            let string = '';
            for (let k in newArgs) {
                string += '&' + k + '=' + newArgs[k];
            }
            string = string.substr(1);
            return string;
        };
        let ret = {
            jsapi_ticket: ticket,
            nonceStr: nonceStr,
            timestamp: timestamp,
            url: url
        };
        let string1 = await raw(ret);
        //将得到的字符串进行sha1加密，然后返回将 wx.config()中所需要的值返回到前台页面
        let signature = sha1(string1);
        this.success({"timestamp":timestamp,"nonceStr":nonceStr,"signature":signature,"url":url});
    }

至此运行，便可以神清气爽的看见下面的提示：

而昨天一整天的情况便是：

而对于“invalid signature”的问题排查官方文档也给出了相应的介绍：

2.invalid signature签名错误。建议按如下顺序检查：

   1.确认签名算法正确，可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。

   2.确认config中nonceStr（js中驼峰标准大写S）, timestamp与用以签名中的对应noncestr, timestamp一致。

   3.确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认)，包括'http(s)://'部分，以及'？'后面的GET参数部分,但不包括'#'hash后面的部分。

   4.确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。

   5.确保一定缓存access_token和jsapi_ticket。

   6.确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去'#'hash部分的链接（可用location.href.split('#')[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。

而自己按照步骤来实现的获取签名，也总是报错的根本原因就是url取得有问题，因此建议大家自己阅读文档，获取到页面的完整路径并先进行处理后再使用。（自己使用的页面完整url路径：http://127.0.0.1:8361/share?id=xxx）.

        4.成功获得签名后，便可以通过ready接口处理接下来的数据（关于这部分的介绍，文档中很详细，相信大家一看便知，就不多说了。）

• 后言：

       关于掉微信分享接口，其实这个功能应该在年前就做好的，只是当时也是因为签名总是获取失败的原因而将此搁置，直至今天不得不重新开始研究，突然明白了“凡是出来混，总是要还的”这句至理名言的真理性。而自己遇到的这个问题，也希望以后不会再犯，还有可以用到的小伙伴们也能用上。