微信小程序中的 onLaunch 和 onLoad 异步加载

进击的学霸...大约 2 分钟微信小程序

小程序的 onLaunch 和页面级的 onLoad 异步执行,这两个的执行顺序是不一定的,在 onLaunch 中请求还未返回的时候, onLoad 可能就执行了,需要加判断

封装一个全局方法,便于其他页面使用,我们的业务逻辑是只有当用户执行到下单或分享等必须操作时才需要用户登录,用户登录需要先授权个人信息,如果用户授权过个人信息,下次进入的时候就直接登录,登录成功后会赋值 getUserInfoFlagtrue

先判断用户是否授权过我们的小程序。若未授权,执行简单操作。如果授权了,app.js 一定会调用登录,判断 getUserInfoFlagtrue 的话,说明 app.jsonLaunch 先于页面级的 onLoad 执行,正常操作即可;若为 false ,说明 页面级的 onLoad 先于 app.jsonLaunch 先执行了,此时往 app 上挂载一个 check 函数,函数中执行想要执行的方法,而在 app.js 中则要在登录后判断是否存在 check 函数,进而执行相应的逻辑。

流程图:

  1. app.js 中逻辑流程图open in new window 预览:mark
  2. page 中逻辑流程图open in new window 预览:mark

具体的还是看代码吧:

// app.js
wx.getSetting({
    success: res => {
        if (res.authSetting['scope.userInfo']) {
            // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
            that.globalData.hadAuthUserInfo = true
            wx.getUserInfo({
                withCredentials: true,
                success: userInfoRes => {
                    that.globalData.userInfo = {...userInfoRes.userInfo}
                    that.globalData.getUserInfoFlag = true
                    if (that.checkStatusCallback) {
                        that.checkStatusCallback()
                    }
                    cloudApi.login(userInfoRes.userInfo) // 调用登录
                }
            })
        } else {
            that.globalData.hadAuthUserInfo = false
        }
    }
})

// util.js
const app = getApp()
/**
 * params { Function } authCallback 已授权
 * params { Function } unAuthCb 未授权
 */
const checkStatus = (authCallback, unAuthCb = () => {}) => {
  // 判断是否有授权,有授权的话从回调调用方法初始化数据
  // 无授权的话直接调用方法初始化数据
  wx.getSetting({
    success: res => {
      if (res.authSetting['scope.userInfo']) {
        if (app.globalData.getUserInfoFlag) { // onLaunch 先执行
          authCallback()
        } else { // onLoad 先执行
          app.checkStatusCallback = res => {
            authCallback()
          }
        }
      } else {
        unAuthCb()
      }
    }
  })
}

// 使用(判断是否有管理员权限)
import { checkStatus } from '../../utils/util'
// 某页面的 onload 函数
onLoad: function (options) {
    checkStatus(
      () => {
        this.setData({
          hadAuthFlag: app.globalData.hadAuthUserInfo,
          userInfo: app.globalData.userInfo
        })
        this.getUserManagerAuth() // 调用接口判断是否为管理员
      },
      () => {
        console.log('NO_AUTH')
      }
    )
  },
评论
  • 按正序
  • 按倒序
  • 按热度