有好東西,大家要一起分享
也是公司營運部門在某些時候做推廣的一些方式。
那麼我們平時用的這些分享接口怎麼實作呢?
以下為微信公衆平台為我們提供的微信頁面開發js-sdk說明文檔:
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
我們簡單的實作文檔提供的步驟:
再次我直接進入調用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
});
以下内容是查錯,直接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]
企圖強行次次是第一次進入一般,還是沒效果。
但既然這個問題早早被人發現,我相信我也能解決。
再次留個學習記錄。