微信app右上角自帶分享功能--不論是微信公眾號還是微信小程序或者是用微信打開的別的鏈接,用戶都可以進行微信分享出去,對於自定義微信分享功能會和默認分享存在一些樣式區別。這就是為什么還要自定義微信分享功能。
以下是步驟:
一:重中之重就是去看微信開發者文檔,開發者文檔鏈接:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432,雖然看不下去,但也要忍着看下去,多看幾遍。熟悉了之后可以看看別人的博客,從別人的經驗中總結出路在哪。
二:申請微信公眾號,鏈接:https://mp.weixin.qq.com/
三:在微信公眾號的后台進行設置:公眾號設置-->功能設置-->JS接口安全域名,打開這個頁面之后你會看到下面的提示。需要先下載這個文件並上傳到指定域名的根目錄。
四:可以通過開發-->接口權限查看自己是否獲取到了分享事件的權限。
五: 首先要說明的是分享功能是一個配置功能,綁定在按鈕的click事件中是沒有效果的。也就是說只有點擊微信右上角的分享才有效果。微信分享要引入wx.js,此js文件必須是低版本的wx.js的低版本,最新版本的1.4.0的版本沒有分享功能,之前這個也琢磨了很久,搜了半天都沒有找到這個也是個問題,也沒有看到前人博客的關於這個js文件版本的指點。
六:要注意分享功能的簽名signature必須要在后台獲取,如果前端的話會暴露appID和密鑰,這樣的話非常不安全,微信也不建議這么做。
七:獲取簽名時的url不能帶有#,必須是去掉#之后的url。
var url=window.location.href;
url= rote.split("#")[0];
八:要使用簽名工具對你獲取到的簽名進行驗證,看看簽名的獲取有沒有錯誤,鏈接:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
九:注意開啟微信分享調試功能,debug:true;這樣在console后台可以看到報錯,而且要注意的是微信分享或者微信的其他功能在瀏覽器的手機模擬端時是不會顯示效果的,必須要使用微信開發者工具,當數據獲取成功的時候回提示errMsg:‘config:ok’,剛開始看到是errMsg我還以為這不是成功的提示而是失敗的提示呢,其實並不然。當一切都完成的時候,要把alert測試信息去掉,不然蘋果手機會莫名的出現彈框。
十:關於分享出去的圖片鏈接也頁面的鏈接,必須和當前頁的域名一致,而且此域名必須要配置在公司公眾號的IP白名單上,否則分享不成功。
剩下的就是業務邏輯了,這個就非常簡單了
首先要請求,后端的接口,獲取簽名等數據
//分享功能請求接口獲取簽名等數據
$.ajax({
url:請求的接口,
type:請求的方式,
data:傳入的參數,
success:function (res) {
wx.config({
debug: false,
appId: res.retData.appId,
timestamp: res.retData.timestamp,
nonceStr: res.retData.nonceStr,
signature: res.retData.signature,
jsApiList: [
'onMenuShareAppMessage','onMenuShareTimeline'
]
});
}
})
//點擊分享按鈕進行分享事件
wx.ready(function () {
// 2.2 監聽“分享到朋友圈”按鈕點擊、自定義分享內容及分享結果接口
document.querySelector(點擊的按鈕).onclick = function () {
document.getElementById(蒙版層).style.display='block';
//分享到朋友圈
wx.onMenuShareTimeline({
title: 分享標題,
desc: 分享描述,
link: 分享鏈接,
imgUrl: 分享圖片的鏈接,
trigger: function (res) {
alert(res) /////注意蘋果手機分享的時候要去掉alert事件,不然會出現莫名的彈框
},
success: function (res) {
alert(res)
},
cancel: function (res) {
},
fail: function (res) {
}
});
//分享給朋友
wx.onMenuShareAppMessage({
title: 分享標題,
desc: 分享描述,
link: 分享鏈接,
imgUrl: 分享圖片的鏈接,
trigger: function (res) {
},
success: function (res) {
},
cancel: function (res) {
},
fail: function (res) {
}
});
};
})