微信分享踩过的坑

前言：公司一直有微信项目，在原有的基础服务上开发，感觉都挺简单的。直到最近开始的小程序项目，重新把坑踩了一遍，才知道以前的开发可能都是蒙的。

今天总结一下微信分享（微信js模块都可以参考）

wx.config({
        debug: false,
        appId: '${jsapi.appid}',
        timestamp: '${jsapi.timestamp}',
        nonceStr: '${jsapi.nonceStr}',
        signature: '${jsapi.signature}',
        jsApiList: [
            'checkJsApi',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'onMenuShareQZone',
            'chooseImage'
        ]
    });
    showInWeixin();
    function showInWeixin() {
        //判断是否是微信环境
        var title = 'title ';
        var desc = '描述';
        var imgUrl = "http://m.chuangchuang.cn/img/fathersDay/shareF.png";
        var url = window.location.href;
        wx.ready(function(){
            wx.onMenuShareTimeline({
                title: title, // 分享标题
                desc:desc,
                link: url, // 分享链接
                imgUrl: imgUrl, // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
            wx.onMenuShareAppMessage({
                title: title, // 分享标题
                desc:desc,
                link: courseUrl, // 分享链接
                imgUrl: imgUrl, // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        });
        wx.error(function(res){

            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。

        });
    }

上面代码是页面需要添加的js代码，其中

appId: '${jsapi.appid}',
timestamp: '${jsapi.timestamp}',
nonceStr: '${jsapi.nonceStr}',
signature: '${jsapi.signature}',

这是个参数是后台需要返回的

     appId:公众号提供的

     timestamp：时间戳

     nonceStr ：随机数

      signature ：签名

其中signature 需要重点说以下，大部分的坑都在这里。

生成signature需要

string1 = "jsapi_ticket=" + jsapi_ticket +
                "&noncestr=" + nonce_str +
                "×tamp=" + timestamp +
                "&url=" + url;

        MessageDigest crypt = MessageDigest.getInstance("SHA-1");
        crypt.reset();
        crypt.update(string1.getBytes("UTF-8"));
        signature = byteToHex(crypt.digest());

生成jsapi_ticket需要下面的这个接口（微信提供）

String url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi";

坑来了，生成signature的url必须是需要分享页面的完整路径，http和http协议，打war包的包名一个都不能少，线上线下要考虑清楚，nginx配置需慎重。

微信调试报 {"errMsg":"config:invalid signature}  这个错误，别想了先把页面的URI和生成signature的url贴出来比较，90%是不一样的（是不是没有把war的包名拼上，别在给自己挖坑了，开发要养成习惯，本地也要打包名，nginx配置可以避免这个问题，但是你也不要一个域名配置两个应用，也吧包名省了吧。）

好了后端的坑也没多少，再说说前端的坑吧

 wx.onMenuShareTimeline({
                title: title, // 分享标题
                desc:desc,
                link: url, // 分享链接
                imgUrl: imgUrl, // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });

看看上面的代码，知道哪一个参数是大哥吗？别想了就是站在中央的 自带光环的 “link“ ，这个就是分享出去的链接，必须必须是完整的域名，必须必须是在微信公众平台配置的，不明白看图

js接口安全域名看到了吗，需要在这里配置

例如在这里配置了  www.baidu.com  ，那么只有link 是 www.baidu.com/**/**  自定义的title  imageUrl desc 才会生效，否则默认的是页面的title元素 当前链接，第一 标签。

坑说完了，也就没有什么秘密了。大家还遇到什么坑了，一起分享吧。