一、起步

1.生命周期函数
2.路由

全局安装 @tarojs/cli

$ npm install -g @tarojs/cli  or
$ yarn global add @tarojs/cli

初始化一个名为myApp的项目
```
$ taro init myApp
```
运行
```
$ npm run dev:weapp
taro将会进入微信小程序编译预览模式。我们打开微信开发者工具，将项目导入，会在预览窗口中看到hello world。
```
1.生命周期函数

2.路由
在 Taro 中，路由功能是默认自带的，不需要开发者进行额外的路由配置。 ```javascript // 跳转到目的页面，打开新页面 Taro.navigateTo({ url: ‘/pages/detail/detail’ })

// 跳转到目的页面，在当前页面打开 Taro.redirectTo({ url: ‘/pages/detail/detail’ })

//跳转传参 skipToDetail = ({ title, description }) => { Taro.navigateTo({ url: /pages/me/me?title=${title}&description=${description} }) }

//详情页面接收参数 getCurrentInstance import Taro,{getCurrentInstance} from ‘@tarojs/taro’ export default class Me extends Component { $instance = getCurrentInstance() render() { console.log(this.$instance.router.params) return ( 我的 ) } }

<a name="l8eam"></a>
#### 3.组件
[![taro跳转页面.mp4](https://gw.alipayobjects.com/mdn/prod_resou/afts/img/A*NNs6TKOR3isAAAAAAAAAAABkARQnAQ)](https://www.yuque.com/wangyuhuan/ygpeeb/qa6yqr?_lake_card=%7B%22status%22%3A%22done%22%2C%22source%22%3A%22transfer%22%2C%22videoId%22%3A%22inputs%2Fprod%2Fyuque%2F2021%2F402732%2Fmp4%2F1614240641115-ff9f599d-a809-4fdc-a199-d528cfc58847.mp4%22%2C%22margin%22%3Atrue%2C%22name%22%3A%22taro%E8%B7%B3%E8%BD%AC%E9%A1%B5%E9%9D%A2.mp4%22%2C%22id%22%3A%222m4Nd%22%2C%22card%22%3A%22video%22%7D#2m4Nd)
- 主页  ( Swiper,列表 )
```javascript
import React, { Component } from 'react'
import Taro from '@tarojs/taro'
import { View, Text, Swiper, SwiperItem, Image, } from '@tarojs/components'
import './index.less'
import img0 from '../../imgs/01.png'
import img1 from '../../imgs/02.png'
export default class Index extends Component {
  componentWillMount() { }
  componentDidMount() {
    console.log('DidMount')
  }
  componentWillUnmount() { }
  componentDidShow() {
    console.log('show')
  }
  componentDidHide() {
    console.log('hide')
  }
  handleTo = () => {
    Taro.navigateTo({
      url: '/pages/me/me'
    })
    Taro.redirectTo({
      url: '/pages/me/me'
    })
  }
  skipToDetail = ({ title, description }) => {
    Taro.navigateTo({
      url: `/pages/me/me?title=${title}&description=${description}`
    })
  }
  render() {
    const listSet = [
      { title: '标题一', description: '描述一' },
      { title: '标题二', description: '描述二' },
      { title: '标题三', description: '描述三' },
    ]
    return (
      <View className='index'>
        <Swiper indicatorDots autoplay>
          {[img0, img1].map(img => (<SwiperItem key={img}><Image src={img} /></SwiperItem>))}
        </Swiper>
        <View>
          {listSet.map((item,index) => (<View className='list-item' key={index} onClick={this.skipToDetail.bind(this,item)}>
            <View><Text>{item.title}</Text></View>
            <View><Text>{item.description}</Text></View>
          </View>))}
        </View>
      </View>
    )
  }
}

详情页 ```javascript //app.config.js export default { pages: [ ‘pages/index/index’, ‘pages/me/me’ ], … }

```javascript
import React, { Component } from 'react'
import Taro,{getCurrentInstance} from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './me.less'
export default class Me extends Component {
  $instance = getCurrentInstance()
  componentWillMount() { }
  componentDidMount() {
  }
  componentWillUnmount() { }
  componentDidShow() { }
  componentDidHide() { }
  render() {
    console.log(this.$instance.router.params)
    return (
      <View className='me'>
        <Text>我的</Text>
      </View>
    )
  }
}

1.生命周期函数

2.路由