一、什么是Taro

Taro是凹凸實驗室研發(fā)的一套遵循React語法規(guī)范的多端開發(fā)的解決方案。使用Taro，可以只書寫一套代碼，再通過 Taro 的編譯工具，將源代碼分別編譯出可以在不同端（微信/百度/支付寶/字節(jié)跳動小程序、H5、React-Native 等）運行的代碼。

Taro 遵循 React 語法規(guī)范，它采用與 React 一致的組件化思想，組件生命周期與 React 保持一致，同時支持使用 JSX 語法，讓代碼具有更豐富的表現(xiàn)力，使用 Taro 進行開發(fā)可以獲得和 React 一致的開發(fā)體驗。

Taro 立足于微信小程序開發(fā)，眾所周知小程序的開發(fā)體驗并不是非常友好，比如小程序中無法使用 npm 來進行第三方庫的管理，無法使用一些比較新的 ES 規(guī)范等等，針對小程序端的開發(fā)弊端，Taro 具有以下的優(yōu)秀特性

? 支持使用 npm/yarn 安裝管理第三方依賴

? 支持使用 ES7/ES8 甚至更新的 ES 規(guī)范，一切都可自行配置

? 支持使用 CSS 預(yù)編譯器，例如 Sass 等

? 支持使用 Redux 進行狀態(tài)管理

? 支持使用 MobX 進行狀態(tài)管理

? 小程序 API 優(yōu)化，異步 API Promise 化等等

Taro 方案的初心就是為了打造一個多端開發(fā)的解決方案。目前 Taro 代碼可以支持轉(zhuǎn)換到 微信/百度/支付寶/字節(jié)跳動小程序 、 H5 端 以及 移動端（React Native）。

二、什么是Apollo

Apollo是民生銀行自主研發(fā)的一個基于redux和redux-thunk的數(shù)據(jù)流方案，為了提高開發(fā)體驗，Apollo還內(nèi)置了react，react-router和react-redux，也可以理解為一個輕量級框架。簡單的說，Apollo就是對react，react-router，redux，redux-thunk等的一層封裝，使開發(fā)者可以對react和redux的使用有更好的體驗。

三、如何在Taro中使用Apollo

首先，我們安裝Taro的開發(fā)工具@tarojs/cli，生成一個Taro的項目，怎么安裝，Taro官網(wǎng)都寫得很清楚，大家可以去官網(wǎng)查看，這里就不再詳述。Taro官網(wǎng)地址：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(); } 復(fù)制代碼

第三步，我們在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]; 復(fù)制代碼

第四步，我們在app.js文件中導(dǎo)入所有的model和對apollo的初始化，代碼如下：

import initApp from './utils/apollo' import models from './models' 復(fù)制代碼const store = initApp({models: models, }) 復(fù)制代碼<Provider store={store}><Index /> </Provider> 復(fù)制代碼

這樣我們就把Apollo集成進了Taro中，開發(fā)者就可以按照以前在apollo框架中的方法來開發(fā)微信小程序了。

下面，介紹一下每個模塊的目錄結(jié)構(gòu)

我們的開發(fā)代碼主要都在src文件夾下，所以這里我主要講下src的目錄結(jié)構(gòu)

components放的是我們分裝的木偶組件，也就是可以公用的一些組件。

images放的是我們的圖片文件

models就是存放所有的model文件

pages就是我們的頁面文件

styles就是我們的公用樣式文件

utils就是我們使用的一些插件和封裝的一些函數(shù)

下面我再說下pages里面每個模塊的結(jié)構(gòu)

index.js就是我們在apollo開發(fā)過程中的page層，也就是和model的交互層

indexView就是我們在apollo開發(fā)過程中的view層，也就是不做數(shù)據(jù)交互，是展示層

index.scss就是這個模塊的樣式文件

model.js就是這個模塊的model

client.js就是我們輸出的和調(diào)用后端接口的函數(shù)

config.js就是我們定義的一些在這個模塊使用的常量

目錄結(jié)構(gòu)介紹完了，我們最后說下封裝和后端的交互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('請求參數(shù)', 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('接口響應(yīng)', 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(`網(wǎng)絡(luò)請求錯誤，狀態(tài)碼${statusCode}`)}}) }復(fù)制代碼

這樣我們就實現(xiàn)了在Taro中用以前Apollo的寫法來開發(fā)了，開發(fā)體驗和用Aopllo一模一樣。

四、在用Taro開發(fā)小程序過程中遇到的一些問題和解決方法

我下面要說的很多問題在Taro官網(wǎng)的文檔中都有說明，大家在開發(fā)之前還是要好好仔細閱讀一遍Taro文檔，我在這里說一下可以給大家提前預(yù)防一下

1.小程序的后端服務(wù)器需要在微信公眾號后臺管理中配置，否則不可用

2.小程序必須使用HTTPS/WSS發(fā)起網(wǎng)絡(luò)請求 developers.weixin.qq.com/miniprogram…

3.不能在jsx參數(shù)中使用對象展開符

render () {return (<OrderView { ...this.props }/>)} 復(fù)制代碼

上面這種寫法會導(dǎo)致Taro編譯錯誤 可以寫成下面這樣

render () {return (<OrderView order={this.props.order} onSubmit={this.props.submit}/>)} 復(fù)制代碼

4.Taro中是不支持無狀態(tài)組件的，也就是不支持純函數(shù)的寫法

5.設(shè)置小程序的編譯頁面如下

6.不能使用 Array#map 之外的方法操作 JSX 數(shù)組

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

當(dāng)然想要傳也是可以的，可以寫成

onClick={() => this.handleClick(item)} 復(fù)制代碼

8.小程序的微信開發(fā)者工具輸入框焦點很難觸發(fā)

在微信開發(fā)者工具上，觸發(fā)焦點，很費勁，這是微信開發(fā)者工具的bug

9.Taro.navigateBack()返回是不會刷新頁面的，走的是componentDidShow()，用的時候要注意頁面返回時數(shù)據(jù)刷新的問題。

10.對于跳轉(zhuǎn)tabbar的情況要分環(huán)境，如果是小程序用switchTab這個api，如果是h5用navigateTo這個api。

11.初始化頁面發(fā)請求調(diào)用mapDispatchToProps里面的函數(shù)應(yīng)寫在componentDidMount中而不要寫在componentWillMount中，小程序沒問題，在h5中componentWillMount拿不到this.props。

12.表單數(shù)據(jù)項建議用taro-ui封裝的組件，原生的Input的onChange事件在真機不會觸發(fā)，只有離開焦點才會觸發(fā)，用taro-ui封裝的組件也就可以直接setState了。

13.ScrollView標(biāo)簽會和Taro的上拉刷新的頁面事件處理函數(shù)onReachBottom沖突，然后onReachBottom會失效，如果想兩端適配的話就不要用onReachBottom了，用ScrollView標(biāo)簽來實現(xiàn)就行了。如果只是做微信小程序，用onReachBottom就行了。用了scrollView，小程序的onReachBottom就不起作用了。

14.做完一個功能就要在真機上測試下，微信開發(fā)者工具不靠譜，在微信開發(fā)者工具上沒問題，放到真機上就有問題了，比如原生的input的onchange事件在真機上觸發(fā)就有延遲，在微信開發(fā)者工具上沒問題，一定不能等全部功能做完了再在真機上測試。切記切記。

結(jié)語

本文大致講解了Taro，Apollo的概念以及把Apollo集成到Taro中的使用實踐和用Taro開發(fā)過程中所遇到的一些問題和解決方法。當(dāng)然這里不可能把所有的問題都列出來，每個開發(fā)者在開發(fā)過程中遇到的問題也不盡相同，這里只是提供一個思路，分享出自己在開發(fā)過程中的心得。在此過程中，完成了一個線上購物demo，地址為 coding.net/u/longbg/p/… 有興趣的朋友可以下載下來看看，有什么問題我們也可以互相討論，這樣我們才能一起進步。最后，謝謝大家的閱讀！

轉(zhuǎn)載于:https://juejin.im/post/5cc1200ee51d456e3e7a3b8f

總結(jié)

以上是生活随笔為你收集整理的浅谈Taro和Apollo在开发过程中的实践的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。