02-Taro页面编写和传值

02-Taro页面编写和传值

上回说到Taro打造hello-world应用。废话不多说，直接上肉菜

State局部状态

export default class Index extends Component {
  config = {
    navigationBarTitleText: '首页'
  }
  state = {
    name: "hello 前端骚年"
  }
  render () {
    const { name } = this.state
    return (
      <View className='index'>
        <Text>{name}</Text>
      </View>
    )
  }
}

组件编写和传值

mkdir -p src/components/child
cd src/components/child
touch index.jsx

编写组件，代码如下

import Taro, { Component } from '@tarojs/taro'
import PropTypes from 'prop-types'
import { View, Text } from '@tarojs/components'
export default class Child extends Component {
  propTypes = {
    childName: PropTypes.string
  }
  defaultProps = {
    childName: ''
  }
  render () {
    const { childName } = this.props
    return (
      <View>
        <Text>我是肉菜中的{childName}</Text>
      </View>
    )
  }
}

在主页面index中引入

import Child from "../../components/child";

render方法中即可运用

render () {
  const { name } = this.state
  return (
    <View className='index'>
      <Text>{name}</Text>
      <Child childName="蒜末child"/>
    </View>
  )
}

页面跳转和传参

cd taroDemo
taro create --name next  // 创建next页面

在 /src/app.jsx 中配置路由

pages: [
  'pages/index/index',
  'pages/next/next'
]

在主页面Button上绑定跳转事件

goNext() {
  Taro.navigateTo({url:'/pages/next/next?nextTheme=大保健'})
}

在next页面接收参数

componentWillMount () {
  console.log(this.$router.params) // 输出 {nextTheme: "大保健"}
  const { nextTheme } = this.$router.params
  this.setState({
    nextTheme
  })
}

其他页面跳转方式redirectTo、switchTab、navigateBack等和微信小程序很相似

请求远程数据

const params = {
  url,
  data,
  header,
  method
}
const res = await Taro.request(params)

集成dva开发体验更好，参考基于Taro + Dva构建的时装衣橱(电商实战项目)

注意点

1. 适配问题

   Taro以 750px 作为换算尺寸标准，尺寸单位使用px,默认会进行转换rpx/rem。如果你希望部分 px 单位不被转换成 rpx 或者 rem ,将px写成Px或PX

2. 尽量避免在 componentDidMount 中调用 this.setState，可在 WillMount 中处理

   你问为啥？？因为在 componentDidMount 中调用 this.setState 会导致触发更新

3. 不要在调用 this.setState 时使用 this.state，会导致一些错误

4. 多端组件

   假如有一个 Child 组件存在微信小程序、百度小程序和 H5 三个不同版本

   可在components目录下分别创建child.js child.weapp.js child.h5.js

   // 引用不变，编译会自动识别
   import Child from '../../components/child'
   

taroDemo 项目地址

关注公众号： 页面仔小杨 【实战干货、原创分享】