微信小程序授权登录整体把握

用户体验的过程

第一次登陆小程序–>一个授权登录界面
–>点击按钮登录–>允许？跳到首页：继续验证或者这里自己写逻辑；
以后登录小程序–>直接到首页

我们眼中的过程

1.是不是第一次登陆小程序？-----判断依据就是openid
openid：每一个微信号登录小程序只有一个唯一的openid。就是用这个判断用户是不是第一次登录小程序或者，登录态有没有失效。
关于openid 的获取 地址：戳；

弄懂了最大的疑惑下面开始分析步骤

！！！首先，app.js的onload函数，里面先获取code–>获取openid

App({
/**
* 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
*/
onLaunch: function () {
var that = this;
wx.login({
success: function (res) {
if (res.code) {
wx.request({
url:'这里写接口地址',
data: {
code: res.code
},
method: "POST",
header: {
'content-type': 'application/x-www-form-urlencoded' // 默认值
},
success: function (res) {
that.globalData.openid = res.data.openid;
}
})
}
}
})
},

/**
* 设置全局变量
*/
globalData: {
urlPath:"服务器地址",
openid: 0,
}
})

1-用户进来index页面。onload生命周期函数开始起作用，对应的API官方文档里面去看下。授权了res.authSetting[‘scope userinfo’]会有返回值。那就是之前登录过了。没有 就wx.redirectTo跳到login页面

onLoad: function () {
var that = this;
// 查看是否授权
wx.getSetting({
success: function (res) {
console.log(res.authSetting)
if (res.authSetting['scope.userInfo']) {
wx.getUserInfo({
success: function (res) {
//从数据库获取用户信息
console.log("从数据库获取用户信息")

//用户已经授权过
}
});
}else{
wx.redirectTo({
url: '/pages/login/login'
})
}
}
})
},

2.进入login页面。
页面我就当大家都会谢了。重点是open-type="getUserInfo"这个

<button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
授权登录
</button>

login.js
这里的一个小重点是，授权成功以后获取的用户头像是微信临时给的，就是过段时间就访问不到了。所以要趁能访问到，把这个临时地址发到服务器，吧图片下载到服务器上，然后返回存在服务器上的路径，
然后就是把用户的一些信息通过post发给服务器，存到数据库里面，主要是openid这个用户标识符一定要存好。

bindGetUserInfo: function (e) {
if (e.detail.userInfo) {
//用户按了允许授权按钮
var that = this;
//插入登录的用户的相关信息到数据库
console.log(e.detail.userInfo.avatarUrl)
wx.request({
url:'这里写接口地址',
data: {
name: e.detail.userInfo.nickName,
url: e.detail.userInfo.avatarUrl,
},
method: "POST",
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {
//将头像存到服务器
const avatarurl = res.data.path
console.log(res.data)
console.log("头像获取并存储成功");
wx.request({
url: getApp().globalData.urlPath + 'addUserInfo.ashx',
data: {
openid: getApp().globalData.openid,
nickName: e.detail.userInfo.nickName,
avatarUrl: avatarurl,
province: e.detail.userInfo.province,
city: e.detail.userInfo.city
},
method:"POST",
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {
//用户注册成功
console.log(res.data)
wx.switchTab({
url: 'page/index/index'
})
}
})
}
});

} else {
//用户按了拒绝按钮
wx.showModal({
title: '警告',
content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',
showCancel: false,
confirmText: '返回授权',
success: function (res) {
if (res.confirm) {
console.log('用户点击了“返回授权”')
}
}
})
}
},

这些都完了，就授权登录完成了。大概就这样子，第一次写可能有点慢。我就写了两天多。主要是整体把握吧。
有什么不懂的，或者我讲的不清楚的可以一起交流，毕竟我也是刚开始学。。