上一章节我们了解到了小程序的登录流程。那这一章节我们来详细的讲解果酱先生客户端是如何实现登录的。
给大家补一个知识点,就是如何在微信开发者工具中,在没有写路由的情况下如何进到个人中心页。
点击去之后然后
app.json
里面定义的。 //调用 wx.login方法 获取 code,传给服务端
wxLogin(){
wx.showLoading({
title: '正在自动登录',
mask: true
})
wx.login({
success: res => {
if (res.code) {
//拿到code之后,我们应该将code给服务端换取 openid
this.setData({
code:code
})
this.autoUserLogin(res.code);
} else {
wx.showToast({
title: '获取code失败',
icon: 'none'
})
}
}
})
},
上面代码有两个新的知识点:
wx.showLoading()
跟 wx.hideLoading()
。wx.login()
success 接口调用成功函数。显示 loading 提示框。需主动调用 wx.hideLoading
才能关闭提示框
属性:
title
为提示内容,必须是字符串mask
为是否显示透明蒙层,防止触摸穿透,必须是 布尔值,true || false 。调用接口获取登录凭证(code)。
属性:
object.success 回调函数
参数 Object res
属性:
code
用户登录凭证(有效期五分钟)。开发者需要在开发者服务器后台调用 auth.code2Session
,使用 code
换取 openid
和 session_key
等信息所以接下来我们就要将 code
传给服务端,要后端工程师去换取 openid
。
//利用code 获取 openid,或者token
autoUserLogin(code){
sandBox.get({
api:'api/sir/user/login',
data:{
code:code
}
}).then(res=>{
res = res.data;
if(res.status){
//如果是新用户,服务端则会返回openid
if(res.data && res.data.open_id){
// 将open_id 放到data中
this.setData({
open_id:res.data.open_id
})
}
//如果是老用户,服务端则会返回返回自定义登录状态token
if(res.data && res.data.access_token){
//将拿到的token,做一下处理,客户端跟服务端协调一致
let access_token = res.data.token_type + ' ' + res.data.access_token;
//将token存在本地
wx.setStorageSync('user_token', access_token);
this.setData({
token:access_token
}
)
}
wx.hideLoading();
} else {
wx.hideLoading();
wx.showModal({
content: res.message || '请求失败,请重试',
showCancel: false,
success: res=>{
if (res.confirm || (!res.cancel && !res.confirm)) {
this.wxLogin();
}
}
})
}
}).catch(rej=>{
wx.hideLoading();
wx.showModal({
content: rej.message || '内部错误,请重试',
showCancel: false,
success: res=>{
//当用户点击确认按钮或者不是取消按钮都运行以下代码
if (res.confirm || (!res.cancel && !res.confirm)) {
this.wxLogin();
}
}
})
})
}
上面的代码有两个新的知识点:
wx.setStorageSync()
设置本地缓存」wx.setStorageSync({
key:"key",
data:"value"
})
有咩有设置成功可以在这里查看
wx.getStorageSync()
获取本都缓存」wx.getStorageSync({
key: 'key'
})
autoUserLogin()
函数的代码是不完整的,我们还要获取到 token
之后我们应该要干嘛。等写完登录后面会完善代码。
登录逻辑也没有写完,我们是新用户拿到 openid
之后需要用户去授权手机号。
下一章节我们来讲解新用户授权获取用户手机号登录。