入口组件

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

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

代码示例

  • Class Component
  • Functional Component

app.js

  1. import React, { Component } from 'react'
  2. // 假设我们要使用 Redux
  3. import { Provider } from 'react-redux'
  4. import configStore from './store'
  5. // 全局样式
  6. import './app.css'
  7. const store = configStore()
  8. class App extends Component {
  9. // 可以使用所有的 React 生命周期方法
  10. componentDidMount () {}
  11. // 对应 onLaunch
  12. onLaunch () {}
  13. // 对应 onShow
  14. componentDidShow () {}
  15. // 对应 onHide
  16. componentDidHide () {}
  17. render () {
  18. // 在入口组件不会渲染任何内容,但我们可以在这里做类似于状态管理的事情
  19. return (
  20. <Provider store={store}>
  21. {/* this.props.children 是将要被渲染的页面 */}
  22. {this.props.children}
  23. </Provider>
  24. )
  25. }
  26. }
  27. export default App

app.js

  1. import React, { useEffect } from 'react'
  2. // Taro 额外添加的 hooks 要从 '@tarojs/taro' 中引入
  3. import { useDidShow, useDidHide } from '@tarojs/taro'
  4. // 假设我们要使用 Redux
  5. import { Provider } from 'react-redux'
  6. import configStore from './store'
  7. // 全局样式
  8. import './app.css'
  9. const store = configStore()
  10. function App (props) {
  11. // 可以使用所有的 React Hooks
  12. useEffect(() => {})
  13. // 对应 onShow
  14. useDidShow(() => {})
  15. // 对应 onHide
  16. useDidHide(() => {})
  17. return (
  18. // 在入口组件不会渲染任何内容,但我们可以在这里做类似于状态管理的事情
  19. <Provider store={store}>
  20. {/* props.children 是将要被渲染的页面 */}
  21. {props.children}
  22. </Provider>
  23. )
  24. }
  25. export default App

入口组件配置

请参考 全局配置

生命周期方法

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

onLaunch (options)

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

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

参数

options
属性类型说明
pathstring启动小程序的路径
scenenumber启动小程序的场景值
queryObject启动小程序的 query 参数
shareTicketstringshareTicket,详见获取更多转发信息
referrerInfoObject来源信息。从另一个小程序、公众号或 App 进入小程序时返回。否则返回 {}
options.referrerInfo
属性类型说明
appIdstring来源小程序,或者公众号(微信中)
extraDataObject来源小程序传过来的数据,微信和百度小程序在scene=1037或1038时支持
sourceServiceIdstring来源插件,当处于插件运行模式时可见

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

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

componentDidShow (options)

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

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

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

属性类型说明
entryTypestring展现的来源标识,取值为 user/ schema /sys :
user:表示通过home前后
切换或解锁屏幕等方式调起;
schema:表示通过协议调起;
sys:其它
appURLstring展现时的调起协议,仅当entryType值为 schema 时存在

componentDidHide ()

程序切后台时触发。

onPageNotFound (Object)

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

参数

Object
属性类型说明
pathstring不存在页面的路径
queryObject打开不存在页面的 query 参数
isEntryPageboolean是否本次启动的首个页面(例如从分享等入口进来,首个页面是开发者配置的分享页面)