最近公司做了一個投票給學生的H5頁面，主要是在微信端使用，需要增加微信分享功能；
本文章主要是記錄呼叫微信分享介面需要注意的事項；
1.前端用的angular1框架，首先需要在index頁面引進微信介面文件；
<script src=http://res.wx.qq.com/open/js/jweixin-1.2.0.js></script>
2.在myApp.run檔案中寫微信分享函數，注意該函數需要將目前頁面的url取得並解析，然後發給後端來產生對應簽名，直接上程式碼；
// 微信分享函數function wxShare() { var url = $location.absUrl().split('#')[0]; wxServices.postWxShare(url).then(function (res) { if (res.data. code == 0) { var respanse = res.data.data; wx.config({ debug: false, //開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數資訊會透過log打出，僅在pc端時才會列印。 respanse.appId, timestamp: respanse.timestamp, // 必填，產生簽章的時間戳nonceStr: respanse.nonceStr, // 必填，產生簽章的隨機串signature: respanse.signature,// 必填，簽名jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']// 必填，需要使用的JS接口列表}); } }) }將當前url解析後，發給後端接口，後端需要將appId，時間戳，隨機字符串和簽名返回，然後接口列表（jsApiList）根據需要自己手動添加，注意是一個數組的形式，我這裡只需要調用分享接口；
調試的時候，可以將debug改為true，這樣在就每次呼叫微信介面的時候就會有介面資訊alert出來，方便查看介面呼叫是否正常了；
3、在該函數後，自訂分享內容，程式碼如下；
wx.ready(function () { var obj = { title: 'SPBCN團體賽開始投票啦！', // 分享標題desc: 'SPBCN團體賽開始投票了，快來為我們加油吧！', // 分享描述link: 'http://dev.spbcn.org/wechat-vote-phone/redirect.html', //分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致// 該鏈接是重定向鏈接，因為需要獲取用戶code，但是該鏈接又無法直接寫微信獲取code的鏈接， //所以需要點擊後重新加載新的頁面，來實現重定向，重新打開獲取code的微信鏈接，實現獲取用戶信息的功能； imgUrl: 'http://cdn.spbcn.org/img/logo-image.png ', // 分享圖示fail: function (res) { alert(JSON.stringify(res)); } }; // 2.1 監聽分享給朋友，按鈕點選、自訂分享內容及分享結果介面wx.onMenuShareAppMessage(obj); // 2.2 監聽分享到朋友圈按鈕點選、自訂分享內容及分享結果介面wx.onMenuShareTimeline(obj); // 2.3監聽分享到QQ按鈕點選、自訂分享內容及分享結果介面wx.onMenuShareQQ(obj); // 2.4 監聽分享到微博按鈕點選、自訂分享內容及分享結果介面wx.onMenuShareWeibo(obj); // 2.5 監聽分享到QZone按鈕點選、自訂分享內容及分享介面wx.onMenuShareQZone(obj); })wx.ready是在wx.config之後自動運行的，我是定義了一個分享內容的通用對象，然後直接調用即可，也可以根據需要來分別定義分享朋友、朋友圈、微博等的不同內容，具體查看微信介面文件即可；
主要強調一下分享鏈接，該鏈接必須是你的公眾號設置的JS安全域名下的，不然無法分享成功；
分享失敗的表現是，分享連結圖片無法載入你自訂的圖片，分享標題也不對；
5.我這個專案是投票類的，所以需要每次點擊進來之後獲取用戶code，如果你只是分享文章，不需要用戶信息，直接將link更改為你的文章鏈接即可；
6.對於投票類，我這裡特殊處理了，就是重定向了該鏈接，大家都知道H5獲取微信用戶信息有兩種，一種是關注微信公眾號；另一種提示用戶需要獲取用戶公開信息，用戶點選確定即可。但是這兩種都需要是按照微信的要求來拼接成特殊的微信鏈接，因此該域名是微信自帶的，就不是我們自己公眾號的JS安全域名了；
7.所以，對於分享後的鏈接，如果還需要獲取用戶code，就要用其他方法實現，我用的是添加了一個空白頁面，在該頁面加載後跳轉微信獲取code的鏈接，http:/ /dev.spbcn.org/wechat-vote-phone/redirect.html此連結為空白頁面，該頁面代碼如下；
window.onload = function () { //重定向鏈接，跟微信公眾號中獲取用戶code是一樣的鏈接window.location.href=https://open.weixin.qq.com/connect/oauth2/authorize?appid=公眾號appid&redirect_uri =http%3A%2F%2Fdev.spbcn.org%2Fwechat-vote-phone?type=weixin&scope=snsapi_userinfo&response_type=code&state=STATE#wechat_redirect }8.該方法有弊端，就是多加了一個空白頁面，暫時沒想到好的辦法，歡迎大家留言；
9.如果不加這一步，分享出來的連結顯示正常，但是取得不到code，後端就無法判斷用戶，導致無法限制用戶投票；
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。