Taro 多端开发（上）Taro 是由凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。为了只需要开发

前端多端统一开发背景和趋势

Taro 是什么

Taro 是由凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。

Taro 是为什么

为了只需要开发一套代码便能够在多个端上运行。为了减少学习成本，提高开发效率。

Taro 的语法标准

Taro采用react作为它的语法标准

React 是一个非常流行的框架，也有广大的受众，使用它也能降低小程序开发的学习成本；
小程序的数据驱动模板更新的思想与实现机制，与 React 类似；
React 采用 JSX 作为自身模板，JSX相比字符串模板来说更自由，更自然，更具表现力，不需要依赖字符串模板的各种语法糖，也能完成复杂的处理
React 本身有跨端的实现方案 - React Native，并且非常成熟，社区活跃，对于Taro来说有更多的多端开发可能性。

Taro 多端转换的原理

小程序和web端的差异

多端差异主要表现在组件标准和API标准以及运行机制上

如何磨平小程序和web端的差异

Taro 采用了定制一套运行时标准来抹平不同平台之间的差异。标准包括标准运行时框架、标准基础组件库、标准端能力 API，其中运行时框架和 API 对应 @taro/taro，组件库对应 @tarojs/components。

Taro的这一套标准的定制上是以微信小程序的组件库和 API 来作为 Taro 的运行时标准，因为微信小程序的文档非常完善，而且组件与 API 也是非常丰富，同时最重要的是，百度小程序以及支付宝小程序都是遵循的微信小程序的标准。

多端统一开发框架 Taro 的使用（微信和H5为例）

搭建好的Taro 已经支持微信/百度/支付宝小程序、H5 以及 ReactNative 等端的代码转换，要注意的是针对不同端的启动以及预览、打包方式是不一样的。

安装

略略略...

项目配置

各类小程序平台均有自己的项目配置文件

微信小程序， project.config.json（默认创建）
百度智能小程序，project.swan.json
头条小程序，project.config.json，文档暂无，大部分字段与微信小程序一致
支付宝小程序，暂无发现
快应用，manifest.json

微信小程序编译预览及打包

# npm script
$ npm run dev:weapp # npm run build:weapp -- --watch
$ npm run build:weapp

H5 编译预览及打包

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

Redux

在 Taro 中可以自由地使用 React 生态中非常流行的数据流管理工具 Redux 来解决复杂项目的数据管理问题。而为了更方便地使用 Redux ，Taro 提供了与 react-redux API 几乎一致的包 @tarojs/redux 来让开发人员获得更加良好的开发体验。

redux的核心思想就是

使用普通对象来描述应用的 state

const INITIAL_STATE = {
    num: 0
}

要想更新 state 中的数据，发起一个 action action 就是一个普通 JavaScript 对象,用来描述发生了什么

{ type: 'ADD' }
{ type: 'MINUS' }

通过reducer，传入action 和 state，更新state中的数据

function todo (state = INITIAL_STATE, action) {
  switch (action.type) {
    case ADD:
      return {
        ...state,
        num: state.num + 1
      }
    case MINUS:
      return {
        ...state,
        num: state.num - 1
      }
    default:
      return state
  }
}

export default combineReducers({
    todo
})

根据已有的reducer来创建store，Redux 应用只有一个单一的 store,当需要拆分数据处理逻辑时，你应该使用 reducer 组合而不是创建多个 store。

import { createStore, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk'
import { createLogger } from 'redux-logger'
import rootReducer from '../reducers/index'

const middlewares = [
  thunkMiddleware,
  createLogger()
]

export default function configStore () {
  const store = createStore(rootReducer, applyMiddleware(...middlewares))
  return store
}

最后，创建容器组件把展示组件和redux关联起来，使用React Redux 库的 connect() 方法来生成

@connect(({ todo }) => ({
  todo
}), (dispatch) => ({
  add () {
    dispatch(add())
  },
  dec () {
    dispatch(minus())
  },
  asyncAdd () {
    dispatch(asyncAdd())
  }
}))