很久之前在小程序刚刚面世的时候接触过小程序的文档，因为当时对前端的接触还不算多，所以没有很认真的去实践过从 0 开始构建一个小程序。这次拿到小程序的开发任务之后，我去看了一下小程序原生的语法和 IDE 之类的，着实是感觉到有些蛋疼的：的确是有太多的限制和兼容性问题，部分 CSS 3 的语法不能很好的兼容，第三方库引入不算方便，蹩脚的事件处理等等。让我感觉一夜回到了 IE 6 时代的开发。

不过我依稀记起来了之前在哪里看过京东 Aotu 团队发布的 Taro 框架，可以方便的用 React 的语法去写小程序。不过当时还处于很早起的测试阶段。

仔细去了解了一下 Taro 框架目前的成果，还是很棒的。已经有很多线上的小程序使用 Taro 框架，Taro 开发团队的代码迭代和 Bug 修复还是很积极的，产品社区也不错，很多用户在为 Taro 的开发做贡献。我感觉就是你了——Taro！

Taro 对我来说最大的几个优点是：

React 语法，毕竟自从接触了 React 之后我就再也回不去 jQuery 的石器时代了。
多端支持，截至目前 Taro 可以达到一次编码后编译成微信小程序、H5、React Native、支付宝小程序的原生代码。这样未来想从微信小程序发展到其他平台的小程序抑或是原生 App 时就不会有太大的困难。
双向转换，可以实现 Taro 和微信原生小程序的互相转换，这样一些小程序独有的第三方组件或模块也能方便的引入到项目中。

当然，目前还是有一些限制的地方：

不能在包含 JSX 元素的 map 循环中使用 if 表达式。
不能使用除 Array.map 之外的方法操作JSX数组。
不能在 JSX 参数中使用匿名函数。
不能使用无状态组件。

不过这些限制都是有相应的规避办法的，并且 Taro 未来的开发中应该也会慢慢的消除这些限制。至少目前来看，Taro 在我们的项目中是可以完美使用的。

接下来要开始实践一下 Taro 的应用。首先规划下来的技术栈是：TypeScript + Taro + Dva，引入 TypeScript 的目的是在项目开发中尽可能地规避一些错误和规范开发，而使用 Dva 进行状态管理完全是在 Web 端的项目中用习惯了 Dva，Taro 官方推荐的状态管理是 Redux 和 MobX，有兴趣的可以自行去了解一下相关文档。

在项目中引入 Dva：

安装需要的包，我们只需要安装 dva-core 和 dva-loading 两个包即可。再安装 redux-logger。
写一个 Dva 的帮助类在项目中引用：

import Taro from '@tarojs/taro';
import { create } from 'dva-core';
import { createLogger } from 'redux-logger';
import createLoading from 'dva-loading';

let app;
let store;
let dispatch;

function createApp(opt) {
  opt.onAction = [createLogger()];
  app = create(opt);
  app.use(createLoading({}));

  if (Taro.getEnv() === Taro.ENV_TYPE.ALIPAY) {
    global = {};
  }

  if (!global.registered) opt.models.forEach(model => app.model(model));
  global.registered = true;
  app.start();

  store = app._store;
  app.getStore = () => store;

  dispatch = store.dispatch;

  app.dispatch = dispatch;
  return app;
}

export default {
  createApp,
  getDispatch() {
    return app.dispatch;
  }
}

在 Taro 的入口文件（我这里是 App.tsx）中引入 Provider 和 Dva 帮助类：

import { Provider } from '@tarojs/redux';
import dva from './Utils/Dva';  // 刚才写的帮助类

创建一个 Dva 和 Dva Store 的实例：

const dvaApp = dva.createApp({
  initialState: {},
  models: models,
});

const store = dvaApp.getStore();

然后将根组件用 Provider 包裹起来并传入 Dva Store：

<Provider store={store}>
    <Index />
</Provider>

最后写一个示例页面来试一下效果（和 Web 端一样写法，再此略过）。

实际开发过程中遇到的坑：

微信开发者工具有时候会提醒找不到 dva-core 或者其他什么乱七八糟的包：
- 这个问题我感觉是微信开发者工具的一个 Bug，实际上只要关掉微信开发者工具再重新打开就好了……保险一点的话可以重新编译一遍 Taro 的代码。并且强烈建议打开项目时先编译完代码后再打开微信开发者工具。

最后附上我做的示例项目，可以开箱即用开发 Taro 项目：

TaroDva.Demo

其中有详细的项目介绍和编码规范可以供参考。