Taro 环境搭建 + 项目创建

是一套遵循 React 语法规范的 多端开发 解决方案
使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动/QQ/京东小程序、快应用、H5、React-Native 等）运行的代码。

CLI工具安装

# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli
# OR 安装了 cnpm，使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli

项目初始化

taro init taro

👽 Taro v2.0.7

当前您正在使用 Taro 2.0 版本，请先执行 taro doctor 确保编译配置正确
如出现令你束手无策的问题，请使用 taro update 命令更新到你指定的稳定版本
Taro 即将创建一个新项目!
Need help? Go and open issue: https://github.com/NervJS/taro/issues/new

✔ 拉取远程模板仓库成功！
? 请输入项目介绍！ taro试用
? 是否需要使用 TypeScript ？ No
? 请选择 CSS 预处理器（Sass/Less/Stylus） Less
? 请选择模板 redux
.......................................................................
创建项目 taro 成功！
请进入项目目录 taro 开始工作吧！😝

cd taro
//以H5 启动项目
npm run dev:h5
//打包小程序
npm run dev:weapp

目录结构

├── dist                   编译结果目录
├── config                 配置目录
|   ├── dev.js             开发时配置
|   ├── index.js           默认配置
|   └── prod.js            打包时配置
├── src                    源码目录
|   ├── pages              页面文件目录
|   |   ├── index          index 页面目录
|   |   |   ├── index.js   index 页面逻辑
|   |   |   └── index.css  index 页面样式
|   ├── app.css            项目总通用样式
|   └── app.js             项目入口文件
└── package.json           注：微信小程序会多一个配置文件，project.config.json

文件示例

import Taro, { Component } from '@tarojs/taro'
import Index from './pages/index'

import './app.scss'

class App extends Component {
  // 项目配置
  config = {
    pages: [
      'pages/index/index'
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    }
  }
  /**页面生命周期与小程序页面生命周期对应关系: componentWillMount ==> onLoad */
  componentWillMount () {}

  /**componentDidMount  ==> onReady */
  componentDidMount () {}

  /**componentWillUnmount ==> onUnload */
  componentWillUnmount () { }

  /**componentDidShow ==> onShow */
  componentDidShow () {}

  /**componentDidHide ==> onHide */
  componentDidHide () {}

  render () {
    return (
      <Index />
    )
  }
}