记录微信小程序完整登陆流程

先放一张官网的图

由此图可以得知前端通过wx.login()把code传给后端,后端返回用户id即openid与session_key 说明后台已经得知了你用户的id与session_key 完全可以在后台登录,所以可以省下我们再次向后端登陆 即图片的中自定义登陆.当后端返回给我们openid后 我们就实现了登陆(需要跟后端协商好)
省下的就是前端的事了

1 首先我们必须使用下面1中的button组件才可以获得用户授权,取得授权后返回给你一个用户信息,里面包含用户的名称,头像,省份等,选择你需要的信息存入本地 在其他页面调用就行 这里我们默认button 在页面中不展示

<button v-if="show" class='bottom' type="primary" open-type="getUserInfo" @getuserinfo="login">登录</button>

2 然后说我们的登陆流程
2.1首先进入页面需要判断用户是否授权
2.2 如果授权过了 直接登录
2.3 如何没有则需要让用户授权我们登录

onload(){
	wx.getSetting({
					success(res) {
						console.log(res.authSetting)
						if (res.authSetting['scope.userInfo'] == true) {//已授权
							that.login()//这里是登录操作
						}else{
							this.setData({
								show:true    //这里展示我们的button组件.让用户授权
							})
						}
					}
			})
	},

3 再次 说我们登录事件
3.1 我们需要获取用户信息存入本地
3.2 通过wx.login() code 传给后端 后端返回你openid 和session_key

login() {
				wx.getUserInfo({
					success: (res) => {
						console.log(res)
						uni.setStorageSync('headerImg', res.userInfo.avatarUrl) //用户头像
						
						wx.login({
							success: function(res) {
									let code = res.code //取得code码
									//这里执行你们后台定义的登陆  例如
									wx.request ......//这里我不多写了
							}
						})
					},
					fail: () => {
						console.log("未授权");
						wx.showModal({
							title: '警告',
							content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!',
							showCancel: false,
							confirmText: '返回授权',
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击了“返回授权”')
								}
							}
						})
					}
				})
				
			},

这里是完整流程
2.当用户点击登陆时候弹出弹窗 通过wx.getUserInfo() 获取用户信息
3.用户授权同意后调用wx.login(){} 拿到code码 传给后端
4.后端返回给你小程序的秘钥session跟oppenid (代码中一般不放)
5.在调用后端的代码 把code码跟oppenid与秘钥session 一起传给后端(其实后端这里可以两步处理成一部,当然都可以)
6.后端会返回用户唯一appId (微信小程序每个用户对应的小程序appid 是唯一的)
7.然后再执行登陆操作 ==>登陆成功
8.登陆成功获取用户数据存入本地方便下次使用