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>
        )
    }
}