微信端h5頁面如何呼叫分享頁面的介面
- php中世界最好的语言原創
- 2018-03-20 13:41:295211瀏覽
這次帶給大家微信端h5頁面如何調用分享頁面的接口，微信端h5頁面調用分享頁面接口的注意事項有哪些，下面就是實戰案例，一起來看一下。
最近公司做了一個給學生投票的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="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，後端就無法判斷用戶，導致無法限制用戶投票；
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是微信端h5頁面如何呼叫分享頁面的介面的詳細內容。更多資訊請關注PHP中文網其他相關文章！