入口组件

每一个 Taro 应用都需要一个入口组件（Vue 组件）用来注册应用。入口文件默认是 src 目录下的 app.js。

在入口组件中我们可以设置全局状态或访问小程序入口实例的生命周期。

注意：

1. 自 Taro v3.1 开始，Vue2 入口组件的写法有 Breaking Changes，详情请见 3.1.0 发布信息。
2. 由于 Vue3 Global API 有变化（0009-global-api-change），Vue3 的入口组件写法和 Vue2 不同。

代码示例

• Vue2
• Vue3

app.js

import Vue from 'vue'
// 假设我们已经在 './store' 配置好了 vuex
import store from './store'
const App = {
  store,
  // 可以使用所有的 Vue 生命周期方法
  mounted () {},
  // 对应 onLaunch
  onLaunch () {},
  // 对应 onShow
  onShow (options) {},
  // 对应 onHide
  onHide () {},
  render(h) {
    // this.$slots.default 是将要会渲染的页面
    return h('block', this.$slots.default)
  }
}
export default App

app.js

import { createApp } from 'vue'
const app = createApp({
  // 可以使用所有的 Vue 生命周期方法
  mounted () {},
  // 对应 onLaunch
  onLaunch () {},
  // 对应 onShow
  onShow (options) {},
  // 对应 onHide
  onHide () {},
  // 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖
})
export app

入口组件配置

请参考 全局配置

生命周期方法

在 Vue2 和 Vue3 中，Taro 额外添加的生命周期方法的写法一致

入口组件除了支持 Vue 的生命周期方法外，还根据小程序的标准，额外支持以下生命周期：

onLaunch (options)

在小程序环境中对应 app 的 onLaunch。

在此生命周期中通过访问 options 参数或调用 getCurrentInstance().router，可以访问到程序初始化参数。

参数

options

options.referrerInfo

options 参数的字段在不同小程序中可能存在差异，如：

场景值 scene，在微信小程序和百度小程序中存在区别，请分别参考 微信小程序文档 和 百度小程序文档

onShow (options)

程序启动，或切前台时触发。

和 onLaunch 生命周期一样，在此生命周期中通过访问 options 参数或调用 getCurrentInstance().router，可以访问到程序初始化参数。

参数与 onLaunch 中获取的基本一致，但百度小程序中补充两个参数如下：

onHide ()

程序切后台时触发。

onPageNotFound (Object)

程序要打开的页面不存在时触发。

参数

Object