最近,由于公司需要研究了一下微信小程序的开发,特此记录一下小程序登录授权的流程,便于自己理解,也希望对他人有多帮助。如有错误,欢迎指正!!
1.实现思路
由于微信官方修改了getUserInfo接口,现在一进入小程序无法自动弹出授权界面,所以需要我们自己写一个微信授权界面使用button按钮去触发该接口。
① 先调用wx.login获取登录凭证(code),然后通过code进而换取用户登录态信息,包括用户的唯一标识(openid)及本次登录的会话密钥(session_key)等。
② 获取用户信息,先调用wx.getSetting获取用户当前的设置,判断用户是否授权过。如果已经授权,则直接调用getUserInfo获取头像、昵称等,不会弹框。需要的话设置全局变量。如果暂未授权,则需要跳转到我们写的授权界面并使用button按钮去触发来获取用户授权。
③ 大致就是这么一个逻辑,如果其中有其他业务逻辑,还请另行添加修改。此外,如果对小程序开发不太熟悉,可以参照本篇博客和官方文档实现登录授权功能。
2.界面展示
3.逻辑代码
主要代码如下:
//app.js App({ onLaunch: function () { // 小程序启动之后触发。展示本地存储能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) // 登录 wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId var that = this; console.log(res) if(that.globalData.openId){ try{ wx.setStorageSync("open_id", that.globalData.openId)//**设置本地缓存**同步 }catch(e){} }else{ console.log(res.code); wx.request({ url: '',//**请求后台地址** data: {code: res.code }, success: (res) =>{ that.globalData.openId = res.data.openid //**给全局变量赋值** wx.setStorage({//**设置本地缓存**异步 key: "open_id", data: res.data.openid, }) if(res.data.nickname == null){} } }) } }, }) // 获取用户信息 wx.getSetting({ success: res => { if (res.authSetting['scope.userInfo']) { // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框 wx.getUserInfo({ success: res => { va