创建Taro项目

1.安装Taro

1.使用 npm 或者 yarn 全局安装 @tarojs/cli
$ npm install -g @tarojs/cli
$ yarn global add @tarojs/cli

2.项目初始化:

taro init myApp

编译运行
使用 Taro 的 build 命令可以把 Taro 代码编译成不同端的代码，然后在对应的开发工具中查看效果。
Taro 编译分为 dev 和 build 模式：
dev 模式（增加 --watch 参数） 将会监听文件修改。
build 模式（去掉 --watch 参数） 将不会监听文件修改，并会对代码进行压缩打包。 dev 模式生成的文件较大，设置环境变量 NODE_ENV 为 production 可以开启压缩，方便预览，但编译速度会下降。

3.内置环境变量

Taro 在编译时提供了一些内置的环境变量来帮助用户做一些特殊处理。
process.env.TARO_ENV用于判断当前的编译平台类型。
取值：weapp / swan / alipay / tt / qq / jd / h5 / rn
可以通过这个变量来区分不同环境，从而使用不同的逻辑。
在编译阶段，会移除不属于当前编译类型的代码，只保留当前编译类型下的代码，例如： 1. 在微信小程序和 H5 端分别引用不同资源：
源码

if (process.env.TARO_ENV === 'weapp') {
  require('path/to/weapp/name')
} else if (process.env.TARO_ENV === 'h5') {
  require('path/to/h5/name')
}

编译后（微信小程序）

if (true) {
  require('path/to/weapp/name')
}

编译后（H5）

if (true) {
  require('path/to/h5/name')
}

2. 决定不同端要加载的组件
源码（React JSX）

<View>
  {process.env.TARO_ENV === 'weapp' && <ScrollViewWeapp />}
  {process.env.TARO_ENV === 'h5' && <ScrollViewH5 />}
</View>`

编译后（微信小程序）

<View>
  {true && <ScrollViewWeapp />}
</View>

编译后（H5）

<View>
  {true && <ScrollViewH5 />}
</View>

组件文件中跨平台支持指定平台保留样式：

/*  #ifdef  %PLATFORM%  */
模板代码
/*  #endif  */

指定平台剔除样式：

/*  #ifndef  %PLATFORM%  */
模板代码
/*  #endif  */