安装完成后在命令行输入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 (

添加

Todo list

{

list && list.map((item, index) => {

return

{index + 1}.{item}

删除

})

}

)

}

}

}

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

如果要构建成小程序代码，只需要输入taro build –type weapp –watch即可将代码编译成小程序版本，在微信开发者工具中选择项目中的dist文件夹即可以预览