最近公司做了一個(gè)給學(xué)生投票的H5頁(yè)面，主要是在微信端使用，需要添加微信分享功能；
本文章主要是記錄調(diào)用微信分享接口需要注意的事項(xiàng)；
1、前端用的angular1框架，首先需要在index頁(yè)面引入微信接口文件；
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
2、在myApp.run文件中寫微信分享函數(shù)，注意該函數(shù)需要將當(dāng)前頁(yè)面的url獲取并解析，然后發(fā)給后端來(lái)生成對(duì)應(yīng)簽名，直接上代碼；
// 微信分享函數(shù)
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, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。
appId: respanse.appId,
timestamp: respanse.timestamp, // 必填，生成簽名的時(shí)間戳
nonceStr: respanse.nonceStr, // 必填，生成簽名的隨機(jī)串
signature: respanse.signature,// 必填，簽名
jsApiList: ['onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone']// 必填，需要使用的JS接口列表
});
}
})
}
將當(dāng)前url解析后，發(fā)給后端接口，后端需要將appId，時(shí)間戳，隨機(jī)字符串和簽名返回，然后接口列表（jsApiList）根據(jù)需要自己手動(dòng)添加，注意是一個(gè)數(shù)組的形式，我這里只需要調(diào)用分享接口；
調(diào)試的時(shí)候，可以將debug更改為true，這樣在就每次調(diào)用微信接口的時(shí)候就會(huì)有接口信息alert出來(lái)，方便查看接口調(diào)用是否正常了；
3、在該函數(shù)后，自定義分享內(nèi)容，代碼如下；
wx.ready(function () {
var obj = {
title: 'SPBCN團(tuán)體賽開始投票啦！', // 分享標(biāo)題
desc: 'SPBCN團(tuán)體賽開始投票了，快來(lái)為我們加油吧！', // 分享描述
link: 'http://dev.spbcn.org/wechat-vote-phone/redirect.html', // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
// 該鏈接是重定向鏈接，因?yàn)樾枰@取用戶code，但是該鏈接又無(wú)法直接寫微信獲取code的鏈接，
// 所以需要點(diǎn)擊后重新加載新的頁(yè)面，來(lái)實(shí)現(xiàn)重定向，重新打開獲取code的微信鏈接，實(shí)現(xiàn)獲取用戶信息的功能；
imgUrl: 'http://cdn.spbcn.org/img/logo-image.png', // 分享圖標(biāo)
fail: function (res) {
alert(JSON.stringify(res));
}
};
// 2.1 監(jiān)聽“分享給朋友”，按鈕點(diǎn)擊、自定義分享內(nèi)容及分享結(jié)果接口
wx.onMenuShareAppMessage(obj);
// 2.2 監(jiān)聽“分享到朋友圈”按鈕點(diǎn)擊、自定義分享內(nèi)容及分享結(jié)果接口
wx.onMenuShareTimeline(obj);
// 2.3 監(jiān)聽“分享到QQ”按鈕點(diǎn)擊、自定義分享內(nèi)容及分享結(jié)果接口
wx.onMenuShareQQ(obj);
// 2.4 監(jiān)聽“分享到微博”按鈕點(diǎn)擊、自定義分享內(nèi)容及分享結(jié)果接口
wx.onMenuShareWeibo(obj);
// 2.5 監(jiān)聽“分享到QZone”按鈕點(diǎn)擊、自定義分享內(nèi)容及分享接口
wx.onMenuShareQZone(obj);
})
wx.ready是在wx.config之后自動(dòng)運(yùn)行的，我是定義了一個(gè)分享內(nèi)容的通用對(duì)象，然后直接調(diào)用即可，也可以根據(jù)需要來(lái)分別定義分享朋友、朋友圈、微博等的不同內(nèi)容，具體查看微信接口文檔即可；
主要強(qiáng)調(diào)一下分享鏈接，該鏈接必須是你的公眾號(hào)設(shè)置的JS安全域名下的，不然無(wú)法分享成功；
分享失敗的表現(xiàn)是，分享鏈接圖片無(wú)法加載你自定義的圖片，分享標(biāo)題也不對(duì)；
5、我這個(gè)項(xiàng)目是投票類的，所以需要每次點(diǎn)擊進(jìn)來(lái)之后獲取用戶code，如果你只是分享文章，不需要用戶信息，直接將link更改為你的文章鏈接即可；
6、對(duì)于投票類，我這里特殊處理了，就是重定向了該鏈接，大家都知道H5獲取微信用戶信息有兩種，一種是關(guān)注微信公眾號(hào)；另一種提示用戶需要獲取用戶公開信息，用戶點(diǎn)擊確定即可。但是這兩種都需要是按照微信的要求來(lái)拼接成特殊的微信鏈接，因此該域名是微信自帶的，就不是我們自己公眾號(hào)的JS安全域名了；
7、所以，對(duì)于分享后的鏈接，如果還需要獲取用戶code，就要用其他方法實(shí)現(xiàn)，我用的是添加了一個(gè)空白頁(yè)面，在該頁(yè)面加載后跳轉(zhuǎn)微信獲取code的鏈接，http://dev.spbcn.org/wechat-vote-phone/redirect.html該鏈接是個(gè)空白頁(yè)面，該頁(yè)面代碼如下；
window.onload = function () {
// 重定向鏈接，跟微信公眾號(hào)中獲取用戶code是一樣的鏈接
window.location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=公眾號(hào)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、該方法有弊端，就是多加了一個(gè)空白頁(yè)面，暫時(shí)沒(méi)想到好的辦法，歡迎大家留言；
9、如果不加這一步，分享出來(lái)的鏈接顯示正常，但是獲取不到code，后端就無(wú)法判斷用戶，導(dǎo)致無(wú)法限制用戶投票；
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
