开发参考官方文档 准备工作|微信开发文档
需求:“我的账户” 页面增加 “绑定微信” 按钮,点击生成微信登录二维码,用户扫码授权后提示 “绑定成功” / “绑定失败” / “该微信号已被用户xx绑定”。 前后端分离前台无法直接获取扫码结果,所以本例扫码结果存储在cookie,前台每300毫秒查询一次cookie,获取到执行相应事件并删除该cookie值。
一、 html页面增加绑定微信按钮
<button id ='bindWechat' role="button" aria-disabled="false">
<span class="ui-button-text">绑定微信</span>
</button>
<script>
// 绑定微信点击事件
$( "#bindWechat" ).button().click(function() {
var bind_vv_t = null;
ThirdBind(function (randomStr) {
clearInterval(bind_vv_t);
//每300毫秒执行一次,获取cookie值
bind_vv_t = setInterval(function() {
var data = getCookie(randomStr);
if (data) {
//扫码结果获取成功后删除cookie
clearCookie(randomStr);
clearInterval(bind_vv_t);
data = JSON.parse(decodeURIComponent(data));
console.log(data);
//授权失败
if(data.code!==0){
alert(data.message);
}else{
//授权成功 TODO 刷新页面或跳转页面等操作
}
}
},300)
});
});
//第三方账号绑定 调用后台接口生成微信二维码,randomCookies是随机生成的cookie的key值,扫描结果会在后台存储到cookie。callback回调函数,传入randomCookies,用于前台获取微信扫码结果
function ThirdBind(callback) {
var width = 563,height = 593;
//后台微信二维码接口
var url = "http://xxx/system.WechatAction.do?CMD=bindWechat";
var randomCookies = "emmp"+(new Date().getTime());
if (url) {
url += "&callback=" + randomCookies;
var l = (window.screen.width - width) / 2,
t = (window.screen.height - height) / 2;
window.open(url, "wechat", "width=" + width + ",height=" + height + ",left=" + l + ",top=" + t + ",menub