微信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 的作者，我也是參考他的總結測試出來的。