淺談Taro和Apollo在開發過程當中的實踐

1、什麼是Taro

Taro是凹凸實驗室研發的一套遵循React語法規範的多端開發的解決方案。使用Taro，能夠只書寫一套代碼，再經過 Taro 的編譯工具，將源代碼分別編譯出能夠在不一樣端（微信/百度/支付寶/字節跳動小程序、H五、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）。

2、什麼是Apollo

Apollo是民生銀行自主研發的一個基於redux和redux-thunk的數據流方案，爲了提升開發體驗，Apollo還內置了react，react-router和react-redux，也能夠理解爲一個輕量級框架。簡單的說，Apollo就是對react，react-router，redux，redux-thunk等的一層封裝，使開發者能夠對react和redux的使用有更好的體驗。

3、如何在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如出一轍。

4、在用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/… 有興趣的朋友能夠下載下來看看，有什麼問題咱們也能夠互相討論，這樣咱們才能一塊兒進步。最後，謝謝你們的閱讀！