taro 多端开发框架

taro遵循React语法规范的多端开发解决方案。使用Taro，只书写一套代码，再通过Taro的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5、App端等）运行的代码。

Taro安装node环境( >=12.0.0 )，安装CLI工具：

方法一： 使用 npm 安装 CLI
$ npm install -g @tarojs/cli

方法二： 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli

方法三：安装了 cnpm，使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli

项目初始化： $ taro init myApp

进入项目：$ cd myApp

编译运行：

 项目目录结构：

 编译配置：

 描述整体程序：

 描述各个页面：

 

Taro Doctor 就像一个医生一样，可以诊断项目的依赖、设置、结构，以及代码的规范是否存在问题，并尝试给出解决方案。终端运行命令：taro doctor

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

一个taro应用由一个入口组件和至少一个页面组件所组成。

Taro规范：

1.在React中使用这些内置组件前，必须从@tarojs/components进行引入。

2.组件属性遵从大驼峰式命名规范。

React组件的生命周期方法在Taro中都支持使用。

触发时机：

1.componentWillMount()

onLoad之后，页面组件渲染到Taro的虚拟DOM之前触发。

2.componentDidMount()

页面组件渲染到Taro的虚拟DOM之后触发。

Taro Hooks

Taro的专有Hooks(例如：usePageScroll，useReachBottom)从@tarojs/taro中引入，框架自己的Hooks(例如useEffect，useState)从对应的框架引入。

 useRouter等同于Class Component的getCurrentInstance().router

 useReady等同于页面的onReady生命周期钩子。

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

 useDidShow页面显示/切入前台时触发。等同于componentDidShow页面生命周期钩子。

 ~

~

~

同时运行小程序端和H5端会有冲突。需要在config/index.js配置outputRoot:

outputRoot: `dist/${process.env.TARO_ENV}`

从1.3.5版本开始可以在dist目录下创建一个与编译的目标平台名同名的目录，并将结果放在这个目录下，例如编译到微信小程序，最终结果是在dist/weapp目录下，这样做的好处是，各个平台使用独立的目录互不影响，从而达到多端同步调试的目的。

import { Component } from 'react'
import { View, Text, Button, Radio, Checkbox, Swiper } from '@tarojs/components'
import './index.less'

export default class Index extends Component {

  componentWillMount() { }

  componentDidMount() { }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  render() {
    return (
      <View className='index'>
        <Text>Hello!xy</Text>
        <Button>按钮</Button>
        <Radio />
        <Checkbox></Checkbox>
        <Swiper></Swiper>
      </View>
    )
  }
}

内置对象