每天一点点之 taro 框架开发 - 事件处理与样式表

1.方法调用

state = { name:'张三' }
test(){
    this.state.name
}
<button onClick={ this.test.bind(this) } />

调用的时候需要在方法前加上on，如果方法中有需要调用当前页的this，需要绑定this。

还可以通过闭包函数（箭头函数）调用

state = {name:'张三'}
test(){
　　console.log('test)
}
<button onClick={ ()=>{console.log(this.state.name)} } />

需要注意：这种方法在h5可以使用，但不适用小程序

2.事件

taro事件采用驼峰命名

通过 this.test.bind(this) 添加的事件，在方法的参数中自带event参数，代码如下：

test(event){
    console.log(event)
}
render () {
    return (
        <View className='index'>
            <Button onClick={this.test.bind(this)}>测试事件</Button>
        </View>
    )
}

在被调用的方法中可以通过 event.stopPropagation(); 来阻止事件冒泡

 

在 bind() 中传递参数，不管参数位置如何，在方法中通过arguments接受到的参数event事件在最后

3.环境变量

process.env.TARO_ENV

环境期变量，也就是说只在开发期使用

应用如下：

const isH5 = process.env.TARO_ENV == "h5";
if(isH5){
    require('./h5.less');
}else{
    require('./weapp.less')
}

4.样式注意事项

• 错误操作

• • #id {}
  • div span {}
  • span[class='name']
  • .a > .b {} 不一定生效

• 正确操作

• • 类选择器 必须定义className
  • 自定义组件 只对当前组件生效

• flex布局（h5和小程序）