Taro 3 支持将 Web 框架直接运行在各平台，开发者使用的是真实的 React 和 Vue 等框架。

但是 Taro 在组件、API、路由等规范上，遵循微信小程序规范，所以在 Taro 中使用 React 和开发者熟悉的 Web 端有一些差异

React API

Taro 3 中开发者使用的是真实的 React，React 的 API 如 Component、useState、useEffect 等都需要从 React 包中获取

// 从 'react' 包中获取 React API
import React, { Component, useState, useEffect } from 'react'

入口组件和页面组件

Taro遵循小程序的路由规范，所以引入了入口组件和页面组件的概念，分别对应小程序规范的入口组件 app 和页面组件 page

一个Taro应用由一个入口组件和至少一个页面组件组成

入口组件

默认是src目录下的app.js，在入口组件中我们可以设置全局状态或访问小程序入口实例的生命周期。

import React, { useEffect } from 'react'

// Taro 额外添加的 hooks 要从 '@tarojs/taro' 中引入
import { useDidShow, useDidHide } from '@tarojs/taro'

// 假设我们要使用 Redux
import { Provider } from 'react-redux'
import configStore from './store'

// 全局样式
import './app.css'

const store = configStore()

function App(props) {
  // 可以使用所有的 React Hooks
  useEffect(() => {})

  // 对应 onShow
  useDidShow(() => {})

  // 对应 onHide
  useDidHide(() => {})

  return (
    // 在入口组件不会渲染任何内容，但我们可以在这里做类似于状态管理的事情
    <Provider store={store}>
      {/* props.children 是将要被渲染的页面 */}
      {props.children}
    </Provider>
  )
}

export default App

生命周期方法

除去支持React的生命周期方法外，额外支持以下生命周期

• onLaunch(options)

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

• componentDidShow(options)

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

  和 onLaunch 生命周期一样，可以访问到程序初始化参数

• componentDidHide()

  程序切后台时触发

• onError(error)

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

• onPageNotFound(Object)

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

• onUnhandledRejection(Object)

  小程序有未处理的Promise拒绝时触发

页面组件

每一个 Taro 应用都至少包括一个页面组件，页面组件可以通过 Taro 路由进行跳转，也可以访问小程序页面的生命周期

import React, { useEffect } from 'react'
import { View } from '@tarojs/components'
import { useReady, useDidShow, useDidHide, usePullDownRefresh } from '@tarojs/taro'

function Index() {
  // 可以使用所有的 React Hooks
  useEffect(() => {})

  // 对应 onReady
  useReady(() => {})

  // 对应 onShow
  useDidShow(() => {})

  // 对应 onHide
  useDidHide(() => {})

  // Taro 对所有小程序页面生命周期都实现了对应的自定义 React Hooks 进行支持
  // 详情可查阅：【Hooks】
  usePullDownRefresh(() => {})

  return <View className="index" />
}

export default Index

生命周期方法

• onLoad(options)

  在小程序环境中对应页面的onLoad

• onUnload()

  页面卸载时执行

• onReady()

  从此生命周期开始可以使用 createCanvasContext 或 createSelectorQuery 等 API 访问小程序渲染层的 DOM 节点。

• onPullDownRefresh()

  监听用户下拉动作

  • 需要在全局配置的 window 选项中或页面配置中设置 enablePullDownRefresh: true；
  • 可以通过 Taro.startPullDownRefresh 触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
  • 当处理完数据刷新后，Taro.stopPullDownRefresh 可以停止当前页面的下拉刷新.

• onReachBottom()

  监听用户上拉触底事件

• onPageScroll(Object)

  监听用户滑动页面事件

• onAddToFavorites(Object)

  监听用户点击右上角菜单“收藏”按钮的行为，并自定义收藏内容

  此事件处理函数需要 return 一个 Object，用于自定义收藏内容

  onAddToFavorites (res) {
    // webview 页面返回 webviewUrl
    console.log('WebviewUrl: ', res?.webviewUrl)
    return {
      title: '自定义标题',
      imageUrl: '<https://demo.png>',
      query: 'name=xxx&age=xxx',
    }
  }
  

• onShareAppMessage(Object)

  监听用户点击页面内转发按钮（Button 组件 openType='share'）或右上角菜单“转发”按钮的行为，并自定义转发内容。

  export default class Index extends Component {
    onShareAppMessage(res) {
      if (res.from === 'button') {
        // 来自页面内转发按钮
        console.log(res.target)
      }
      return {
        title: '自定义转发标题',
        path: '/page/user?id=123',
      }
    }
  }
  

内置组件

Taro 中可以使用小程序规范的内置组件进行开发，如 <View>、<Text>、<Button> 等

规范

1. 在 React 中使用这些内置组件前，必须从 @tarojs/components 进行引入。
2. 组件属性遵从大驼峰式命名规范。

import { Swiper, SwiperItem } from '@tarojs/components'

function Index() {
  return (
    <Swiper
      className="box"
      autoplay
      interval={1000}
      indicatorColor="#999"
      onClick={() => {}}
      onAnimationFinish={() => {}}
    >
      <SwiperItem>
        <View className="text">1</View>
      </SwiperItem>
      <SwiperItem>
        <View className="text">2</View>
      </SwiperItem>
      <SwiperItem>
        <View className="text">3</View>
      </SwiperItem>
    </Swiper>
  )
}

事件

在事件回调函数中，第一个参数是事件对象，回调中用 stopPropagation 可以阻止冒泡。

<aside> ♻️

内置事件名以 on 开头，遵从小驼峰式（camelCase）命名规范

</aside>