起步
官網(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捧杉。
頁(yè)面配置
路由
設(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
事件的傳遞
頁(yè)面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
}
