Taro-跨平臺(tái)開(kāi)發(fā)

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

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

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

process.env.TARO_ENV

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

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

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

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

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

1.2.17 開(kāi)始支持

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

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

端類(lèi)型對(duì)應(yīng)著 process.env.TARO_ENV 的值

通常有以下兩種使用場(chǎng)景。

多端組件

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

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)用 版本

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

而我們使用 Test 組件的時(shí)候，引用的方式依然和之前保持一致，import 的是不帶端類(lèi)型的文件名，在編譯的時(shí)候會(huì)自動(dòng)識(shí)別并添加端類(lèi)型后綴

importTestfrom'../../components/test'
<Test argA={1} argA={2}/>

多端腳本邏輯

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

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

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

exportdefaultfunction setTitle (title){
  document.title = title
}

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

importTarofrom'@tarojs/taro'
exportdefaultfunction setTitle (title){
Taro.setNavigationBarTitle({
    title
})
}

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

import setTitle from'../utils/set_title'
setTitle('頁(yè)面標(biāo)題')

使用要點(diǎn)

統(tǒng)一接口的多端文件這一跨平臺(tái)兼容寫(xiě)法有如下三個(gè)使用要點(diǎn)

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

app.js 中使用不同的 pages

1.3.11 開(kāi)始支持

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

let pages =[]
if(process.env.TARO_ENV ==='weapp'){
  pages =[
'/pages/index/index'
]
}
if(process.env.TARO_ENV ==='swan'){
  pages =[
'/pages/indexswan/indexswan'
]
}
exportdefault{
  pages
}

讓 node_modules 中的依賴也能解析多端文件

Taro 3 里的多端文件由 MultiPlatformPlugin 插件進(jìn)行解析。

它是一個(gè) enhanced-resolve 插件，taro 內(nèi)部會(huì)默認(rèn)加載它。但插件默認(rèn)不解析 node_modules 中的文件。

假如我們有一個(gè) npm 包名叫 @taro-mobile，需要解析里面的多端文件，可以在 taro 的配置文件中這樣修改 MultiPlatformPlugin 的配置：

// mini 也可改為 h5，分別對(duì)應(yīng)小程序與 h5 端配置
mini:{
  webpackChain (chain){
    chain.resolve.plugin('MultiPlatformPlugin')
.tap(args =>{
return[...args,{
          include:['@taro-mobile']
}]
})
}
}