一、什么是Taro

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

Taro 遵循 React 语法规范，它采用与 React 一致的组件化思想，组件生命周期与 React 保持一致，同时支持使用 JSX 语法，让代码具有更丰富的表现力，使用 Taro 进行开发可以获得和 React 一致的开发体验。

Taro 立足于微信小程序开发，众所周知小程序的开发体验并不是非常友好，比如小程序中无法使用 npm 来进行第三方库的管理，无法使用一些比较新的 ES 规范等等，针对小程序端的开发弊端，Taro 具有以下的优秀特性

✅ 支持使用 npm/yarn 安装管理第三方依赖

✅ 支持使用 ES7/ES8 甚至更新的 ES 规范，一切都可自行配置

✅ 支持使用 CSS 预编译器，例如 Sass 等

✅ 支持使用 Redux 进行状态管理

✅ 支持使用 MobX 进行状态管理

✅ 小程序 API 优化，异步 API Promise 化等等

Taro 方案的初心就是为了打造一个多端开发的解决方案。目前 Taro 代码可以支持转换到 微信/百度/支付宝/字节跳动小程序 、 H5 端 以及 移动端（React Native）。

二、什么是Apollo

Apollo是民生银行自主研发的一个基于redux和redux-thunk的数据流方案，为了提高开发体验，Apollo还内置了react，react-router和react-redux，也可以理解为一个轻量级框架。简单的说，Apollo就是对react，react-router，redux，redux-thunk等的一层封装，使开发者可以对react和redux的使用有更好的体验。

三、如何在Taro中使用Apollo

首先，我们安装Taro的开发工具@tarojs/cli，生成一个Taro的项目，怎么安装，Taro官网都写得很清楚，大家可以去官网查看，这里就不再详述。Taro官网地址：taro.aotu.io/

第二步在src-utils文件夹下新建一个apollo.js,输出一个方法，通过此方法注入model并输出，代码如下：

import Apollo from 'apollo-core'

let app;

export default function initApp(opt) {
  app = Apollo({
  })
  opt.models.forEach(model => app.model(model));
  return app.getStore();
}
复制代码

第三步，我们在src文件夹下新建models文件夹，新建index.js文件，把我们的所有模块的model输出，代码如下：

import login from '../pages/login/model'
import home from '../pages/home/model'
import detail from '../pages/detail/model'
import user from '../pages/user/model'
import address from '../pages/address/model'
import addAddress from '../pages/addAddress/model'
import cart from '../pages/cart/model'
import order from '../pages/order/model'

export default [login, home, detail, user, address, addAddress, cart, order];
复制代码

第四步，我们在app.js文件中导入所有的model和对apollo的初始化，代码如下：

import initApp from './utils/apollo'
import models from './models'
复制代码

const store = initApp({
  models: models,
})
复制代码

<Provider store={store}>
    <Index />
</Provider>
复制代码

这样我们就把Apollo集成进了Taro中，开发者就可以按照以前在apollo框架中的方法来开发微信小程序了。

下面，介绍一下每个模块的目录结构

我们的开发代码主要都在src文件夹下，所以这里我主要讲下src的目录结构

components放的是我们分装的木偶组件，也就是可以公用的一些组件。

images放的是我们的图片文件

models就是存放所有的model文件

pages就是我们的页面文件

styles就是我们的公用样式文件

utils就是我们使用的一些插件和封装的一些函数

下面我再说下pages里面每个模块的结构

index.js就是我们在apollo开发过程中的page层，也就是和model的交互层

indexView就是我们在apollo开发过程中的view层，也就是不做数据交互，是展示层

index.scss就是这个模块的样式文件

model.js就是这个模块的model

client.js就是我们输出的和调用后端接口的函数

config.js就是我们定义的一些在这个模块使用的常量

目录结构介绍完了，我们最后说下封装和后端的交互request，在这里我们用的是Taro的api，Taro.request

我们先在utils文件夹中新建request.js，直接上代码：

import Taro from '@tarojs/taro'
import config from './config'

const request_data = {
  platform: 'wap',
  rent_mode: 2,
}

export default (options = { method: 'GET', data: {}, notShowLoading: false }) => {
  if(!options.notShowLoading) {
    Taro.showLoading({
      title: '加载中...'
    })
  }

  if(!config.noConcel) {
    console.log('请求参数', options.data)
  }
  return Taro.request({
    url: config.baseUrl + options.url,
    data: {
      ...request_data,
      ...options.data,
    },
    method: options.method.toUpperCase(),
    header: {
      'Content-Type': 'application/json'
    }
  }).then(res => {
    Taro.hideLoading()
    const { statusCode, data } = res;
    if(statusCode >= 200 && statusCode < 300) {
      if(!config.noConcel) {
        console.log('接口响应', res.data)
      }
      if(data.status !== 'ok') {
        Taro.showToast({
          title: res.data.error.message || res.data.error.code,
          icon: 'none',
          mask: true,
        })
      }
      return data;
    } else {
      throw new Error(`网络请求错误，状态码${statusCode}`)
    }
  })
}

复制代码

这样我们就实现了在Taro中用以前Apollo的写法来开发了，开发体验和用Aopllo一模一样。

四、在用Taro开发小程序过程中遇到的一些问题和解决方法

我下面要说的很多问题在Taro官网的文档中都有说明，大家在开发之前还是要好好仔细阅读一遍Taro文档，我在这里说一下可以给大家提前预防一下

1.小程序的后端服务器需要在微信公众号后台管理中配置，否则不可用

2.小程序必须使用HTTPS/WSS发起网络请求 developers.weixin.qq.com/miniprogram…

3.不能在jsx参数中使用对象展开符

render () {
    return (
      <OrderView { ...this.props }/>
    )
  }
复制代码

上面这种写法会导致Taro编译错误 可以写成下面这样

render () {
    return (
      <OrderView order={this.props.order} onSubmit={this.props.submit}/>
    )
  }
复制代码

4.Taro中是不支持无状态组件的，也就是不支持纯函数的写法

5.设置小程序的编译页面如下

6.不能使用 Array#map 之外的方法操作 JSX 数组

7.View的onClick事件是可以直接拿到event的，不用再把item传进去

当然想要传也是可以的，可以写成

onClick={() => this.handleClick(item)}
复制代码

8.小程序的微信开发者工具输入框焦点很难触发

在微信开发者工具上，触发焦点，很费劲，这是微信开发者工具的bug

9.Taro.navigateBack()返回是不会刷新页面的，走的是componentDidShow()，用的时候要注意页面返回时数据刷新的问题。

10.对于跳转tabbar的情况要分环境，如果是小程序用switchTab这个api，如果是h5用navigateTo这个api。

11.初始化页面发请求调用mapDispatchToProps里面的函数应写在componentDidMount中而不要写在componentWillMount中，小程序没问题，在h5中componentWillMount拿不到this.props。

12.表单数据项建议用taro-ui封装的组件，原生的Input的onChange事件在真机不会触发，只有离开焦点才会触发，用taro-ui封装的组件也就可以直接setState了。

13.ScrollView标签会和Taro的上拉刷新的页面事件处理函数onReachBottom冲突，然后onReachBottom会失效，如果想两端适配的话就不要用onReachBottom了，用ScrollView标签来实现就行了。如果只是做微信小程序，用onReachBottom就行了。用了scrollView，小程序的onReachBottom就不起作用了。

14.做完一个功能就要在真机上测试下，微信开发者工具不靠谱，在微信开发者工具上没问题，放到真机上就有问题了，比如原生的input的onchange事件在真机上触发就有延迟，在微信开发者工具上没问题，一定不能等全部功能做完了再在真机上测试。切记切记。

结语

本文大致讲解了Taro，Apollo的概念以及把Apollo集成到Taro中的使用实践和用Taro开发过程中所遇到的一些问题和解决方法。当然这里不可能把所有的问题都列出来，每个开发者在开发过程中遇到的问题也不尽相同，这里只是提供一个思路，分享出自己在开发过程中的心得。在此过程中，完成了一个线上购物demo，地址为 coding.net/u/longbg/p/… 有兴趣的朋友可以下载下来看看，有什么问题我们也可以互相讨论，这样我们才能一起进步。最后，谢谢大家的阅读！