最近公司做了一個給學生投票的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端時才會打印。 appId: 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= http://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，后端就無法判斷用戶，導致無法限制用戶投票；

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP ！

相關推薦：

如何利用HTML5實現分享到微信好友朋友圈QQ好友QQ空間微博二維碼的功能

HTML5、Select下拉框右邊加圖標的實現代碼(增進用戶體驗)

以上就是如何在微信端html5頁面調用分享接口的詳細內容，其它編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。