taro基础

起步

官网地址
创建完项目后会默认安装依赖，会很慢。切换到项目目录，自己安装即可。
yarn dev:weapp执行后，微信开发工具可以打开项目预览，修改会被监听。

项目结构

编码规范

全局配置

号称多端统一，微信小程序之外的端处理的并不完美。
生命周期的对应，mina--taro。

页面配置

路由

设计稿、尺寸单位

使用px和%，默认以750px为基础，进行自动转换。1px = 1rpx
行内样式 Taro.pxTransform(10) // 小程序：rpx，H5：rem
px转换，Px和PX会被忽略。

jsx

必须引入taro和组件

自定义组件

jsx表达式

不能用...扩展操作符传递属性

props属性

PropTypes 检查类型

state

this.setState是异步的，

事件

组织事件冒泡不能用catchevent

事件的传递
页面index.js

import Taro, { Component, Config } from '@tarojs/taro'
import { View } from '@tarojs/components'
import './index.less'
import BlueCom from '../../components/BlueCom'
import RedCom from '../../components/RedCom'

export default class Index11 extends Component {
  config: Config = {
    navigationBarTitleText: '事件的传递'
  }
  constructor(props) {
    super(props)
    this.state = {
      bgColor: "pink"
    }
  }

  turnColor (bgColor) {
    this.setState({
      bgColor: bgColor
    })
  }

  render () {
    return (
      <View>
        <View style={{backgroundColor: this.state.bgColor}}>
          <BlueCom onClick={this.turnColor.bind(this, 'blue')} />
          <RedCom onClick={this.turnColor.bind(this, 'red')}  />
        </View>
      </View>
    )
  }
}

组件 BlueCom.js，另一个组件类似

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


class BlueCom extends Component {
  constructor(props) {
    super(props)

  }
  render() {
    return (
      <View onClick={this.props.onClick}>
        turn blue
      </View>
    )
  }


}
export default BlueCom

条件渲染

if
&&
三元运算符

列表渲染

插槽 - children 与 组合

外部样式 全局样式

外部：static externalClasses = ['my-class']
全局：

image.png

  static options = {
    addGlobalClass: true
  }