uniapp onlaunch的使用方法是什么

在uniapp中,onLaunch方法具体应该怎么使用?它是在什么时候触发的?能否提供一个完整的示例代码说明它的正确用法?另外,onLaunch和onShow有什么区别,在什么场景下会用到它们?

2 回复

在uniapp中,onLaunch是App.vue的生命周期函数,在应用初始化时执行一次。常用于获取用户信息、检查登录状态等全局初始化操作。

示例:

export default {
  onLaunch() {
    console.log('App启动')
    // 初始化操作
  }
}

在 UniApp 中,onLaunch 是 App.vue 中的一个生命周期函数,用于在应用首次启动时执行初始化操作。它仅在应用启动时触发一次,适合用于全局配置,如检查登录状态、获取系统信息或初始化第三方 SDK。

使用方法:

  1. 位置:在 App.vue<script> 部分定义。
  2. 语法:作为 export default 对象的一个方法。
  3. 参数:接收一个 options 对象,包含应用启动的路径、场景值等(具体参数因平台而异)。

代码示例:

// App.vue
export default {
  onLaunch(options) {
    // 应用启动时执行
    console.log('App 启动,参数:', options);
    
    // 示例:检查用户登录状态
    const token = uni.getStorageSync('userToken');
    if (!token) {
      uni.navigateTo({ url: '/pages/login/login' });
    }

    // 示例:获取设备信息
    const systemInfo = uni.getSystemInfoSync();
    console.log('系统信息:', systemInfo);
  },
  onShow(options) {
    // 应用从后台进入前台时触发
  },
  onHide() {
    // 应用进入后台时触发
  }
}

注意事项:

  • 仅触发一次:应用完全关闭后重新打开才会再次触发。
  • 全局生效:适用于所有页面,常用于初始化全局数据。
  • 异步操作:如需异步请求(如登录验证),建议结合 async/await 或 Promise 处理。
  • 平台差异options 参数在不同平台(微信小程序、H5 等)中可能包含不同字段,需参考 UniApp 官方文档。

常用场景:

  • 初始化用户身份验证
  • 配置全局样式或主题
  • 预加载必要数据
  • 注册全局事件监听

通过合理使用 onLaunch,可以确保应用启动时完成必要的准备工作,提升用户体验。

回到顶部