最近公司做了一个给学生投票的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://huoche.7234.cn/images/jb51/mhpmujijlob.png', // 分享图标
fail: function (res) {
alert(JSON.stringify(res));
}
};
// 2.1 监听“分享给朋友”,按钮点击、自定义分享内容及分享结果接口
wx.onMenuShareAppMessage(obj);









