uni-app写微信登录 前端

Posted 2020-12-21 luiai

首先我们要明白微信的流程是怎么样的，才能知道如何去做，话不多说，先上图

按照微信官方给的文档，我们首先要获取到一个临时code，这个临时code是用来放到我们项目的后台的，后台发送秘钥、临时code和appid，后台一起发送到微信官方服务器，换取用户的openid，这是微信的唯一标识。头像和昵称都不是惟一的，所以这个openid是唯一能够确定“你是你”的标识。
uni.login({
provider: ‘weixin‘, //这个是登录提供商，这个不写也没关系
success: function (loginRes) {
console.log(loginRes.authResult); //这就是我们的临时code，叫临时是因为他有五分钟的有效期，之后我们把这个code发送给后台
var code=loginRes.authResult; //把code保存起来
uni.request({
url:‘https://www.baidu.com/‘, //这里写我们的后台地址，这里是示例
method:‘POST‘,
data:{
code:code //发送code到我们的后台
},
header:{
‘content-type‘:‘application/json‘ //定义头部信息，json数据化
},
success: (res) => {
console.log(res.data); //这里面就有我们想要的信息，openid
uni.setStorage({ //保存用户登录状态，把openid保存到缓存中
key: ‘openid‘,
data: ‘res.data.openid‘,
success: function () {
console.log(‘用户登录成功‘);
}
});
}
})
}
});

之后安装官方所说的方法，我们实验了一下，用户体验并不是很好，但我们可以借用这个思想，在微信缓存中存入一个量，用来用户是否登录，下次我们跳转页面的时候，我们只要检测缓存中是否有我们需要的信息就可以了

uni.getStorage({ //读取缓存中的登录状态
key:‘openid‘,
success:function(res){
console.log("用户已经登录"); //检测到用户已经登录，在控制台中打印出登录消息
}，
fail:function(res){
console.log("用户没有登录"); //检测到用户没有登录，在控制台中打印出没有登录的消息
}
})

到此，我们的微信登录的前端就写完了，希望大家喜欢