引言
我最近做了个网页开发项目，涉及到要使用微信分享功能。今天来聊聊怎么样在HTML5网页中运用到这个分享接口，以及可能遇到的问题和解决方法。
准备工作
开头就是，要在Angular1搭建好的网站里面，把微信接口文件搞进来index首页。接着，得跑一遍myApp.run程序文件，添加个分享功能。这个功能会抓取当前页面的链接，交给后台去处理并生成相应的数字签名。然后后台再送回几个有用的数据：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，这能让你每点一下微信接口就能看到具体解释，帮你识别是否写对了。至于分享功能，弄好以后就可以开始自己做特色分享！先把需要用到的共享项目用 wx.ready 预先准备好，然后针对不同平台比如朋友、朋友圈、微博去调整分享细节，记住分享链接必须是在公众号设定的 JS 安全域名内才有效哟。
处理特殊情况
投票这种玩法有点麻烦，需要人家自己点进去填代码。一般的发文章，直接改成文章链接就搞定了。可投票时，我们得让别人转到我们指定的链接，这样才能拿到他们的code。这是因为微信要链接特殊格式，一般链接无法实现这个效果。
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);
})
处理获取用户code问题
咱们首页搞了个弹窗小窗口，用户点它就能进微信扫码了。虽然多出来一页有点费劲，但现在没找到别的好办法，大家还得继续想啦～
总结与展望
搞定！经过这些步骤，咱在微信HTML5网页上成功调用了分享功能，还解决了时不时出现的获取用户code（密码）的难题。记住开发时照着那份微信给的指南走，再根据实际情况调整。下次遇到类似项目，咱就能做好点，让用户使用起来舒心。
微信里的HTML5网页也可以直接点赞和分享！想要学会的话就赶紧看这篇简单明了的指南吧～
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"
}
。
评论0