前言
需要实现在同域名的h5页面上增加一个微信扫码登录的功能，如果用户已经有小程序的账号，可以直接登录。
使用：vue2+微信小程序原生开发
可以实现上述功能的前提是：同一用户，对同一个微信开放平台下的不同应用，UnionID是相同的。域名已经配置。
可以用什么来区分是否为同一用户呢？目前项目里还是用的手机号。
正文
流程
页面嵌入二维码->用户扫码后获得临时code->发送code到后台，后台返回用户的信息
- 在index.html页中引入地址（但是报错了，我的解决方案在下面）
<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
- 在展示二维码的页面增加如下代码，进行实例化
//login.vue
//二维码容器
<div id="login_container"></div>
//在mounted中执行下面的代码，获取二维码
//获得登录二维码
getwxCode() {
var obj = new WxLogin({
id: "login_container",
appid: "自己的",
scope: "snsapi_login",
redirect_uri: encodeURI("自己的"),
state: "",
style: "black",
href: "自定义的样式..../qrcode.css",
self_redirect: false,
});
},
这时候如果能正确展示二维码，使用手机扫码的话，就会跳转到redirect_uri，后面拼接上传回来的code值。
3.正常来讲应该在一个把redirect_uri设置为一个中间页，在中间页上进行code的处理的。
但是因为用的是history模式，所以就在首页先实现了。
mounted() {
this.getCodeMes();
},
getCodeMes() {
let code = this.getQueryString("code");
console.log("code:", code);
if (!code) {
return
} else {
this.getLoginMes(code);
}
},
//使用正则读取url里的code
getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
// console.log(window.location.search);
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return "";
},
//对接后端接口，获取用户信息
getLoginMes(code) {
let params = {
code: code,
};
let queryParams = new URLSearchParams(params);
fetch("后端接口", {
method: "POST",
body: queryParams,
})
.then((response) => {
if (response.ok) {
return response.json();
}
console.log(response);
throw new Error("Network response was not ok.");
})
.then((data) => {
console.log(data);
//如果code过期失效了处理
if (data.code == "100") {
//清除一下地址上的code
window.history.replaceState(
null,
null,
window.location.href.split("?")[0] + window.location.hash
);
this.$router.push("/");
}
if (data.code == "200") {
localStorage.setItem(
"userinfo",
JSON.stringify(data.result)
);
setTimeout(() => {
window.history.replaceState(
null,
null,
window.location.href.split("?")[0] + window.location.hash
);
this.$router.push("/登入后的页面");
}, 2000);
}
})
.catch((error) => {
console.error("There was a problem with the network request:", error);
});
},
},
这样就基本完成了
遇到的问题
- 步骤1中引入地址后，谷歌浏览器上报错如下：
Unsafe JavaScript attempt to initiate navigation for frame with URL 'http://www.xxx.xxx/' from frame with URL "https://open.weixin.com/xxxxxxx" The frame attempting navigation is targeting its top-level window, but is neither same-origin with its target nor is it processing a user gesture
解决方法：引入的js文件换成下面的
原因：浏览器禁止重定向
解决方法：直接参考里面的代码即可
https://www.cnblogs.com/enhengenhengNymph/p/14450416.html
2. 二维码无法正常显示，报错：Oops! something went wrong
- 我的原因是：“授权回调域”写错了。没有和开放平台的对上。
- 其他可能的原因：先排除不是网站备案问题，不是第三方与微信平台配置的问题，也不是公众号里面没有设置业务域名或js接口安全域名。
- 参考
参考和补充
参考
0.微信官方：网站应用微信登录开发指南
1.vue 微信扫码登录嵌入方式及开发踩的坑点:比较详细，从获取appid到二维码样式都有说到。不足是没有继续说明扫码的过程了。
2.vue 实现PC端微信扫码登录（二维码内嵌网页版）：有比较完整的流程，使用路由拦截code，还包括了如果扫码用户未注册的绑定?(我没试过）
3.前端实现 微信扫码登录网站 pc端(二维码嵌套页面) 超详细，包会：是挺详细的，关于样式自定义也有说，但是图挂了。
4.关于二维码的生成和嵌入讲得比较详细：关于二维码的生成和嵌入讲得比较详细
5.如何实现微信扫码登录功能（Vue）：很全，包括后端使用Node.js的部分也有写到。从注册到获取token。100分！
6.微信小程序如何获取用户unionId?前置知识可看下
补充
其他参考&方案
Vue微信登录流程：使用的是vue-wxlogin，感觉差不多，只是不需要引入script
其他优化
- 完成登录之后，处理一下code，去掉它。（只是为了让url看起来清爽点）
其他待优化
1.没有用history模式，所以扫码完，只能先返回...8080/这个页面接收code。（不能带#号，#后面的会被清除掉）
2.可以参考这种样式，使用图标进行登录方式的切换，这样UI还挺好苦的。vue - 网站接入微信扫码登录功能详细教程，完整详细流程及完整功能示例源代码（附常见问题的解决方案与二维码样式修改方案）一个付费专栏的文章，没有看。
3.可以接着增加二维码的有效期、自动/手动刷新等功能。