uniApp 小程序 vue3 app.vue登录index调用回调

相当于几年前写的

uni-app小程序首页index获取不到app中动态设置的globalData的解决方法 www.jianshu.com/p/b7d11258b… 的vue3版本

主要解决的是在小程序内在app.vue执行静默登录，在其他页面有些接口需要在登录成功之后再进行调用。

适用于是小程序静默登录，且进来的页面不一定为主页，可能是其他的页面。

app.vue

<script setup>
import { provide, reactive, onMounted } from "vue";
import { onLaunch, onShow, onHide, onPageNotFound } from "@dcloudio/uni-app";

const state = reactive({
  isLoggedIn: false,
  userInfo: null,
  loginCallbacks: [],
});

onLaunch(() => {
  console.log("App Launch");
  login();
  //   uni.hideTabBar();
  loadSystemInfo();
});

onShow(() => {
  console.log("App Show");
});

onHide(() => {
  console.log("App Hide");
});

onPageNotFound((e) => {
  console.warn("Route Error：", `${e.path}`);
});

// 获取系统设备信息
const loadSystemInfo = () => {
  uni.getSystemInfo({
    success: (e) => {
      // 获取手机状态栏高度
      let statusBar = e.statusBarHeight;
      let customBar;

      // #ifndef MP
      customBar = statusBar + (e.platform == "android" ? 50 : 45);
      // #endif

      // #ifdef MP-WEIXIN
      // 获取胶囊按钮的布局位置信息
      let menu = wx.getMenuButtonBoundingClientRect();
      // 导航栏高度 = 胶囊下距离 + 胶囊上距离 - 状态栏高度
      customBar = menu.bottom + menu.top - statusBar;
      // #endif

      // #ifdef MP-ALIPAY
      customBar = statusBar + e.titleBarHeight;
      // #endif

      //   由于globalData在vue3 setup存在兼容性问题，改为provide/inject替代
      provide("globalData", {
        statusBarH: statusBar,
        customBarH: customBar,
        screenWidth: e.screenWidth,
        screenHeight: e.screenHeight,
        platform: e.platform,
      });
    },
  });
};

const login = () => {
  // 假设这里有登录逻辑
  // ... 登录操作 ...

  // 使用模拟的 fetchUserInfo Promise 来获取用户信息
  fetchUserInfo().then((userInfo) => {
    console.log("登录成功");
    state.isLoggedIn = true;
    state.userInfo = userInfo;

    // 登录成功后，触发所有注册的回调函数
    state.loginCallbacks.forEach((callback) => callback(userInfo));
  });
};

// 模拟异步请求用户信息的 Promise
function fetchUserInfo() {
  return new Promise((resolve) => {
    setTimeout(() => {
      // 模拟网络延迟
      const userInfo = { id: 1, name: "John Doe" }; // 模拟的用户信息
      resolve(userInfo);
    }, 3000);
  });
}

// 提供状态，以便其他组件可以注入
provide("state", state);
</script>

<style lang="scss">
@import "./uni.scss";
</style>

index.vue

<!-- index.vue -->
<script setup>
import { onMounted, inject } from "vue";

// 从app.vue注入的状态
const state = inject("state", {
  isLoggedIn: false,
  userInfo: null,
  loginCallbacks: [],
});

// 获取用户信息的回调函数
const fetchUserInfo = (userInfo) => {
  console.log("用户信息获取成功:", userInfo);
  // 这里可以执行获取用户信息后的逻辑
};

onMounted(() => {
  // 检查是否已经登录
  if (state.isLoggedIn) {
    // 如果已经登录，执行相关代码
  } else {
    // 注册回调函数
    state.loginCallbacks.push(fetchUserInfo);
  }
});
</script>