掌握Taro多端框架快速小程序H5开发的全过程Taro是一套遵循React语法规范的多端开发解决方案。使用Taro只

1、Taro简介 Taro是一套遵循React语法规范的多端开发解决方案。使用Taro只需要书写一套代码，再通过Taro的编译工具，将源代码分别编译出，可以在不同端（微信小程序，h5，Rn等）运行的代码。以react的语法的地址 taro-docs.jd.com/taro/docs/r…

图片.png

注意点：安装中遇到的问题使用npm安装出错清除缓存：npm cache clean --force 或 npm cache verify 使用淘宝镜像：cnpm install -g @tarojs/cli

如果安装过程出现sass相关的安装错误

执行命令：npm install -g mirror-config-china

taro开发中需要用到的生命周期

import { View, Text } from '@tarojs/components'
import './index.scss'

export default class Index extends Component {

  state = {
    name: '111111111',
    text: '张三'
  }
  componentWillMount () {
    // 第一次在渲染之前执行 只执行一次
  }

  componentDidMount () {
    // 第一次渲染之后执行 只执行一次
    this.state.name = '22' // 错误的
    this.setState({ name: '3333333' }) // 正确的
    // 状态更新时异步的
    this.setState({ name: '44444' }, () => {
      //通过回调函数可以立刻拿到刚才setState中的name的值
      alert(this.state.name)
    }) // 正确的
  }

  componentWillUnmount () {
    // 卸载的时候执行 页面跳转的时候执行 只执行一次
  }
  componentWillUpdate () {
    // state 数据将要更新
  }
  componentDidUpdate () {
    // state 数据更新过后
  }
  componentDidShow () {
    // reactjs 中是不存在的 小程序中需要 h5中也就是写了
    // 页面显示的时候触发
  }
  shouldComponentUpdate (nextProps, nextState) {
    // 检查此次setState 是否需要进行render调用
    // 判断state中数据的状态 
    // 一般用来多次的setState调用时 提示render的性能
    if (nextState.name == '') {
      return false
    } else {
      return true; // 不更新
    }
  }
  componentWillReceiveProps (nextProps) {
    // 会在父组件传递给子组件的参数发生改变的时候触发
  }
  componentDidHide () {
    // reactjs 中是不存在的 小程序中需要 h5中也就是写了
    // 页面隐藏的时候触发
  }
  getName () {
    return '2222222222'
  }
  render () {
    return (
      <View className='index'>
        <Text>{this.state.name}</Text>
        <Text>{this.state.text}</Text>
      </View>
    )
  }
}

生命周期&state