背景

Taro是继Wepy、Mpvue之后，为解决终端碎片化问题的又一框架

Taro安装

Taro 是一个基于 NodeJS 多端统一开发框架，在安装使用 Taro 之前需要确保已安装好 Node 环境。

Node安装

• 通过官网：https://nodejs.org/zh-cn/
• 通过nvm（Node 版本管理工具）: nvm(https://github.com/creationix/nvm)
  安装nvm可以参考我之前的文章：https://www.jianshu.com/p/d7e5f8729449

NPM 与 Yarn

• NPM(https://www.npmjs.com/get-npm)
• Yarn(https://yarnpkg.com)
  Yarn 是由 Facebook、Google、Exponent 和 Tilde 联合推出了一个新 Node 包管理工具，相比于 NPM，它具有速度更快、安装版本统一、更加清爽简洁等特点。

查看版本号

$ npm -v 
$ yarn -v

taro-cli

• 全局安装 Taro 开发工具 @tarojs/cli
• NPM

$ npm install -g @tarojs/cli

• Yarn

$ yarn global add @tarojs/cli

• 查看Taro 版本

$ taro -v 

使用

创建项目

$ taro init myApp

• NPM 5.2+ 也可在不全局安装的情况下使用 npx 创建模板项目：

$ npx @tarojs/cli init myApp

image.png

• 完成之后

  
  image.png

• node版本我使用的是 v11.10.1

• 需要输入的几项配置：

  
  image.png

• 目前 Taro 已经支持微信/百度/支付宝小程序、H5 以及 ReactNative 等端的代码转换，针对不同端的启动以及预览、打包方式并不一致。

微信小程序

选择微信小程序模式，需要自行下载并打开微信开发者工具，然后选择项目根目录进行预览。
微信小程序编译预览及打包：

# npm script
$ npm run dev:weapp
$ npm run build:weapp
# 仅限全局安装
$ taro build --type weapp --watch
$ taro build --type weapp
# npx 用户也可以使用
$ npx taro build --type weapp --watch
$ npx taro build --type weapp

百度小程序

选择百度小程序模式，需要自行下载并打开百度开发者工具，然后在项目编译完后选择项目根目录下 dist 目录进行预览。
百度小程序编译预览及打包：

# npm script
$ npm run dev:swan
$ npm run build:swan
# 仅限全局安装
$ taro build --type swan --watch
$ taro build --type swan
# npx 用户也可以使用
$ npx taro build --type swan --watch
$ npx taro build --type swan

支付宝小程序

选择支付宝小程序模式，需要自行下载并打开支付宝小程序开发者工具，然后在项目编译完后选择项目根目录下 dist 目录进行预览。
支付宝小程序编译预览及打包：

# npm script
$ npm run dev:alipay
$ npm run build:alipay
# 仅限全局安装
$ taro build --type alipay --watch
$ taro build --type alipay
# npx 用户也可以使用
$ npx taro build --type alipay --watch
$ npx taro build --type alipay

H5

H5 模式，无需特定的开发者工具，在执行完下述命令之后即可通过浏览器进行预览。

H5 编译预览及打包：

# npm script
$ npm run dev:h5
# 仅限全局安装
$ taro build --type h5 --watch
# npx 用户也可以使用
$ npx taro build --type h5 --watch

React Native

React Native 端运行需执行如下命令，React Native 端相关的运行说明请参见 React Native 教程。

# npm script
$ npm run dev:rn
# 仅限全局安装
$ taro build --type rn --watch
# npx 用户也可以使用
$ npx taro build --type rn --watch

更新 Taro

# taro
$ taro update self
# npm 
npm i -g @tarojs/cli@latest 
# yarn 
yarn global add @tarojs/cli@latest

更新项目中 Taro 相关的依赖，这个需要在你的项目下执行。

$ taro update project

React 核心语法

• 官网传送门： React(https://reactjs.org/)

JSX 语法

• JSX 允许在 JS 中直接使用 XML 标记的方式来声明界面

// 只看 render 函数，绝大多数情况下 render 函数里都会有 XML 标记
render () {
  return (
    <View className='index'>
      <View className='title'>{this.state.title}</View>
      <View className='content'>
        {this.state.list.map(item => {
          return (
            <View className='item'>{item}</View>
          )
        })}
        <Button className='add' onClick={this.add}>添加</Button>
      </View>
    </View>
  )
}

• class 变成 className 【class是JavaScript保留关键字】
• 上述代码通过 babel 转换为 JS 代码
• 不能定义变量，使用 if/else 等，你可以用提前定义变量；用三元表达式来达到同样的效果。
• 列表渲染，一般是用数组的 map 函数
• 事件绑定上，使用 on + 事件名称

React 组件 （component）

class Demo extends Component {
  // ...
  render () {
    return <View className='test'>{this.state.num}</View>
  }
}

• 组件类的第一个字母必须大写,否则会报错。
• 组件类只能包含一个顶层标签，否则也会报错。
• 每个 React 组件都会有一个 render 函数，用于返回该组件的 JSX 片段
• 也可以在 render 函数里返回另一个组件，即组件之间的相互嵌套

Props

• 父组件传给子组件的数据,会挂载在子组件的 this.props 上
• 组件中如果收到了新的 props，就会重新执行一次 render 函数，也就是重新渲染一遍。

// 子组件
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
// 父组件
class Demo extends React.Component {
  render () {
    return <Welcome name='aotu,taro!' />
  }
}
// 最终页面上会渲染出 <h1>Hello, aotu,taro!</h1>

state

• 是属于组件自己内部的数据状态，一般在 constructor 构造函数里初始化定义 state
• state 需要变化时，是不允许随便更改的，需要调用 this.setState 来进行更改
• 只把跟组件内部视图有关联的数据，变量放在 state 里面，以此避免不必要的渲染。

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: 'aotu,taro!'};
  }
  render() {
    return <h1>Hello, {this.state.name}</h1>;
  }
}

组件的生命周期

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentWillMount() {}
 
  componentDidMount() {}

  componentWillUpdate(nextProps, nextState) {}
    
  componentWillReceiveProps(nextProps) {}  
  
  componentDidUpdate(prevProps, prevState) {}

  shouldComponentUpdate(nextProps, nextState) {}

  componentWillUnmount() {}
  
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

• constructor，顾名思义，组件的构造函数。一般会在这里进行 state 的初始化，事件的绑定等等

• componentWillMount，是当组件在进行挂载操作前，执行的函数，一般紧跟着 constructor 函数后执行

• componentDidMount，是当组件挂载在 dom 节点后执行。一般会在这里执行一些异步数据的拉取等动作

• shouldComponentUpdate，返回 false 时，组件将不会进行更新，可用于渲染优化

• componentWillReceiveProps，当组件收到新的 props 时会执行的函数，传入的参数就是 nextProps ，你可以在这里根据新的 props 来执行一些相关的操作，例如某些功能初始化等

• componentWillUpdate，当组件在进行更新之前，会执行的函数

• componentDidUpdate，当组件完成更新时，会执行的函数，传入两个参数是 prevProps 、prevState

• componentWillUnmount，当组件准备销毁时执行。在这里一般可以执行一些回收的工作，例如 clearInterval(this.timer) 这种对定时器的回收操作