Taro小程序多端框架探索(1)

1、安装脚手架

cnpm install -g @tarojs/cli

2、初始化项目

taro init myProject
初学者建议：ts：no，css预处理器：less，选择模版：默认模版

3、安装依赖

cnpm install
cnpm install typescript --save(自定义安装ts时用到)

4、各端启动项目

WEB端——npm run dev:h5
微信小程序——npm run dev:weapp
支付宝小程序——npm run dev:alipay
百度小程序——npm run dev:swan
ReactNative——npm run dev:rn

5、生命周期&State

componentWillMount () {
    console.log('第一次渲染之前执行，只执行一次')
  }

  componentDidMount () {
    console.log('第一次渲染之后执行，只执行一次')
    this.setState({
      name: 'hello china!',
      text: '李四',
      obj: {key: [{name: "张三"}]}
    },()=>{
      console.log(this.state.name)
    })
    console.log(this.state.name)
  }

  componentWillUpdate(){
    console.log('state数据将要更新')
  }

  componentDidUpdate(){
    console.log('state数据更新之后')
  }

  componentWillReceiveProps(nextProps){
    //会在父组件传递给子组件的参数发生改变时触发
  }

  shouldComponentUpdate(nextProps,nextState){
    //检查此次setState是否要进行render调用
    //一般用来多次的setState调用时 提升render的性能
    if(nextState.text == '李四'){
      return true;
    } else{
      return false;
    }
  }

  componentWillUnmount () {
    console.log('卸载时执行，只执行一次')
  }

  componentDidShow () {
    //reactjs 是不存在的，taro中存在
    //页面显示时触发
  }

  componentDidHide () {
    //reactjs 是不存在的，taro中存在
    //页面隐藏时触发
  }

状态更新是异步的，可通过在setState中加回调函数获取更新后的值，
更新数据不像vue中直接this.state.name，而是通过

this.setState({
name: 'hello world!',
text: 'wayne'
},()=>{
console.log(this.state.name)
})

6、父子组件传递函数事件时区别

h5中组件事件调用没有限制，但在小程序中必须以on开头，为了兼容多端支持，需要按照taro规范书写

//parent.js
test() {
    console.log('test父组件传递参数给子组件')
  }

  render () {
    let {name,obj} = this.state
    return (
      <View className='index'>
        <Text>{this.state.name}</Text>
        <Text>{this.state.text}</Text>
        <Child name={name} obj={obj} ontest={this.test}></Child>
      </View>
    )
  }
//child.js
cl () {
    this.props.ontest();
  }
  render(){
    let {name,obj} = this.props
    return (
      <View onClick={this.cl.bind(this)}>
        <Text>我是child子节点{name + '---' + obj.key[0].name}</Text>
      </View>
    )
  }
}