Taro-多端开发

跨平台开发

在某些情况下，不同平台的表现或业务逻辑有质的不同。在这样的情况下我们是没有办法做到「一套代码走天下」的。

例如我们正在实现 V2EX 论坛应用，当前的 API 没有办法在浏览器中跨域调用，因此我们需要在 H5 端使用另一份 API。我们可以通过内置环境变量来解决：

- import api from '../../utils/api'
// 我们可以根据不同的平台，引入不同的 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 还提供了统一接口的多端文件，通过不同的命名方式寻找依赖，在这类情况下，我们可以保留：

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

语句原封不动，修改我们的文件结构，在文件名和后缀名之间加上平台的名字：

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

了解更多: 除了「内置环境变量」和「统一接口的多端文件」之外，Taro 还提供了别的跨平台开发解决方案，你可以访问文档 跨平台开发 了解更多。 

同步调试

默认情况下，Taro 会把各端打包后的文件都放在 ​dist​ 目录。如果你想要多端同步调试的话先编译后的文件就会被后编译好的文件覆盖。

但我们可以通过修改编译配置的 ​outputRoot​ 达到多端同步调试的目的：

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

在这样的配置下，微信小程序编译后的目录就会是 ​dist/weapp​，H5 编译后目录就会是 ​dist/h5​。

使用原生小程序组件

某些情况下我们需要复用小程序既有生态，而小程序的组件/库通常是针对特定小程序写的，并不能直接在 Taro 上使用，需要一些额外的操作。

例如我们的论坛应用，在帖子详情可能服务端返回的是 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 文档调用即可。

注意: 一旦使用了原生小程序组件，Taro 应用就失去了跨端的能力。

了解更多: Taro 还支持使用小程序插件，详情可以访问文档使用小程序原生第三方组件和插件。