之前寫過一篇使用微信JS-SDK來實現掃一掃功能的部落格

在該部落格裡介紹了微信JS-SDK的基本用法，其中包括以下幾個步驟

還詳細介紹了通過config介面注入許可權驗證配置以及簽名演算法實現的Java版本

前兩天在做微信分享的時候發現按照以前的思路每次都不能正確獲取“分享到朋友圈”按鈕點選狀態及自定義分享內容介面，而是必須通過一個按鈕先點選幫點事件，然後才能獲取“分享到朋友圈”按鈕點選狀態及自定義分享內容介面。

回顧一下以前掃一掃的js程式碼

下面是wx.config的主程式碼

    <script type="text/javascript">
        $(function
 
() {
            var timestamp = $("#timestamp").val();//時間戳
            var nonceStr = $("#noncestr").val();//隨機串
            var signature = $("#signature").val();//簽名
            wx.config({
                debug : true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
                appId : 'wx622ca8545e5c354b'
 
, // 必填，公眾號的唯一標識
                timestamp : timestamp, // 必填，生成簽名的時間戳
                nonceStr : nonceStr, // 必填，生成簽名的隨機串
                signature : signature,// 必填，簽名，見附錄1
                jsApiList : [ 'scanQRCode' ]
            // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2
            });
        });
    </script>

下面是掃一掃的程式碼

前提是有一個

<button id="scanQRCode">掃碼</button>

        $("#scanQRCode").click(function() {
            wx.scanQRCode({
                needResult : 1,
                desc : 'scanQRCode desc',
                success : function(res) {
                    //掃碼後獲取結果引數:htpp://xxx.com/c/?6123，擷取到url中的防偽碼後，賦值給Input
                    var url = res.resultStr;
                    /* var tempArray = url.split('?');
                    var tempNum = tempArray[1]; */
                    if(url.indexOf(",")>=0){
                        var tempArray = url.split(',');
                        var tempNum = tempArray[1];
                        $("#id_securityCode_input").val(tempNum);
                    }else{
                    $("#id_securityCode_input").val(url);
                    }

                }
            });
        });

以上程式碼完全沒有問題，但是當我配置獲取“分享到朋友圈”按鈕點選狀態及自定義分享內容介面的時候卻始終不能成功

解決方案

原來是wx.config執行需要時間，而我們把掃一掃放在外面完全沒影響。是因為，我們點選掃碼的時候wx.config已經載入好了，而我之前的點選一下再分享和掃碼是一個道理，為了不讓使用者點選一下再分享需要將我上面講的微信JS-SDK使用步驟中的第四步用到

下面是官方的解釋

步驟四：通過ready介面處理成功驗證

wx.ready(function(){

// config資訊驗證後會執行ready方法，所有介面呼叫都必須在config介面獲得結果之後，config是一個客戶端的非同步操作，所以如果需要在頁面載入時就呼叫相關介面，則須把相關介面放在ready函式中呼叫來確保正確執行。對於使用者觸發時才呼叫的介面，則可以直接呼叫，不需要放在ready函式中。
});

上面的描述給出了我之前的掃碼可以成功而分享不能成功的合理解釋。

像點選掃碼這樣的事件屬於

對於使用者觸發時才呼叫的介面，則可以直接呼叫，不需要放在ready函式中。

而對於分享事件屬於

如果需要在頁面載入時就呼叫相關介面，則須把相關介面放在ready函式中呼叫來確保正確執行

下面就來看一下正確的獲取“分享到朋友圈”按鈕點選狀態及自定義分享內容介面的使用方法

    <script type="text/javascript">
        $(function() {
            var timestamp = $("#timestamp").val();//時間戳
            var nonceStr = $("#noncestr").val();//隨機串
            var signature = $("#signature").val();//簽名
            wx.config({
                debug : true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
                appId : 'wx622ca8545e5c354b', // 必填，公眾號的唯一標識
                timestamp : timestamp, // 必填，生成簽名的時間戳
                nonceStr : nonceStr, // 必填，生成簽名的隨機串
                signature : signature,// 必填，簽名，見附錄1
                jsApiList : [ 'scanQRCode','onMenuShareAppMessage' ]
            // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2
            });

            wx.ready(function(){
                // 分享事件必須放在這裡
                wx.onMenuShareAppMessage({
                      title: '這是一個測試的標題',
                      desc: '這個是分享奧朋友圈的描述資訊',
                      link: 'http://www.baidu.com',
                      imgUrl: 'https://www.baidu.com/img/bd_logo1.png',
                      trigger: function (res) {
                        // 不要嘗試在trigger中使用ajax非同步請求修改本次分享的內容，因為客戶端分享操作是一個同步操作，這時候使用ajax的回包會還沒有返回
                        // alert('使用者點擊發送給朋友');
                      },
                      success: function (res) {
                          alert('分享成功');
                      },
                      cancel: function (res) {
                        alert('你沒有分享');
                      },
                      fail: function (res) {
                        alert(JSON.stringify(res));
                      }
                    });
                    //alert('已註冊獲取“傳送給朋友”狀態事件');
            });
        });
    </script>

完整的分享到朋友圈和朋友的js程式碼

<script type="text/javascript">
        $(function() {
            var timestamp = $("#timestamp").val();//時間戳
            var nonceStr = $("#noncestr").val();//隨機串
            var signature = $("#signature").val();//簽名
            wx.config({
                debug : false, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
                appId : 'wx622ca8545e5c354b', // 必填，公眾號的唯一標識
                timestamp : timestamp, // 必填，生成簽名的時間戳
                nonceStr : nonceStr, // 必填，生成簽名的隨機串
                signature : signature,// 必填，簽名，見附錄1
                jsApiList : [ 'scanQRCode','onMenuShareAppMessage','onMenuShareTimeline' ]
            // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2
            });

            wx.ready(function(){
                // wx.hideOptionMenu();
                wx.onMenuShareTimeline({
                    title: '這是一個測試的標題--程高偉的部落格',
                    link: 'http://blog.csdn.net/frankcheng5143',
                    imgUrl: 'http://avatar.csdn.net/E/B/6/1_frankcheng5143.jpg',
                    success: function () { 
                        // 使用者確認分享後執行的回撥函式
                         alert('分享到朋友圈成功');
                    },
                    cancel: function () { 
                        // 使用者取消分享後執行的回撥函式
                         alert('你沒有分享到朋友圈');
                    }
                });
                wx.onMenuShareAppMessage({
                      title: '這是一個測試的標題--百度',
                      desc: '這個是要分享內容的一些描述--百度一下，你就知道',
                      link: 'http://www.baidu.com',
                      imgUrl: 'https://www.baidu.com/img/bd_logo1.png',
                      trigger: function (res) {
                        // 不要嘗試在trigger中使用ajax非同步請求修改本次分享的內容，因為客戶端分享操作是一個同步操作，這時候使用ajax的回包會還沒有返回
                      },
                      success: function (res) {
                          alert('分享給朋友成功');
                      },
                      cancel: function (res) {
                        alert('你沒有分享給朋友');
                      },
                      fail: function (res) {
                        alert(JSON.stringify(res));
                      }
                    });
            });
        });
</script>

關於繫結域名和簽名演算法參考

效果

通過選單進入頁面

進入後呈現的頁面

點擊發送給朋友

出現我們在js中設定的分享內容

分享成功執行的方法

分享成功的頁面

使用者點選取消，沒有分享時的方法

分享到朋友圈的頁面

分享成功和沒有分享和上面的效果一樣

參考文獻