前言
項目中經常有這樣的需求,某個頁面需要分享到微信好友或朋友圈。在app中,可以通過接入sdk,調用sdk的方法實現分享。在H5中實現微信分享也是需要藉助sdk。
微信JS-SDK是微信公衆平臺面向網頁開發者提供的基於微信內的網頁開發工具包。通過使用微信JS-SDK,網頁開發者可藉助微信高效地使用拍照、選圖、語音、位置等手機系統的能力,同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力。
不過在接入微信js-sdk之前,類似app註冊應用賬號一樣,需要做些前置的準備工作。
此處貼一個微信官方文檔鏈接
準備工作
1、綁定安全域名
首先,要現有個認證的公衆號,並確保已獲得分享的接口權限。
然後登錄微信公衆平臺 ,進行公衆號設置 ,功能設置填寫js接口安全域名
2、引入JS文件
兩種方式:
(1)頁面引入JS文件,支持https:http://res.wx.qq.com/open/js/jweixin-1.6.0.js
如需進一步提升服務穩定性,當上述資源不可訪問時,可改訪問:http://res2.wx.qq.com/open/js/jweixin-1.4.0.js (支持https)
(2)npm安裝
npm install weixin-js-sdk --save
config初始化驗證
所有需要使用JS-SDK的頁面必須先注入配置信息,否則將無法調用。
而配置需要的一些參數,例如appId,signature這種比較敏感的數據安全起見都是存於後端的。
所以我們需要在請求後端接口拿到這些配置參數後纔開始config驗證
var url = '';
var appId = '';// 必填,公衆號的唯一標識
var nonceStr = '';// 必填,生成簽名的隨機串
var timestamp = '';// 必填,生成簽名的時間戳
var signature = '';// 必填,簽名
wx.config({
debug: true,// 開啓調試模式,調用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數,可以在pc端打開,參數信息會通過log打出,僅在pc端時纔會打印。
appId: appId,
timestamp: timestamp,
nonceStr: nonceStr,
signature: signature,// 必填,需要使用的JS接口列表
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage'
]
})
ready接口處理成功驗證
wx.ready(function () {
//分享到朋友圈
wx.onMenuShareTimeline({
title: '',
link: '',
imgUrl: '',
success: function () {
console.log("分享成功");
},
cancel: function () {
console.log("取消分享");
}
});
})
wx.ready(function () {
//分享給朋友
wx.onMenuShareAppMessage({
title:'',
desc: '',
link: '',
imgUrl: '',
type: '',
dataUrl: '',
success: function () {
console.log("分享成功");
},
cancel: function () {
console.log("取消分享");
}
});
})
error接口處理失敗驗證
wx.error(function(res){
// config信息驗證失敗會執行error函數,如簽名過期導致驗證失敗,具體錯誤信息可以打開config的debug模式查看,也可以在返回的res參數中查看,對於SPA可以在這裏更新簽名。
});
避坑記錄
1、以上的config接口,ready接口,error接口寫在一個方法內,並且應在頁面渲染完成時就調用。
因爲這些接口是異步執行的,在微信中,現在已不支持用戶主動觸發分享動作。微信內置瀏覽器中的H5分享,是在config驗證通過後,用戶點擊右上角省略號後,在微信彈窗再進行分享的。
2、如果稍有操作和設置不當,可能在調用config接口時就會報 invalid signature 錯誤了。
排查步驟如下:
-
公衆號已正確配置了安全域名
-
確認簽名算法正確,可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 頁面工具進行校驗。
-
確認config中nonceStr(js中駝峯標準大寫S), timestamp與用以簽名中的對應noncestr, timestamp一致。
-
確認url是頁面完整的url(請在當前頁面alert(location.href.split('#')[0])確認),包括
'http(s)://'
部分,以及'?'後面的GET參數部分,但不包括'#'hash後面的部分。 -
確認 config 中的 appid 與用來獲取 jsapi_ticket 的 appid 一致。
-
確保一定緩存access_token和jsapi_ticket。
-
確保你獲取用來簽名的url是動態獲取的,動態頁面可參見實例代碼中php的實現方式。如果是html的靜態頁面在前端通過ajax將url傳到後臺簽名,前端需要用js獲取當前頁面除去'#'hash部分的鏈接(可用location.href.split('#')[0]獲取,而且需要encodeURIComponent),因爲頁面一旦分享,微信客戶端會在你的鏈接末尾加入其它參數,如果不是動態獲取當前鏈接,將導致分享後的頁面簽名失敗。