5分钟快速上手多端开发框架Taro

第一步：安装node.js（链接https://nodejs.org/en/）

安装完成后在命令行输入node -v，显示版本号即安装成功，如下图

第二步：安装 @tarojs/cli

在命令行输入npm install -g @tarojs/cli或yarn global add @tarojs/cli
在这里我用的是cnpm install -g @tarojs/cli，感谢阿里提供的国内镜像
安装完成后入下图所示

输入taro -V,，会显示当前安装的taro版本，如下图

第三步：使用命令创建模板项目

打开目标文件夹后输入命令taro init myApp（myApp为项目名称，由用户指定）
然后会提示输入项目介绍以及选择项目模板，如下图

创建完模板后会自动执行npm install安装项目所需的依赖包，如下图

等待依赖完成后就可以开始书写你的代码啦~~~

第四步：项目构建

项目初始化完成后就可以在page目录下编写你自己的代码了，下面以一个todo list为例

index.js

{

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

export default class Index extends Component {
  config = {
    navigationBarTitleText: '首页'
  }

  constructor() {
    super()
    this.state = {
      list: [
        'get up',
        'write',
        'sleep',
      ],
      inputVal: ''
    }
  }

  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmout () { }

  componentDidShow () { }

  componentDidHide () { }

  addItem() {
    let { list, inputVal } = this.state
    if(inputVal == '') return
    else{
      list.push(inputVal)
    }
    this.setState({
      list,
      inputVal: ''
    })
  }

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

  inputHandler(e) {
    this.setState({
      inputVal: e.target.value
    })
  }

  render () {
    let { list, inputVal } = this.state

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

}

如果要构建成h5代码，只需要输入taro build –type h5 –watch即可将代码编译成h5版本，即可在http://localhost:8080/访问