最近我们公司做了一个微信投票的H5页面，想要大家积极参加！所以，我现在就来教你们怎样在自己的H5页面里加个分享功能，希望能帮到你们！
准备工作
我们用的是Angular1，首页得带上那个微信接口文件没它咱们就干不成事儿。
编写微信分享函数
接着聊，我们来搞个”微信分享”功能到myApp.run里面去。首先，当然是要知道你现在看到那个网页然后再转交给后台处理成合适的签名样子。别急我马上就告诉你怎么做。虽然代码看上去有点复杂，但其实就是把当前的URL传给后台，然后后台就会给你回appId、时间戳、随机字符串和签名这些东西。还有，接口列表（jsApiList）这个东西，你得按照需求自己加进去，记得要用数组格式。
// 微信分享函数
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接口列表
});
}
})
}
调试分享功能
在调试的时候记得把debug设成true，这样一旦调用了微信API，它就会弹出个提示告诉你结果是不是成功。这有助于你更容易地找到并修复错误，不然分享功能可能会出岔子！
自定义分享内容
只需加上点啥就能自动发出了！别忘了wx.ready可是在wx.config后会自动跑起来。这里我给你设计好了一个分享模板，把那些都复制过来就行。当然，要是你还想为不同的地方（比如朋友、朋友圈、微博）设定不一样的内容，那也是小菜一碟，看下微信接口文档就明白咋整了。
分享链接的要求
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);
})
提醒下，分享的链接得在我们这儿的JS安全域名里才能成功，否则就发不出去。如果没成功的话，让你设的那张图和标题就不能正常显示咯~
投票类项目的特殊处理
只要是普通的发帖就别担心，直接把链接换成你的就行了。要是要弄投票什么的我就得多费点儿事，再帮你换回原本的链接然后让你投票！
获取用户信息的两种方式
听过在微信上用H5找用户不？挺轻松的！一个办法就是让别人关注咱们的公众号，另一个，就是告诉他们留地址，点点就行。不过，这些都得按微信规矩来，所以这个网址是微信给的，跟咱们自己的公众号JS安全域名没关系哈。
分享后链接的处理
所以，要是想找到刚才分享的那个号码，只能自己想想办法了。我会弄个空白页出来，然后往下一拉就能进入领取微信码的链接，但其实这个链接就是个摆设。
空白页面的弊端
这个问题，简单来说就是网页上的空白页面，有没有解决方法咱们也是不知道！所以，大家还得多多发言才行！毕竟有些分享的链接看似完美，其实根本拿不到code！那这样的话，后台就认不出你到底是谁，投票自然也会受到影响。
总结
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"
}
说到底，微信那H5页面分享有点麻烦不过耐心点多试几次就行了。我希望这篇小攻略对大家有所帮助哟。最后问问大伙儿有啥难题没，跟咱们一块儿聊聊，别忘了点个赞分享给其他人哈~
评论0