首先在html文件里面引入微信官方的js文件
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script type="text/javascript" src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
然后在需要显示微信二维码的地方new一个实例对象，不能在钩子函数中的created中使用这个方法，此时html文件里面的js尚未引入，最早只能在mounted中使用，所以是
fun(){
setTimeout(()=> {
var obj = new WxLogin({
self_redirect:false,
id: "wxqcode", //二维码容器的id
appid: "*******", //应用的唯一标识
scope: "snsapi_login", //作用域
redirect_uri: window.location.origin + "/*****.html", //重定向地址 需要进行UrlEncode，申请微信登录时候绑定的回调网址 => 微信登录成功后跳转到这个地址
state: "", //用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击）
style: "",
href: "", //自定义样式链接，第三方可根据实际需求覆盖默认样式。详见文档底部FAQ
// http://sciusers.shenghui.info/wxhref.html
// http://localhost:8080/personal.html
// http://dev.sci-hua.com/scihua/webapp/login/scanCallBack
});
}, 50) //防止js未加载完成延时执行
},
mounted(){
this.fun();
} //在mounted中构建这个对象获取微信二维码
这时候重定向的网页上会获取到用户的数据，我们需要拿到微信返回的code去换取后台的用户资料
geturl(name) {
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);//search,查询？后面的参数，并匹配正则
if(r!=null) {
return unescape(r[2]);
}else {
return null;
}
},
inwxcode(){
this.wxcode = this.geturl('code'); //重定向成功之后微信服务器会在url后面添加code
if(this.wxcode==null){
console.log('不执行')
}else {
this.$axios({
methods:'GET',
url:`/****/****/login/scanCallBack?code=${this.wxcode}`,
}).then(res=>{
console.log(res)
if (res.data.code==0){
window.localStorage.setItem('headImg',res.data.userInfo.headImg) //本地存储头像
window.localStorage.setItem('name',res.data.userInfo.nickname) //本地存储昵称
window.localStorage.setItem('wxuserinfo',JSON.stringify(res.data.userInfo)) //将传过来的json对象转化为字符串存储在本地
if(res.data.token==undefined&&res.data.token==null){ //判断userinfo是否存在，存在即为注册过的用户 跳转到文件中心页面，不存在则跳转到登录页面，进行绑定手机号
window.location.href=`index.html?wxuserinfo=0` //不存在则携带固定参数完成跳转到登录页面
}else {
window.localStorage.setItem('token',res.data.token) //存在则存储token跳转文件中心页面
window.location.href='file.html'
}
} else {
//退回扫码界面
}
}).catch(req=>{
console.log(req)
})
}
},
},
mounted() {
this.inwxcode()
}
this.data = JSON.parse(window.localStorage.getItem('wxuserinfo')||null) //在另外一个页面从本地存储拿到json转化为对象获取我们需要的属性
this.img=this.data.headimgurl||null
this.openid=this.data.openid||null
this.nickname=this.data.nickname||null
this.unionid=this.data.unionid||null
if (this.data !== null){
window.localStorage.setItem('name',this.nickname)
window.localStorage.setItem('headImg',this.img)
}
在注册新手机号或者其他微信操作里面我们都可以利用这些数据
inwxuser() {
this.data = JSON.parse(window.localStorage.getItem('wxuserinfo') || null)
console.log(this.data)
this.wx.headimgurl = this.data.headimgurl || null
this.wx.openid = this.data.openid || null
this.wx.nickname = this.data.nickname || null
this.wx.unionid = this.data.unionid || null
},
register(){
if(this.wx.phone==null||this.wx.password==null){
this.warning('请填写正确信息')
} else if (this.wx.phone.length!==11&&this.wx.password.length<2){
this.warning('手机号或者密码不符合规范')
}else {
console.log(this.wx)
this.$axios.post('/scihua/webapp/login/bindingExistUser',this.wx)
.then( res=> {
if(res.data.msg == 'success'){
window.localStorage.setItem('token',res.data.token)
setTimeout(()=>{
window.location.href='file.html'
},300)
}else{
this.warning(res.data.msg)
}
}).catch( req=> {
console.log(req)
})
}
}, //携带密码验证码注册
agreement(){
window.open('agreement.html')
},
warning (a) {
this.$message.warning(a);
},
},
mounted(){
this.inwxuser()
}