⼩程序⽤户登录流程思路及主要代码
⼩程序⽤户登录流程思路
由于官⽅不允许在刚进⼊⼩程序的时候，弹出⽤户登陆页⾯，需要在进⼊⼩程序后，⽤户主动点击才能进⼊登陆页⾯。此时，将会给⼩程序开发者在设计⽤户登陆页⾯时，带来⼀定的⿇烦。现将我的⼩程序⽤户登陆的基本思路和流程记录下。
⼩程序⼊⼝页⾯设计思路
⾸先需要判断⽤户是否已经授权，需要从下⾯两个⽅⾯来判断。
1、⽤户已授权登录
此时，在⽤户登陆页⾯中，可以考虑将⽤户的信息存放在全局变量globalData.userInfo中。在进⼊⼩程序时，通过判断
globalData.userInfo是否为空，来判断⽤户是否已经登录。
2、⽤户之前已登录
在⽤户登陆页⾯中已成功授权登录后，将⽤户的信息写⼊数据库中。进⼊⼩程序时，通过判断是否可以从数据库中获取⽤户的信息来判断⽤户之前是否已经登录。
3、⽤户之前未授权登录
直接进⼊登陆页⾯
登陆页⾯设计思路
进⼊登陆页⾯意味着⽤户之前未授权⼩程序获取⽤户信息，此时需要弹出获取⽤户信息弹窗。
如果⽤户点击确认，则将⽤户的信息存放在全局变量globalData.userInfo，并写⼊数据库中。
如果⽤户点击取消，则弹出相关提⽰
主要代码
l
<view if="{{isShow}}">
<view if="{{canIUse}}">
<view class='header'>
<image src='/images/wx_login.jpg'></image>
</view>
<view class='content'>
<view>申请获取以下权限</view>
<text>获得你的公开信息(昵称，头像等)</text>
</view>
<button class='bottom'type='primary'open-type="getUserInfo"lang="zh_CN"bindgetuserinfo="bindGetUserInfo">
授权登录
</button>
</view>
<view else>请升级版本</view>
</view>
login_wx.js
/**
* 页⾯的初始数据
*/
data:{
//判断⼩程序的API，回调，参数，组件等是否在当前版本可⽤。
canIUse: wx.canIUse('UserInfo'),
openid:'',
userInfo:'',
/
/ 判断是否前期已经授权
isShow:true,
// 判断⽤户进⼊⼩程序的⽅式，是否是通过扫描海报上的⼆维码进⼊
isFromCode:false
},
},
switchTabToMine:function(userInfo){
var that =this
app.globalData.userInfo = userInfo
that.uploadUserInfoToCloud()
wx.navigateBack({
})
},
uploadUserInfoToCloud:function(){
// var userInfo = app.globalData.userInfo
// console.log(userInfo)
wx.cloud.callFunction({
// 需调⽤的云函数名
name:'login_wx',
data:{
userInfo: app.globalData.userInfo
},
/
/ 成功回调
success:function(res){
console.log('uploadUserInfoToCloud --- ',sult.openid, sult.userInfo)        app.globalData.openid = sult.openid
app.globalData.userAllInfo = sult.userInfo
// app.globalData.userInfo = sult.userInfo.userInfo
}
})
},
bindGetUserInfo:function(e){
var that =this
if(e.detail.userInfo){
//授权成功后，跳转进⼊⼩程序⾸页
that.setData({
userInfo: e.detail.userInfo,
isShow:false
})
that.switchTabToMine(e.detail.userInfo)
}else{
//⽤户按了拒绝按钮
wx.showModal({
title:'警告',
content:'您点击了拒绝授权，将⽆法进⼊⼩程序，请授权之后再进⼊',
代码转换
showCancel:false,
confirmText:'返回授权',
success:function(res){
firm){
console.log('⽤户点击了“返回授权”')
// wx.navigateBack({
// })
}
}
})
}
},
/**
* ⽣命周期函数--监听页⾯加载
*/
onLoad:function(options){
var that =this;
// 查看是否授权
success:function(res){
// 如果⽤户已授权
if(res.authSetting['scope.userInfo']){
/
/ console.log('------- login ')
success:function(res){
that.setData({
userInfo: res.userInfo,
isShow:false
})
that.switchTabToMine(res.userInfo)
}
})
}else{
that.setData({
isShow:true
})
}
}
})
},
index.js主要代码
// 获取⽤户信息
getUserInfo:function(){
var that =this
var userInfo = app.globalData.userInfo
// 判断⽤户是否通过login_wx页⾯进⼊mine页⾯
var isLogin =!(userInfo =='')
console.log('getUserInfo', isLogin)
if(isLogin ==true){
that.setData({
isLogin:true,
avatar: userInfo.avatarUrl,
nickname: userInfo.nickName,
})
}else{
// 从数据库中获取⽤户信息，⽤户之前已经登录，登录信息已存储在数据库中      wx.cloud.callFunction({
// 需调⽤的云函数名
name:'getUserAllInfo',
// 成功回调
success:function(res){
// console.log('getUserAllInfo --- ', sult.userInfo)
// 如果数据库中有该⽤户数据，则将数据存储
sult.userInfo.data.length !=0){
app.globalData.userAllInfo = sult.userInfo.data[0]
app.globalData.userInfo = sult.userInfo.data[0].userInfo var userInfo = app.globalData.userInfo
// console.log('userInfo --- ', userInfo)
that.setData({
isLogin:true,
avatar: userInfo.avatarUrl,
nickname: userInfo.nickName,
})
}
}
})
}
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。