简介

Taro是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 小程序 / H5 / RN 等应用。致力于解决小程序跨平台的问题。

环境准备

1. 通过node npm i -g @tarojs/cli全局安装taro脚手架
2. 可以使用vscode编辑器进行开发并安装插件eslint
3. 通过taro init初始化taro项目，包含如下文件

   ├── babel.config.js             # Babel 配置
   ├── .eslintrc.js                # ESLint 配置
   ├── config                      # 编译配置目录
   │   ├── dev.js                  # 开发模式配置
   │   ├── index.js                # 默认配置
   │   └── prod.js                 # 生产模式配置
   ├── package.json                # Node.js manifest
   ├── dist                        # 打包目录
   ├── project.config.json         # 小程序项目配置
   ├── src # 源码目录
   │   ├── app.config.js           # 全局配置
   │   ├── app.css                 # 全局 CSS
   │   ├── app.js                  # 入口组件
   │   ├── index.html              # H5 入口 HTML
   │   └── pages                   # 页面组件
   │       └── index
   │           ├── index.config.js # 页面配置
   │           ├── index.css       # 页面 CSS
   │           └── index.jsx       # 页面组件，如果是 Vue 项目，此文件为 index.vue

基础教程

入口文件

每个taro项目都会有一个入口组件和入口配置，如下app.js和它的全局配置文件app.config.js可以配置页面组件路径，窗口等信息

// src/app.js
import React, { Component } from 'react'
import './app.css'

class App extends Component {
  render () {
    // this.props.children 是将要会渲染的页面
    return this.props.children
  }
}

// 每一个入口组件都必须导出一个 React 组件
export default App

// src/app.config.js
export default {
  pages: [
    'pages/index/index'
  ]
}

生命周期

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 进行支持
  usePullDownRefresh(() => {})

  // class中使用方式
  componentDidMount () {}

  // onLoad
  onLoad () {}

  // onReady
  onReady () {}

  // 对应 onShow
  componentDidShow () {}

  // 对应 onHide
  componentDidHide () {}

  // 对应 onPullDownRefresh，除了 componentDidShow/componentDidHide 之外，
  // 所有页面生命周期函数名都与小程序相对应
  onPullDownRefresh () {}
  return (
    <View className='index' />
  )
}

export default Index

接下来就可以使用react语法进行开发，Taro的API