taro小程序与react结合

1. yarn global add @tarojs/cli 安装taro包
2. taro init todos 使用taro创建一个项目
3. npm run dev：weapp 开启项目
   使用微信开发者工具打开项目的dist目录，编译成小程序的目录
   src目录是使用taro+react框架写的js页面
   index.js代码如下

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

export default class Index extends Component {
  config = {
    navigationBarTitleText: '首页'
  }
  constructor(props) {
    super(props);
    this.state = {
      list: [
        '起床',
        '吃饭',
        '打农药'
      ],
      inputValue: ''
    }
  }
  componentWillMount() {
  }
  componentDidMount() {
  }
  componentDidUpdate() {
  }
  componentWillUnMount() {
  }
  addItem () {
    let { list } = this.state;
    const inputValue = this.inputValue;
    if (inputValue == '') return;
    list.push(inputValue);

    this.setState({
      list,
      inputValue: ''
    })

  }
  delItem(index){
      let { list } = this.state;
      list.splice(index,1);
      console.log(index);
      this.setState({
        list,
      })
      


  }
  inputHandler(e) {
    this.inputValue = e.target.value;
  }
  render () {
    const { list , inputValue } = this.state
    return (
      <View className="index">
        <View className="list_wrap">
          <Text>Todo List</Text>

          <Input  className="input" type="text" value={inputValue} onInput={this.inputHandler.bind(this)}/>
          <Text className="add" onClick={this.addItem.bind(this)}>添加</Text>
         
          {
            list.map((item, index) => {
              return <View>
                <Text>{index + 1}.{item}</Text>
                <Text className="del" onClick={this.delItem.bind(this,index)}>删除</Text>
              </View>
            })
          }
        </View>
      </View>
    )
  }
}

Index组件内方法的this绑定使用bind（）或bind（params） 这是这个框架的特别之处
gitup已经有很清楚的说明：https://github.com/NervJS/taro
使用taro完成小程序开发 https://segmentfault.com/a/1190000016794779
接口api封装参考文章地址https://segmentfault.com/a/11...