Taro多端开发

环境变量

process.env.TARO_ENV用于判断当前编译类型,当在不同环境想要引用不同资源或者做不同操作时,可以用环境变量来区分:

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

统一接口的多端文件

当多个端的对同一个功能要做不同处理时,这时以上的逻辑判断就显得有些杂乱,所以开发者可以通过将文件名改成 原文件名+端的类型(process.env.TARO_ENV的值) 得命名方式,不同端的文件代码对外保持统一接口，而引用的时候仍然是 import 原文件名的文件

• taro在编译时,会根据端的类型去匹配相同端后缀的文件对其进行编译,从而达到不同端加载对应文件的目的

多端组件

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

test.js 文件，这是 Test 组件默认的形式，编译到微信小程序、百度小程序和 H5 三端之外的端使用的版本

test.h5.js 文件，这是 Test 组件的 H5 版本

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

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

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

test.quickapp.js 文件，这是 Test 组件的 快应用 版本

而我们引用的时候,只需要引用他原本的文件名即可:

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

<Test argA={1} argA={2} />
复制代码

多端逻辑

例如微信小程序上使用 Taro.setNavigationBarTitle 来设置页面标题，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
  })
}
复制代码

调用的时候，如下使用:

import setTitle from '../utils/set_title'

setTitle('页面标题')
复制代码