跨平臺開發(fā)

Taro 的設(shè)計初衷就是為了統(tǒng)一跨平臺的開發(fā)方式，并且已經(jīng)盡力通過運行時框架、組件、API 去抹平多端差異，但是由于不同的平臺之間還是存在一些無法消除的差異，所以為了更好的實現(xiàn)跨平臺開發(fā)，Taro 中提供了如下的解決方案

內(nèi)置環(huán)境變量

注意：環(huán)境變量在代碼中的使用方式，參考

Taro 在編譯時提供了一些內(nèi)置的環(huán)境變量來幫助用戶做一些特殊處理

process.env.TARO_ENV

用于判斷當(dāng)前編譯類型，目前有 weapp / swan / alipay / h5 / rn / tt / qq / quickapp 八個取值，可以通過這個變量來書寫對應(yīng)一些不同環(huán)境下的代碼，在編譯時會將不屬于當(dāng)前編譯類型的代碼去掉，只保留當(dāng)前編譯類型下的代碼，例如想在微信小程序和 H5 端分別引用不同資源

if (process.env.TARO_ENV === 'weapp') {
  require('path/to/weapp/name')
} else if (process.env.TARO_ENV === 'h5') {
  require('path/to/h5/name')
}

同時也可以在 JSX 中使用，決定不同端要加載的組件

render () {
  return (
    <View>
      {process.env.TARO_ENV === 'weapp' && <ScrollViewWeapp />}
      {process.env.TARO_ENV === 'h5' && <ScrollViewH5 />}
    </View>
  )
}

樣式文件中跨平臺支持

為了方便大家書寫樣式跨端的樣式代碼，在樣式文件中支持條件編譯的特性。

指定平臺保留樣式：

/*  #ifdef  %PLATFORM%  */
樣式代碼
/*  #endif  */

指定平臺剔除樣式：

/*  #ifndef  %PLATFORM%  */
樣式代碼
/*  #endif  */

其中 PLATFORM 的取值與 process.env.TARO_ENV 保持一致

例如，希望某段樣式只在 微信小程序中 生效，可以如下寫法

/*  #ifdef weapp  */
樣式代碼
/*  #endif  */

如果是多個平臺，之間可以使用空格隔開。

統(tǒng)一接口的多端文件

1.2.17 開始支持

內(nèi)置環(huán)境變量雖然可以解決大部分跨端的問題，但是會讓代碼中充斥著邏輯判斷的代碼，影響代碼的可維護(hù)性，而且也讓代碼變得愈發(fā)丑陋，為了解決這種問題，自 1.2.17 開始，Taro 提供了另外一種跨端開發(fā)的方式作為補(bǔ)充。

開發(fā)者可以通過使用統(tǒng)一接口的多端文件，來解決跨端差異的功能。針對一項功能，如果多個端之間都有差異，那么開發(fā)者可以通過將文件修改成 原文件名 + 端類型 的命名形式，不同端的文件代碼對外保持統(tǒng)一接口，而引用的時候仍然是 import 原文件名的文件，Taro 在編譯時，會跟根據(jù)需要編譯平臺類型，將加載的文件變更為帶有對應(yīng)端類型文件名的文件，從而達(dá)到不同的端加載對應(yīng)文件的目的。

端類型對應(yīng)著 process.env.TARO_ENV 的值

通常有以下兩種使用場景。

多端組件

假如有一個 Test 組件存在微信小程序、百度小程序和 H5 三個不同版本，那么就可以像如下組織代碼

test.js 文件，這是 Test 組件默認(rèn)的形式，編譯到微信小程序、百度小程序和 H5 三端之外的端使用的版本

test.h5.js 文件，這是 Test 組件的 H5 版本

test.weapp.js 文件，這是 Test 組件的 微信小程序 版本

test.swan.js 文件，這是 Test 組件的 百度小程序 版本

test.qq.js 文件，這是 Test 組件的 QQ 小程序 版本

test.quickapp.js 文件，這是 Test 組件的 快應(yīng)用 版本

四個文件，對外暴露的是統(tǒng)一的接口，它們接受一致的參數(shù)，只是內(nèi)部有針對各自平臺的代碼實現(xiàn)

而我們使用 Test 組件的時候，引用的方式依然和之前保持一致，import 的是不帶端類型的文件名，在編譯的時候會自動識別并添加端類型后綴

import Test from '../../components/test'

<Test argA={1} argA={2} />

多端腳本邏輯

與多端組件類似，假如有需要針對不同的端寫不同的腳本邏輯代碼，我們也可以類似的進(jìn)行處理，遵守的唯一原則就是多端文件對外的接口保持一致。

例如微信小程序上使用 Taro.setNavigationBarTitle 來設(shè)置頁面標(biāo)題，H5 使用 document.title，那么可以封裝一個 setTitle 方法來抹平兩個平臺的差異。

增加 set_title.h5.js，代碼如下

export default function setTitle (title) {
  document.title = title
}

增加 set_title.weapp.js，代碼如下

import Taro from '@tarojs/taro'
export default function setTitle (title) {
  Taro.setNavigationBarTitle({
    title
  })
}

調(diào)用的時候，如下使用

import setTitle from '../utils/set_title'

setTitle('頁面標(biāo)題')

使用要點

統(tǒng)一接口的多端文件這一跨平臺兼容寫法有如下三個使用要點

• 不同端的對應(yīng)文件一定要統(tǒng)一接口，統(tǒng)一調(diào)用方式
• 最好有一個平臺無關(guān)的默認(rèn)文件，這樣在使用 ts 的時候也不會出現(xiàn)報錯
• 引用文件的時候，只需要寫默認(rèn)文件名，不用帶文件后綴

app.js 中使用不同的 pages

1.3.11 開始支持

根據(jù)不同環(huán)境返回不同的 pages，可以這么寫

config: Config = {
  "pages": preval`
    module.exports=(function() {
      if (process.env.TARO_ENV === 'weapp') {
        return [
          '/pages/index/index'
        ]
      }
      if (process.env.TARO_ENV === 'swan') {
        return [
          '/pages/indexswan/indexswan'
        ]
      }
    })()
  `
}