App.vue

App.vue是 qinjs 的主组件。qinjs js 引擎版是 app.vue 。

所有页面都是在 App.vue 下进行切换的，是应用入口文件。但 App.vue 本身不是页面，这里不能编写视图元素，也就是没有 <template> 。

这个文件的作用包括：监听应用生命周期、配置全局样式、配置全局的存储globalData

应用生命周期仅可在 App.vue 中监听，在页面监听无效。

生命周期

qinjs 支持如下应用生命周期函数：

函数名	说明	平台兼容
onLaunch	当qinjs 初始化完成时触发（全局只触发一次），参数为应用启动参数，同 qin.getLaunchOptionsSync 的返回值
onShow	当 qinjs 启动，或从后台进入前台显示，参数为应用启动参数，同 qin.getLaunchOptionsSync 的返回值
onHide	当 qinjs 从前台进入后台
onError	当 qinjs 报错时触发
onUniNViewMessage	-
onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数
onPageNotFound	页面不存在监听函数
onThemeChange	监听系统主题变化
onLastPageBackPress	最后一个页面按下 Android back 键，常用于自定义退出
onExit	监听应用退出

示例代码

Script

<script>
// 只能在 App.vue 里监听应用的生命周期
export default {
  onLaunch: function(options) {
    console.log('App Launch');
    console.log('应用启动路径：', options.path);
  },
  onShow: function(options) {
    console.log('App Show');
    console.log('应用启动路径：', options.path);
  },
  onHide: function() {
    console.log('App Hide');
  },
};
</script>

<script>
// 只能在 App.vue 里监听应用的生命周期
export default {
  onLaunch: function(options) {
    console.log('App Launch');
    console.log('应用启动路径：', options.path);
  },
  onShow: function(options) {
    console.log('App Show');
    console.log('应用启动路径：', options.path);
  },
  onHide: function() {
    console.log('App Hide');
  },
};
</script>

注意

• 应用生命周期仅可在 App.vue 中监听，在其它页面监听无效。
• 以组合式 API 使用时，在 Vue3 中存在一定区别，请分别参考： Vue3 组合式 API 使用文档。
• 应用启动参数，可以在API qin.getLaunchOptionsSync获取，详见
• onlaunch里进行页面跳转，如遇白屏报错，请参考
• App.vue 不能写模板
• onPageNotFound 页面实际上已经打开了（比如通过分享卡片、小程序码）且发现页面不存在，才会触发， api 跳转不存在的页面不会触发（如 qin.navigateTo ）

globalData

小程序有 globalData ，这是一种简单的全局变量机制。这套机制在 qinjs 里也可以使用，并且全端通用。

当然 vue 框架的全局变量，另有其他方式定义。

以下是 App.vue 中定义 globalData 的相关配置：

Script

<script>
  export default {
    globalData: {
      text: 'text',
    },
  };
</script>

<script>
  export default {
    globalData: {
      text: 'text',
    },
  };
</script>

js中操作globalData的方式如下： getApp().globalData.text = 'test'

在应用 onLaunch 时， getApp 对象还未获取，暂时可以使用 this.globalData 获取 globalData 。

如果需要把 globalData 的数据绑定到页面上，可在页面的onShow页面生命周期里进行变量重赋值。

globalData 是简单的全局变量，如果使用状态管理，请使用 pinia （ main.js 中定义）

全局样式

在 App.vue 中，可以定义一些全局通用样式，例如需要加一个通用的背景色，首屏页面渲染的动画等都可以写在 App.vue 中。如：

Style

<style>
  /* #ifndef WX */
  @import './common/uni.css';
  /* #endif*/
</style>

<style>
  /* #ifndef WX */
  @import './common/uni.css';
  /* #endif*/
</style>