1雹姊、路由功能
- Taro中路由功能是默認(rèn)自帶的雀彼，無需開發(fā)者額外配置
- 相當(dāng)于通過小程序的配置適配了小程序和H5的路由問題
- Taro 默認(rèn)根據(jù)配置路徑生成Route
- 只需在入口文件app.js中的config配置中指定好pages，然后就可以在代碼中通過Taro提供的API來跳轉(zhuǎn)到目的頁面
路由跳轉(zhuǎn)
Taro.navigateTo({url: '/pages/index/index'})
Taro.redirectTo({url: '/pages/index/index?name=張三'}) //路由傳參
//index.js
componentWillMount () {
let {name} = this.$router.params
console.log(name)
}
2、靜態(tài)資源引用
- 在Taro中可以像使用webpack那樣自由引用靜態(tài)資源，而且不用安裝任何loader（確實(shí)優(yōu)秀）
- 引用樣式文件
- 可以直接通過ES6的import語法來引入樣式文件
import './test.less' - 引用js可以使用es6的import方式
- 引用圖片、音頻扰肌、字體等文件
import headImg from '../../images/path/headImg.png'
3、條件渲染
- jsx語法中不支持if操作符熊杨，所以只能用三元表達(dá)式或則短路表達(dá)式
- 在Taro中render之外不允許書寫jsx（React中是可以的）曙旭，可在render中定義
//三元表達(dá)式
{true? <Button onClick={this.clickHandle.bind(this)}>跳轉(zhuǎn)</Button> : null }
//短路表達(dá)式
{true || <Button onClick={this.clickHandle.bind(this)}>跳轉(zhuǎn)</Button> }
<Image className='img' src={imgSrc}></Image>
4、組件傳值
//child.js
render () {
return (
<View className='index'>
我是彈框組件
{this.props.myImg}
{
this.props.children
}
</View>
)
}
//parent.js
render () {
return (
<View className='index'>
<Dialog>
<Text>我是Text傳入的</Text>
</Dialog>
<Dialog myImg={<Image src={require('../../img/juren.jpg')}></Image>}>
<Image src={require('../../img/juren.jpg')}></Image>
</Dialog>
<Dialog>
<Button>按鈕</Button>
</Dialog>
</View>
)
}
5猴凹、事件處理
- react中書寫事件的常用方式
<Button onClick={()=>{console.log(this.state.name)}>測試事件</Button>
<Button onClick={this.test.bind(this,'其它參數(shù)')}>測試事件</Button>
但在Taro中不支持箭頭函數(shù)的用法
阻止事件冒泡的方式
test (other,event) {
console.log(event,'點(diǎn)擊事件',this.state.name,arguments)
event.stopPagenation()
}
- 環(huán)境變量
let isH5 = process.env.TARO_ENV == "h5"
可通過判斷不同端引入不同less樣式文件
如：if(isH5){
require('./h5.less')
}else{
require('./weapp.less')
}
6夷狰、樣式css書寫限制
- 不能使用id選擇器#id
- 不能使用標(biāo)簽選擇器div span
- 不能使用屬性選擇器 span[class='name']
- 后代選擇器不一定生效 .a > .b
- 自定義組件——只對當(dāng)前組件有效
- 建議使用flex布局
