Taro（一）

開發期間常用命令

• npm run dev:h5 WEB
• npm run dev: weapp 微信小程序
• npm run dev: alipay 支付寶小程序
• npm run dev：swan 百度小程序
• npm run dev: rn React

項目目錄

• dist 編譯結果目錄
• config 配置目錄
  • dev.js 開發時配置
  • index.js 默認配置
  • prod.js 打包時配置
• src 源碼目錄
  • pages 頁面文件目錄
    • index index 頁面目錄
      • index.js index頁面邏輯
      • index.css index頁面樣式
  • app.css 項目總通用樣式
  • app.js 項目入口文件
• package.json

生命週期

export default class Index extends Component {

  /**
   * 指定config的類型聲明爲: Taro.Config
   *
   * 由於 typescript 對於 object 類型推導只能推出 Key 的基本類型
   * 對於像 navigationBarTextStyle: 'black' 這樣的推導出的類型是 string
   * 提示和聲明 navigationBarTextStyle: 'black' | 'white' 類型衝突, 需要顯示聲明類型
   */
  config: Config = {
    navigationBarTitleText: '首頁'
  }

  state={
    name:'Hello world',
    age:'15'
  }

  componentWillMount () { 
    console.log('頁面將要渲染')
  }

  componentDidMount () { 
    console.log('頁面已經渲染')
  }

  componentWillUnmount () { 
    console.log('頁面將要卸載')
  }

  componentDidShow () { 
    //React中無， taro中有
    console.log('頁面已經顯示')
  }

  componentDidHide () { 
     //React中無， taro中有
    console.log('頁面隱藏')
  }

  componentDidUpdate(){
    console.log('state數據更新後')
  }
  componentWillUpdate() {
    console.log('state數據將要更新')
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log('檢查是否渲染，一般用來多次的setState調用時， 提升性能')
  }
  componentWillReceiveProps() {
    //會在父組件傳遞給子組的屬性變化時
  }

  render () {
    return (
      <View className='index'>
      <Text>{this.state.name}</Text>
      <Text>{this.state.age}</Text>
      </View>
    )
  }
}

TaroProps

父子組件傳值

定義子組件

import Taro, {Component} from '@tarojs/taro'
import {View, Text} from '@tarojs/components'

class Child extends Component {

    componentWillReceiveProps(nextProps) {
        console.log('props屬性變化' + nextProps)
    }

    render() {
        let {name}=this.props
        return (
        <View>我是子節點{name}</View>
        )
    }
}
export default Child  導出組件

在 父組件中如何引用

import Child  from './child'
...
...
  render () {
    let {name} = this.state;
    return (
      <View className='index'>
      <Child name={name}></Child>
      </View>
    )
  }

路由

在 App.js 的 config下的pages 進行配置路由

跳轉函數：

// 跳轉到目的頁面，打開新頁面
Taro.navigateTo({
  url: '/pages/page/path/name'
})

// 跳轉到目的頁面，在當前頁面打開
Taro.redirectTo({
  url: '/pages/page/path/name'
})

路由傳參

我們可以通過在所有跳轉的 url 後面添加查詢字符串參數進行跳轉傳參，例如

// 傳入參數 id=2&type=test
Taro.navigateTo({
  url: '/pages/page/path/name?id=2&type=test'
})

這樣的話，在跳轉成功的目標頁的生命週期方法裏就能通過 this.$router.params 獲取到傳入的參數，例如上述跳轉，在目標頁的 componentWillMount 生命週期裏獲取入參

class C extends Taro.Component {
  componentWillMount () {
    console.log(this.$router.params) // 輸出 { id: 2, type: 'test' }
  }
}

參考官方文檔

靜態資源引用

• Taro 中 不用 安裝loader
• 引用樣式
• 直接使用Es6語法來引用 JS 文件

條件渲染

• 短路表達式

render () {
    let {list} = this.state;
    return (
      <View className='index'>
          
          <Image className='img' src={Img}/>
          {
            !true || <Button>test</Button> 
          }
      </View>
    )
  }

• 三元表達式

  render () {
    let {list} = this.state;
    return (
      <View className='index'>
          
          <Image className='img' src={Img}/>
          {
            true?<Button>test</Button>:null
          }
      
      </View>
    )
  }

列表渲染

render () {
    let {list} = this.state;
    return (
      <View className='index'>
          
          <Image className='img' src={Img}/>
          {
            list.map((item, index) => {
              return (<View key={item.id}><Text> {item.name} </Text></View>)
            })
          }
      </View>
    )
  }

容器組件封裝

1. Dialog.tsx

import Taro, {Component} from '@tarojs/taro'
import  {View, Text , Button} from '@tarojs/components' 

export default class Dialog extends Component {

    render(){
        return (
        <View className='index'>
            {this.props.children}
        </View>
        )
    }
}

2. TestDialog

在這裏插入代碼import Taro, {Component} from '@tarojs/taro'
import  {View, Text , Button} from '@tarojs/components' 
import Dialog from '../dialog/dialog'

export default class TestDialog extends Component {

    render(){
        return (
        <View className='index'>
            <Dialog>
                <Text>皮哥哥愛你哦</Text>
            </Dialog>
        </View>
        )
    }
}