Taro入门——快速上手

入口组件#

Taro 项目入口组件用于注册应用，默认为src/app.ts。在入口文件中可以设置全局状态或访问小程序入口实例的生命周期等。

1
import { PropsWithChildren } from 'react'
2
// Taro 额外添加的 hooks
3
import { useLaunch } from '@tarojs/taro'
4
import './app.scss'
5

6
function App({ children }: PropsWithChildren<any>) {
7
  useLaunch(() => {
8
    console.log('App launched.')
9
  })
10

11
  // children 是将要会渲染的页面
12
  return children
13
}
14

15
export default App

入口组件可以使用小程序的生命周期：

• onLaunch

  在小程序环境中对应 app 的 onLaunch。详细参数

  Taro Hooks 中使用 useLaunch 代替 onLaunch

• onError

  小程序发生脚本错误或 API 调用报错时触发。

  Taro Hooks 中使用 useError 代替 onError

• componentDidShow

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

• componentDidHide

  程序切后台时触发。

• onPageNotFound

  小程序页面找不到时。

  Taro Hooks 中使用 usePageNotFound 代替 onPageNotFound

更多请查看Taro Hooks

全局配置#

src/app.config.ts 文件用来对小程序进行全局配置，配置项遵循微信小程序规范，并且对所有平台进行统一。

用于设置页面组件的路径、全局窗口、路由等信息，一个最简单的全局配置如下：

使用编译时宏函数 defineAppConfig 包裹配置对象，以获得类型提示和自动补全。

1
export default defineAppConfig({
2
  // 页面路径列表
3
  pages: ['pages/index/index'],
4
  // 全局的默认窗口表现
5
  window: {
6
    backgroundTextStyle: 'light',
7
    navigationBarBackgroundColor: '#fff',
8
    navigationBarTitleText: 'WeChat',
9
    navigationBarTextStyle: 'black',
10
  },
11
  // 底部 tab 栏的表现
12
  tabBar: {},
13
  // 分包结构配置
14
  subPackages: {},
15
})

• pages

  用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径 + 文件名 信息。数组的第一项代表小程序的初始页面（首页）。 新增/减少页面，都需要对 pages 数组进行修改。

• window

  用于设置小程序的状态栏、导航条、标题、窗口背景色。详细配置

• tabBar

  通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

配置规范基于微信小程序的全局配置进行制定，所有平台进行统一。在配置文件中，Taro 并不关心框架的区别，Taro CLI 会直接在编译时在 Node.js 环境直接执行全局配置的代码，并把 export default 导出的对象序列化为一个 JSON 文件。

因此，必须保证配置文件是在 Node.js 环境中是可以执行的，不能使用一些在 H5 环境或小程序环境才能运行的包或者代码，否则编译将会失败。

页面组件#

页面组件默认放在src/pages下，配置在全局配置中的pages中，通过 Taro 路由进行跳转，一个 Taro 应用至少有一个页面组件。

与 React 组件相比，Taro 中我们需要使用@tarojs/components的提供的跨平台组件View、Text等进行开发。

1
export default definePageConfig({
2
  navigationBarTitleText: '首页',
3
})

1
Taro create --name xxx