uniapp 微信小程序 app.js 如何使用或配置

在uniapp开发微信小程序时，应该如何正确配置和使用app.js文件？我在项目中创建了app.js，但不知道是否需要像原生小程序那样在里边注册App实例，或者uniapp有特殊的处理方式？另外，全局变量和方法应该怎样在app.js中定义才能在所有页面生效？求具体示例和注意事项。

2 回复

在 app.js 中配置全局生命周期和全局数据。例如：

  • onLaunch：小程序初始化时执行
  • globalData：定义全局变量
  • 其他生命周期如 onShow、onHide 等

可在此引入插件或设置全局方法。


在 UniApp 中，app.js 是小程序的全局逻辑文件，用于配置和初始化应用级功能。以下是主要用法和配置：

1. 基本结构

// app.js
App({
  // 全局数据
  globalData: {
    userInfo: null,
    baseUrl: 'https://api.example.com'
  },

  // 小程序初始化完成时触发（全局只触发一次）
  onLaunch(options) {
    console.log('App Launch', options);
    // 可在此进行登录、获取系统信息等初始化操作
    this.getUserInfo();
  },

  // 小程序显示到前台时触发
  onShow(options) {
    console.log('App Show', options);
  },

  // 小程序隐藏到后台时触发
  onHide() {
    console.log('App Hide');
  },

  // 自定义方法
  getUserInfo() {
    // 获取用户信息的逻辑
  }
});

2. 常用配置项

  • globalData：全局共享数据，可在所有页面通过 getApp().globalData 访问
  • onLaunch：监听小程序初始化
  • onShow：监听小程序显示
  • onHide：监听小程序隐藏

3. 页面中调用示例

// pages/index/index.vue
export default {
  onLoad() {
    const app = getApp(); // 获取App实例
    console.log(app.globalData.baseUrl); // 访问全局数据
    app.getUserInfo(); // 调用App中定义的方法
  }
}

4. 注意事项

  • 不要频繁修改 globalData，可能引起性能问题
  • onLaunch 中可进行网络请求，但注意异步操作可能未完成时页面已加载
  • 使用 getApp() 获取实例时，确保在 onLoad 之后调用

通过合理配置 app.js，可实现全局状态管理、生命周期控制和公共方法封装。

回到顶部