Taro小程序多端框架探索(2)

1、路由功能

• Taro中路由功能是默认自带的，无需开发者额外配置
• 相当于通过小程序的配置适配了小程序和H5的路由问题
• Taro 默认根据配置路径生成Route
• 只需在入口文件app.js中的config配置中指定好pages，然后就可以在代码中通过Taro提供的API来跳转到目的页面

路由跳转
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、静态资源引用

• 在Taro中可以像使用webpack那样自由引用静态资源，而且不用安装任何loader（确实优秀）
• 引用样式文件
• 可以直接通过ES6的import语法来引入样式文件
  import './test.less'
• 引用js可以使用es6的import方式
• 引用图片、音频、字体等文件
  import headImg from '../../images/path/headImg.png'

3、条件渲染

• jsx语法中不支持if操作符，所以只能用三元表达式或则短路表达式
• 在Taro中render之外不允许书写jsx（React中是可以的），可在render中定义

//三元表达式
 {true? <Button onClick={this.clickHandle.bind(this)}>跳转</Button> : null }
//短路表达式
{true || <Button onClick={this.clickHandle.bind(this)}>跳转</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,'其它参数')}>测试事件</Button>
  但在Taro中不支持箭头函数的用法

阻止事件冒泡的方式
test (other,event) {
console.log(event,'点击事件',this.state.name,arguments)
event.stopPagenation()
}

• 环境变量

let isH5 = process.env.TARO_ENV == "h5"
可通过判断不同端引入不同less样式文件
如：if(isH5){
require('./h5.less')
}else{
require('./weapp.less')
}

6、样式css书写限制

• 不能使用id选择器#id
• 不能使用标签选择器div span
• 不能使用属性选择器 span[class='name']
• 后代选择器不一定生效 .a > .b
• 自定义组件——只对当前组件有效
• 建议使用flex布局