Taro-多端開發(fā)

跨平臺開發(fā)

在某些情況下，不同平臺的表現(xiàn)或業(yè)務(wù)邏輯有質(zhì)的不同。在這樣的情況下我們是沒有辦法做到「一套代碼走天下」的。

例如我們正在實現(xiàn) V2EX 論壇應(yīng)用，當前的 API 沒有辦法在瀏覽器中跨域調(diào)用，因此我們需要在 H5 端使用另一份 API。我們可以通過內(nèi)置環(huán)境變量來解決：

- import api from '../../utils/api'
// 我們可以根據(jù)不同的平臺，引入不同的 API
+ let api
+ if (process.env.TARO_ENV === 'weapp') {
+  api = require('../../utils/api-weapp')
+ } else if (process.env.TARO_ENV === 'h5') {
+  api = require('../../utils/api-h5')
+ }

Taro 還提供了統(tǒng)一接口的多端文件，通過不同的命名方式尋找依賴，在這類情況下，我們可以保留：

import api from '../../utils/api'

語句原封不動，修改我們的文件結(jié)構(gòu)，在文件名和后綴名之間加上平臺的名字：

.
└── utils
    ├── api.h5.js
    ├── api.weapp.js
    └── index.js

了解更多: 除了「內(nèi)置環(huán)境變量」和「統(tǒng)一接口的多端文件」之外，Taro 還提供了別的跨平臺開發(fā)解決方案，你可以訪問文檔 跨平臺開發(fā) 了解更多。 

同步調(diào)試

默認情況下，Taro 會把各端打包后的文件都放在 ?dist? 目錄。如果你想要多端同步調(diào)試的話先編譯后的文件就會被后編譯好的文件覆蓋。

但我們可以通過修改編譯配置的 ?outputRoot? 達到多端同步調(diào)試的目的：

const config = {
  outputRoot: `dist/${process.env.TARO_ENV}`
}

在這樣的配置下，微信小程序編譯后的目錄就會是 ?dist/weapp?，H5 編譯后目錄就會是 ?dist/h5?。

使用原生小程序組件

某些情況下我們需要復用小程序既有生態(tài)，而小程序的組件/庫通常是針對特定小程序?qū)懙?，并不能直接?Taro 上使用，需要一些額外的操作。

例如我們的論壇應(yīng)用，在帖子詳情可能服務(wù)端返回的是 MarkDown 格式，我們就需要 towxml 來渲染的我們的帖子：

首先我們需要在帖子詳情頁面的配置文件中引用 ?towxml?:

export default {
  "usingComponents": {
    "towxml":"../../towxml/towxml"
  }
}

然后使用 towxml 組件，這里必須記住的是不管是 React 還是 Vue，原生小程序組件聲明需要是小寫的

- <View dangerouslySetInnerHTML={{ __html: reply.content }} className='content'></View>
+ <towxml nodes="{{reply.content}}" />

- <view v-html="reply.content_rendered | html" class='content' />
+ <towxml :nodes="reply.content_rendered | html" />

最后按照 towxml 文檔調(diào)用即可。

注意: 一旦使用了原生小程序組件，Taro 應(yīng)用就失去了跨端的能力。

了解更多: Taro 還支持使用小程序插件，詳情可以訪問文檔使用小程序原生第三方組件和插件。