本文最后更新于:2 years ago

简介

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


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!

虚拟dom Previous
echarts的使用(含小程序mpvue封装) Next