起步

官網(wǎng)地址
創(chuàng)建完項(xiàng)目后會(huì)默認(rèn)安裝依賴，會(huì)很慢。切換到項(xiàng)目目錄，自己安裝即可。
yarn dev:weapp執(zhí)行后，微信開發(fā)工具可以打開項(xiàng)目預(yù)覽，修改會(huì)被監(jiān)聽。

項(xiàng)目結(jié)構(gòu)

編碼規(guī)范

全局配置

號(hào)稱多端統(tǒng)一，微信小程序之外的端處理的并不完美。
生命周期的對(duì)應(yīng)，mina--taro。

頁面配置

路由

設(shè)計(jì)稿、尺寸單位

使用px和%，默認(rèn)以750px為基礎(chǔ)，進(jìn)行自動(dòng)轉(zhuǎn)換。1px = 1rpx
行內(nèi)樣式 Taro.pxTransform(10) // 小程序：rpx，H5：rem
px轉(zhuǎn)換，Px和PX會(huì)被忽略。

jsx

必須引入taro和組件

自定義組件

jsx表達(dá)式

不能用...擴(kuò)展操作符傳遞屬性

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，另一個(gè)組件類似

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
&&
三元運(yùn)算符

列表渲染

插槽 - children 與 組合

外部樣式 全局樣式

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

image.png

  static options = {
    addGlobalClass: true
  }