微信小程序解决onLoad和onLaunch异步问题

问题描述

微信小程序中，app.js 中的 onLaunch 和 page 中的 onLoad 是异步执行的，不确定执行的先后顺序。假设，page 中的所有接口都需要带 openId 参数，一般都是小程序都是在 onLaunch 中获取 openId，之后在 onLoad 调用接口的时候传入 openId，因为 onLoad 和 onLaunch 是异步执行，则会出现在 onLoad 中使用的时候获取不到 openId 的尴尬场面。

解决方法

在 app.js 中定义一个全局方法，使用 Promise 来实现 onLaunch 执行完成之后，再在 onLoad 中执行

方法实现

/**
 * app.js
 */
App({
  onLaunch() {},
  // 所有页面统一调用，只需调用一次OpenId和Config
  hasLoad() {
    return new Promise((resolve, reject) => {
      this.checkOpenId()
        .then(() => {
          resolve();
        })
        .catch(err => {
          reject(err);
        });
    });
  },
  // 检查openId
  checkOpenId() {
    return new Promise((resolve, reject) => {
      const openId = wx.getStorageSync("openId");
      if (!openId) {
        wx.login({
          success: res => {
            const params = {
              appid: Config.appId,
              code: res.code
            };
            // 此处调用接口获取openId
            XXXXXXXAction.then(res => {
              wx.setStorageSync("openId", res.openId);
              this.globalData.openId = res.openId;
              resolve();
            }).catch(err => {
              reject(err);
            });
          },
          fail: err => {
            reject(err);
          }
        });
      } else {
        this.globalData.openId = openId;
        resolve();
      }
    });
  },
  globalData: {
    openId: ""
  }
});

/**
 * Page
 */
Page({
  data: {},
  onLoad(opts) {
    const app = getApp();
    app.hasLoad().then(res => {
      // 准备完成后，进行下一步操作
    });
  }
});

我的博客