微信JS-SDK1.6用updateTimelineShareData分享朋友圈无效的坑

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="/draw/jquery.rotate.min.js"></script>

<!--JS SDK 1.6-->
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>

    $(function() {
        var $btn = $('.g-lottery-img');// 旋转的div
        var playnum = 1; //初始次数，由后台传入
        $('.playnum').html(playnum);//显示还剩下多少次抽奖机会
        var isture = 0;//是否正在抽奖
        var clickfunc = function() {
            var data = [1, 2, 3, 4, 5, 6];//抽奖
            //data为随机出来的结果，根据概率后的结果
            data = data[Math.floor(Math.random() * data.length)];//1~6的随机数
            switch(data) {
                case 1:
                    rotateFunc(1, 0, '恭喜您获得2000元理财金');
                    break;
                case 2:
                    rotateFunc(2, 0, '恭喜您获得2000元理财金2');
                    break;
                case 3:
                    rotateFunc(3, 0, '恭喜您获得2000元理财金3');
                    break;
                case 4:
                    rotateFunc(4, -60, '谢谢参与4');
                    break;
                case 5:
                    rotateFunc(5, 120, '谢谢参与5');
                    break;
                case 6:
                    rotateFunc(6, 120, '谢谢参与6');
                    break;
            }
        }
        $(".playbtn").click(function() {
            if(isture) return; // 如果在执行就退出
            isture = true; // 标志为 在执行
            if(playnum <= 0) { //当抽奖次数为0的时候执行
                alert("没有次数了。分享后可多获取一次抽奖机会。");
                $('.playnum').html(0);//次数显示为0
                isture = false;
            } else { //还有次数就执行
                playnum = playnum - 1; //执行转盘了则次数减1
                if(playnum <= 0) {
                    playnum = 0;
                }
                $('.playnum').html(playnum);
                clickfunc();
            }
        });
        var rotateFunc = function(awards, angle, text) {
            isture = true;
            $btn.stopRotate();
            $btn.rotate({
                angle: 0,//旋转的角度数
                duration: 4000, //旋转时间
                animateTo: angle + 1440, //给定的角度,让它根据得出来的结果加上1440度旋转
                callback: function() {
                    isture = false; // 标志为 执行完毕
                    alert(text);
                }
            });
        };


        //JS-SDK的页面必须先注入配置信息
        wx.config({
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: '[[${appId}]]', //后台 必填，公众号的唯一标识
            timestamp: [[${timestamp}]], // 必填，后台生成签名的时间戳
            nonceStr: '[[${nonceStr}]]', // 必填，后台生成签名的随机串
            signature: '[[${signature}]]',// 必填，后台签名  //
            jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage','onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareQZone']
        });
        //  jsApiList: ['updateTimelineShareData']
   
        //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
        //wx.ready(function () {      //必须注释掉 否则页面加载就提示分享成功了
            //分享到朋友圈
            wx.updateTimelineShareData({//updateTimelineShareData
                title: '抽奖活动', // 分享标题
                link: 'http://wyq4s7.xxx.cc/api/draw', // 分享链接，
                //注意：该链接域名或路径必须与当前页面对应的公众号JS安全域名一致   //不要写错了 不然会提示  系统错误，错误码：63002,invalid signature
                imgUrl: 'http://wyq4s7.xxx.cc/draw/playbtn.png', // 分享图标
                success: function () {
                    alert("分享成功");//不要用alert，不然错误无法wx.error无法执行
                    console.log("分享成功");
                   // playnum = 1; //应该在后台设置并获取
                   // $('.playnum').html('1');
                },
                cancel: function () {
                    console.log("分享取消");
                }
            });
        //});


        wx.ready(function () {//文档的即将废弃，其实分享用的就是旧方法，这个上面的新的分享updateTimelineShareData根本没有作用,但是不加分享无法成功
            wx.onMenuShareTimeline({
                title: '抽奖活动2', // 分享标题
                link: 'http://wyq4s7.xxx.cc/api/draw', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'http://wyq4s7.xxx.cc/draw/playbtn.png', // 分享图标
                success: function () {
                    // 用户点击了分享后执行的回调函数
                    alert("分享成功2");//不要用alert，不然错误无法wx.error无法执行
                    console.log("分享成功2");
                    playnum = 1; //应该在后台设置并获取
                    $('.playnum').html(playnum);
                },
                cancel: function () {
                    console.log("分享取消2");
                }
            });
        });

        //必须放wx.ready后面 否则无法执行
        wx.error(function(res){
          //alert(res.errMsg);
          //config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        });
    });

　　

以上为正常的测试代码，分享朋友圈成功后，多增加一次抽奖机会。

总结

新版本的接口updateTimelineShareData要放到wx.ready的外面，否则页面一加载完会自动弹出分享成功的信息

旧版本的接口onMenuShareTimeline要放到wx.ready的里面，否则无法分享成功，

反正新旧版本的2个分享朋友圈的接口都要写上。缺少其中一个都不行。

还有就是wx.config里面

   jsApiList: ['updateTimelineShareData'] 只写一个根本无法分享，要把旧的接口都加上，改为如下

 jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage','onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareQZone']

 

环境声明：如上代码是用微信开发工具测试成功的。真机iphone测试取消分享不起作用。

 

感谢这篇文章 https://niuchao.com/technology/690 的作者，我也是参考他的总结测试出来的。