Taro框架

2018-12-12 本文已影响17人黑色的五叶草

Taro与React的本质区别：

React中：一切皆组件
Taro中：小程序端区分页面与组件。配上页面路由的是页面，页面中被引用的自定义组件是组件

一、安装及使用：

参照官方文档 https://nervjs.github.io/taro/docs/GETTING-STARTED.html
视频学习 https://www.imooc.com/learn/1084

安装:

npm install -g @tarojs/cli

使用:

初始化系项目 taro init myApp

项目构建配置：

Taro可以在多个环境下dev项目
项目结构：

package.json 是依赖包
package.config.json 是给微信小程序单独提供的
config 是项目启动编译的配置文件的目录
dist 是编译好的目录
src 是原代码
src目录下：
1). index.html是为h5准备的
2). app.js 即是小程序的入口，又是为h5做路由编译的路由文件（react本身是不需要配置路由的，但是需要在app.js里面配置页面地址）
3). 在pages/index/index.js下编写纯h5标签也可以生效。但是在小程序中不适用。如果只做h5端可以把taro当成react用。如果适配多端，必须按照taro规范写代码

更改视图：Taro的数据更新，一定是异步的
写法1：数据直接写成一个对象
写法2：数据写在componentDidMount中用this.setState({})设置

import Taro, { Component } from '@tarojs/taro'
import { View, Text, Button } from '@tarojs/components'
import './index.less'

export default class Index extends Component {

  config = {
    navigationBarTitleText: '首页'
  }
  // 更改视图：数据写法1
  state = {
    name: 'Lida'
  }

  componentWillMount () { }

  componentDidMount () { 
    // 更改视图：数据写法2
    // this.setState({name: 'Lida'})
  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  click () {
    this.setState({name: 'Nazi'});
  }
 
  render () {
    return (
      <View className='index'>
        <Text>Hello world!</Text>
        <Text class="name">{this.state.name}</Text>
        <Button onClick={this.click}>Change_name</Button>
      </View>
    )
  }
}

同步更新数据写法：
更新数据之后，执行回调

props 由父组件传给子组件的属性：
props是只读属性，想要修改必须在父组件通过事件修改
1). 首先定义子组件

import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'

// 定义class，继承Component
class Child extends Component {
    // render函数是必须实现的
    render () {
        return (
            <View>
                <Text>{this.props.name}</Text>
            </View>
        )
    }
}

// 给子组件一个默认值
Child.defaultProps = {
    name: ''
}
export default Child;

2). 在父组件中引入

import Child from './child'

<Child name="Child-Grey"></Child>

给子组件<Child></Child>传一个name属性
3). 修改props

子组件：

import Taro, { Component } from '@tarojs/taro'
import { View, Text, Button } from '@tarojs/components'
// import './index.less'

// 定义class，继承Component
class Child extends Component {
    clickHandler () {
        this.props.onchange();
    }

    // render函数是必须实现的
    render () {
        return (
            <View>
                <Text>{this.props.name}</Text>
                <Button onClick={this.clickHandler}>调用上层事件</Button>
            </View>
        )
    }
}

// 给子组件一个默认值
Child.defaultProps = {
    name: ''
}
export default Child;

父组件：

  change () {
    this.setState({name: '改变name值，起个中文名'})
  }

<Child name={this.state.name} onchange={this.change.bind(this)}></Child>

Taro提供的UI框架——Taro UI
cnpm install taro-ui@1.5.0 -D
最新版本有bug，组件不能正常使用，文档未说明。
npm安装这个框架会停滞
官方文档 https://taro-ui.aotu.io/#/docs/introduction

注意事项：

PX要大写，如果不大写会被转换成rem

二、其他（个人学习用）

值得记忆：

解构赋值写法let {activity: [firstItem]} = this.state;
Class类的概念Activity

class Activity extends Component {
    constructor () {
        // super() 作为函数调用。继承父函数以后必须要执行super()，super的this指向子函数Activity
        super(...arguments);
        this.state = {
            activity: [
                {
                    type: "cut",
                    info: [
                        {total: 48, cut: 10},
                        {total: 58, cut: 20},
                        {total: 100, cut: 30}
                    ]
                }
            ]
        }
    }
    render () {
        // 相当于取this.state中的activity中的数组中的第一个元素，命名为firstItem
        let {activity: [firstItem]} = this.state;

        return (
            <View className="activity">
                <Text className="type">{this.getTextByType(firstItem.type)}</Text>
                <Text>{this.getLine(firstItem.info)}</Text>
                <Text className="length">{this.state.activity.length}个活动</Text>
            </View>
        )
    }
}

react中写法：

// cata.js
import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import './cata.less'

class Cata extends Component {
    constructor () {
        super(...arguments);
        this.state = {
            selectCata: null,  // 选中的分类
            cata: [
                {id: 1, name: '专场'},
                {id: 2, name: '热销'},
                {id: 3, name: '折扣'},
                {id: 4, name: '汉堡'},
                {id: 5, name: '炸鸡'},
                {id: 6, name: '饮品'}
            ]
        }
    }

    handlerClick (item) {
        if (this.state.selectCata && this.state.selectCata.id != item.id) {
            this.setState({ selectCata: item });
            console.log(this.state);
        } else if (!this.state.selectCata) {
            this.setState({ selectCata: item });
        }
    }

    render () {
        let {cata, selectCata} = this.state;

        return (
            <View className="cata">
                {/* 
                    1. .map()循环<Text></Text>
                    2. 把每一项的id传给key -> key={item.id}
                    3. 绑定class -> 如果selectCata存在 同时 selectCata.id == item.id，就添加class="select"
                    4. 对每一项添加点击事件 -> 将每一项的item传给回调函数
                    5. 回调函数内部逻辑：如果selectCata存在 同时 selectCata.id != item.id，就将当前项的item 传给 selectCata； 如果selectCata不存在就直接赋值。
                */}
                {
                    cata.map((item, index) => {
                        return <Text onclick={this.handlerClick.bind(this, item)} className={"cata-name " + ((selectCata && selectCata.id == item.id) ? 'select' : null)} key={item.id}>{item.name}</Text>
                    })
                }
            </View>
        )
    }
}

export default Cata;

兄弟组件间数据传递解决方案：
1). 通过上级（父）的View组件

2). 通过事件监听，在组件1定义事件，在组件2监听事件执行事件函数
3). Redux

Taro框架

Taro与React的本质区别：

一、安装及使用：

安装:

使用:

二、其他（个人学习用）

猜你喜欢

热点阅读