微信小程序生命周期执行app.onLaunch与page.onLoad异步问题

微信小程序使用 less、sass

//project.config.json 文件  
// 修改setting 文件 useCompilerPlugins (支持typescript、less、sass)
"setting":{
	"useCompilerPlugins": ["sass"]
}

1.app

onLaunch > onShow

2.page

onLoad > onShow > onReady

总的来说 ：app > page

但是 存在异步操作时会出现onLaunch 中代码未执行完而onLoad 代码开始执行

方式一 利用函数回调（实测)

App({
    onLaunch() {
      this.getChartCode()
    },
    globalData:{
    	openid:''
    },
    getChartCode() {
        wx.login({
            success: async (res) => {
                const { code, data } = await getOpenid("/api/get_openid", { code: res.code })
                if (code !== 1) return
                wx.setStorageSync('openid', data.openid)
                this.globalData.openid = data.openid
                if (this.Callback) this.Callback();
            },
        })
    },
});

// on page.js
Page({
    onLoad() {
      if (getApp().globalData.openid) {
           //to do...
      } else {
         getApp().Callback = () => {
             //to do...
         }
      }
    },
});

方式二 使用 spa-custom-hooks插件（实测有效）

//第一步，安装插件：
npm install spa-custom-hooks
//app.j 引入
import CustomHook from 'spa-custom-hooks';
let globalData = {openid: ''}
CustomHook.install({
    'Openid': {
        name: 'Openid',
        watchKey: 'openid',
        onUpdate(val) {
            return !!val;
        }
    },
}, globalData || 'globalData')
App({
	onLaunch(options) {
        this.getChartCode()
    },
    getChartCode() {
        wx.login({
            success: async (res) => {
                const { code, data } = await getOpenid("/api/get_openid", { code: res.code })
                if (code !== 1) return
                wx.setStorageSync('openid', data.openid)
                this.globalData.openid = data.openid
            },
        })
    },
    globalData
)}
//页面使用
onLoadOpenid(){}
onReadyOpenid(){}
onShowOpenid(){
    //小程序内页面渲染完成 && 页面显示
    //Tips：适用于需要获取小程序组件或者dom，并且每次页面显示都会执行的场景
 },

地址：https://gitee.com/btmans/wechat_onLaunch_onload/tree/master/node_modules/spa-custom-hooks#https://gitee.com/link?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fs%2FpUQ4Xkma79xd

3. 通过Object.defineProperty监听globalData中的值（实测)

// on app.js
App({
    onLaunch() {
     	// to do...
    },
    globalData:{
    	openid:''
    },
   // 监听相关属性
    watch: function (fn) {
        var obj = this.globalData
        Object.defineProperty(obj, 'openid', {
          configurable: true,
          enumerable: true,
          set: function (value) {
           	// to do...
          },
          get: function () {
           	// to do...
          }
        })
    },
});

// on page.js
Page({
    onLoad() {
      if (getApp().globalData.openid) { // 登录已完成
           // do something
      } else {
          getApp().watch(() =>  // do something)
      }
    },
});

4.通过beautywe的状态机插件(转载至微信开放社区 未实测)

// on app.js
import { BtApp } from '@beautywe/core/index.js';
import status from '@beautywe/plugin-status/index.js';
import event from '@beautywe/plugin-event/index.js';

const app = new BtApp({
    onLaunch() {
      // 发起静默登录调用
      login()

      // 把状态机设置为 success
        .then(() => this.status.get('login').success())

      // 把状态机设置为 fail
        .catch(() => this.status.get('login').fail());
    },
});
// status 插件依赖于 beautywe-plugin-event
app.use(event());
 
// 使用 status 插件
app.use(status({
  statuses: [
    'login'
  ],
}));

// 使用原生的 App 方法
App(app);


// on page.js
Page({
    onLoad() {
      // must 里面会进行状态的判断，例如登录中就等待，登录成功就直接返回，登录失败抛出等。
      getApp().status.get('login').must().then(() => {
        // 进行一些需要登录态的操作...
      })
    },
});