唱吧小程序登录授权页面开发

基本的流程不用多说，按部就班即可，就是使用wx.login()可以获得开发者服务器向微信接口服务器请求获得sessionkey等数据时所需要的参数code，开发者服务器以code+appid+appsecret换取用户唯一标识openid和会话密钥sessionkey。但每一次调用wx.login()都会更新微信接口服务器上的session_key。

同样，改造微信api先，

1. // wechat 登录封装

2. const login = () => {

3.    return new Promise((resolve, reject) => {

4.      wx.login({ success: resolve, fail: reject })

5.    })

6. }

而后，在做自己的登录封装时，可以先去请求微信的code，然后用在自己的请求中，获取并存储自己的登录态。

1. let we_login = await wechat.login() // 微信登录

2. let cb_login = await requestAPI('xxxx/checkCode', { data: {code: we_login.code}})

3. if (cb_login && cb_login.code === 1) {

4.      // xxxx 业务逻辑

5.  } catch (error) {

6.    wx.showModal({

7.      title: '登录提示',

8.      content: '登录失败',

9.      showCancel: false

10.    })

11.  }

而在完成上面整套业务逻辑过程中，可能会遇到一些意想不到的坑，这里面我印象比较深刻的有两个，第一个是关于授权的问题，另一个就是关于小程序生命周期与页面生命周期初始化过程中异步请求回调顺序的问题。

• 授权问题

先说第一个问题，关于授权框唤起的问题，只有用户授权后，才可以进一步获取用户的信息，这个框在最初是可以通过wx.getUserinfo()方法直接唤起，而在5月份以后，微信去掉了这个方法的功能，只能通过固定的button open-type去引导用户授权。

所以在底层逻辑的设计过程中，就要抛弃之前login之后获取用户授权信息的设计思路，而是进行拆分，将login和授权的逻辑分开。

在必须要授权操作的地方例如我们小程序中需要“参赛”或者“关注”的地方，进行单独授权的处理，通过使用wx.getSetting获取用户的授权情况 1) 如果用户已经授权，直接调用wx.getUserInfo获取用户最新的信息 2) 用户未授权，在界面中显示一个按钮提示用户登入，当用户点击并授权后就获取到用户的最新信息。

• onLaunch和onLoad异步回调顺序问题

这个问题简单来说，就是小程序启动有自己的生命周期onLaunch->onShow->onHide，而每个page的实例化也有自己的生命周期，onLoad->onShow->onReady->onHide->onUnload

然而在开发过程中，会遇到这种情况，在App启动onLaunch的时候，发起登录请求，并注册到我们自己的服务器上以便使用，这个过程中，

app on launch -> request -> success -> page onload

是无法判断success和page onload哪个先，会导致页面初始化数据失败的情况，为了解决这个问题，我们团队也是想到了几种常见的解决方案。

解决方案一 就是在request success中处理，使用getCurrentPages方法获取是否页面先于success生成，如果生成我们就强制让页面再次渲染。

这显然是一种hack的方式， 在实际使用过程当中，如果登录逻辑比较复杂，这个方法不是十分便利，page onload在一些特殊情况也会被调用，这显然不是我们想看到的

1. if (getCurrentPages().length != 0) {

2.    getCurrentPages()[getCurrentPages().length - 1].onLoad()

3. }

解决方案二（目前我在开发中使用的是这种方案）

在login的逻辑里，增加一个回调函数cbLoginCallBack。

Page页面判断一下当前app.globalData.sessionKey是否存在，如果没有（第一次）则定义定义一个app方法（回调函数）

1. // Login Request

2.    if (app.cbLoginCallBack) {

3.        typeof app.cbLoginCallBack == 'function' && app.cbLoginCallBack(cb_login.data)

4.    }

5. // 逻辑页面

6. if (app.globalData.sessionkey) {

7.    // init data

8.    } else {

9.    app.cbLoginCallBack = res => {

10.        if (res) {

11.        // init data

12.        }

13. } }

App页面在请求success后判断时候有Page页面定义的回调方法，如果有就执行该方法。因为回调函数是在Page里面定义的所以方法作用域this是指向Page页面。