在微信小程序中，每个页面都是由.js、.wxss、.wxmk和.json四个部分构成，代码结构比较复杂。另外，由于对ES6语法和sass等css预处理支持的不友好，导致开发效率很低，所以早早就有用vue.js来开发小程序的框架，比如webpy和mpvue，但是基本都是单纯的开发微信小程序。
可是，随着微信小程序、网页H5、头条小程序、百度小程序、支付宝小程序、快运用、原生APP的增多，每个都独立开发的话，每个前端估计都要吐血了，所以，就出现了跨端开发的框架。现在基本对多端支持足够好的，就是taro和uni-app了，分别使用react和vue的语法来开发小程序生态。
taro环境配置
官网（https://taro.aotu.io/）上面提到，需要node版本大于8.0.0就可以了，然后直接安装Taro开发工具就可以了，但在这里也建议安装一下剩下的两个命令：
npm install -g @tarojs/cli
npm install -g babel-cli
npm install -g babel-preset-es2015
创建项目
taro创建项目的命令也十分简单：taro init name
项目创建完成后，会生成如下文件目录
核心代码都在src里面，所有页面都以文件夹的形式存放在page文件夹中，如上所示，每个页面由.js和.css两个文件组成。
由于是跨端项目，需要通过执行不同的命令来在不同的端查看效果：
- 执行npm run dev:h5 会打开浏览器，预览H5的效果
- 执行npm run dev:weapp 会生成一个dist文件夹，使用微信开发者工具打开这个dist文件夹，就能查看微信小程序的效果
- 执行npm run dev:swan 百度小程序
- 执行npm run dev:tt 头条小程序
- 执行npm run dev:alipay 支付宝小程序
- 执行npm run dev:rn React-nativeAPP
H5测试
简单使用
tabBar
taro项目的总入口和tabBar配置都在app.js里面，默认生成的项目里面是只有一个页面的，所以也没有tabBar
但是我们可以像使用微信小程序一样的在taro里面添加tabBar：
首先是添加页面：
然后在每个页面中都添加最基本的结构：
然后配置tabBar：
因为我没有准备图标，所以这里没有放图标，但在正常使用时，是可以通过iconPath和selectedIconPath来添加对应图标的
使用state
除了一些配置上面的不同除外，taro里面的语法和react大多都是一样的。
import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.scss'
export default class Index extends Component {
config = {
navigationBarTitleText: 'index'
}
constructor(props){
super(props)
this.state={
todos:['吃饭','睡觉','打豆豆']
}
}
render () {
return (
<View className='index'>
<Text>TODO List</Text>
{
this.state.todos.map((item,i)=>{
return <View>
<Text>{i+1}:{item}</Text>
</View>
})
}
</View>
)
}
}
百度小程序
继续上面的代码，执行命令npm run dev:swan，等待一段时间后，会生成一个文件夹，打开百度开发者工具，选择打开，然后在弹窗里面选择项目目录下的dist文件夹（是根目录下的dist文件夹，而不是整个项目文件夹）
然后就能看的效果了
微信小程序
同上面一样，先执行命令npm run dev:weapp，生成dist文件夹以后，打开微信开发者工具，选择新建--》导入项目（导入根目录下的dist文件夹）：
然后就可以看到和上面相同的效果了！
使用UI组件
使用组件前，需要先安装
npm install taro-ui --save
npm install nervjs --save
在没有安装UI组件的时候，项目的总入口样式是.css形式的，在进行了上面的安装以后，这个总的样式文件就变成了.scss格式了。
这个组件的默认主题颜色是#6190E8，在官网上面提供了自定义主题的方法：
首先选择一个颜色，然后点击下载主题，下载完成后解压，再复制custom-theme.scss里面的内容到app.scss文件里面，然后添加引入组件样式的语句
另外，由于引用node_modules的模块，默认不会编译，所以需要额外给H5配置esnextModules，在taro项目的config/index.js中新增如下配置：
修改上面的TODO List
