天天看點

微信分享——js-sdk接口的爬坑分享

有好東西,大家要一起分享

微信分享——js-sdk接口的爬坑分享

也是公司營運部門在某些時候做推廣的一些方式。

那麼我們平時用的這些分享接口怎麼實作呢?

以下為微信公衆平台為我們提供的微信頁面開發js-sdk說明文檔:

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

我們簡單的實作文檔提供的步驟:

微信分享——js-sdk接口的爬坑分享

再次我直接進入調用js檔案

關于1.1.3的驗證,需要配合背景傳回以下我們需要的參數

wx.config({
    debug: true, // 開啟調試模式,調用的所有api的傳回值會在用戶端alert出來,若要檢視傳入的參數,可以在pc端打開,參數資訊會通過log打出,僅在pc端時才會列印。
    appId: '', // 必填,公衆号的唯一辨別
    timestamp: , // 必填,生成簽名的時間戳
    nonceStr: '', // 必填,生成簽名的随機串
    signature: '',// 必填,簽名
    jsApiList: [] // 必填,需要使用的JS接口清單
});
           

正常情況下,前端工作者隻需借用ajax向背景傳送本頁連結:

window.location.herf
           

舉個例子:

function getData(page) {
            var pageTotal = 0;
            $.ajax({
                url : "XXXX",
                type : "post",
                async : false,//此處需要注意的是要想擷取ajax傳回的值這個async屬性必須設定成同步的,否則擷取不到傳回值
                data :{"url":window.location.href},
                dataType : "json",
                success : function(data) {
                    pageTotal = data;
                    console.log(pageTotal);
                }
            });
            return pageTotal;
        }
var wxGetDate = getData();   //包含wx.config所需要的參數
           

繼續例子:(wx.config):

wx.config({
            debug: true, // 開啟調試模式,調用的所有api的傳回值會在用戶端alert出來,若要檢視傳入的參數,可以在pc端打開,參數資訊會通過log打出,僅在pc端時才會列印。
            appId: '和諧’, // 必填,公衆号的唯一辨別
            timestamp:wxGetDate.timestamp , // 必填,生成簽名的時間戳
            nonceStr: wxGetDate.noncestr, // 必填,生成簽名的随機串
            signature: wxGetDate.signature,// 必填,簽名
            jsApiList: [
                //需要重寫的功能清單
                "updateAppMessageShareData"               //此處我們使用“分享到朋友”
            ] // 必填,需要使用的JS接口清單    在文檔末尾——附錄2
        });
           
微信分享——js-sdk接口的爬坑分享

以下内容是查錯,直接copy即可

wx.error(function(res){
            // config資訊驗證失敗會執行error函數,如簽名過期導緻驗證失敗,具體錯誤資訊可以打開config的debug模式檢視,也可以在傳回的res參數中檢視,對于SPA可以在這裡更新簽名。
        });
           

真正起作用位置:

wx.ready(function () {   //需在使用者可能點選分享按鈕前就先調用
            wx.updateAppMessageShareData({
                title: '我們取個好一點的名字', // 分享标題
                desc: '來啊,來玩啊', // 分享描述
                link: window.location.href, // 分享連結,該連結域名或路徑必須與目前頁面對應的公衆号JS安全域名一緻
                imgUrl: '圖檔連結', // 分享圖示
                success: function () {
                    // 設定成功
                }
            })
        })
           

如果你做完這一切,可以了,去分享吧!

記住官方文檔,他很重要。作為開發者,要了解文檔,去開發文檔,而不是每每做着幹想,等着别人給你思路。

或許有人領航,能事半功倍,但你也失去了前進的原動力。

至此,第一次分享完畢,二次分享則會:(借用某位部落客的話)微信在進行二次分享後會給該連結自動加上from以及isappinstalled這兩個參數證明該連結是二次分享過來的,有了這兩個參數,便會導緻二次分享進行簽名時失效,一次分享擁有的自定義資訊都會被抹殺,剩下空蕩蕩的連結以及白色縮略圖,很是惡心。

而我目前也被惡心到了。

哪怕使用

window.location.href.split(‘&’)[0]
           

企圖強行次次是第一次進入一般,還是沒效果。

但既然這個問題早早被人發現,我相信我也能解決。

再次留個學習記錄。

繼續閱讀