使用 Taro 开发跨平台小程序

现在很多大厂都推出了自己的小程序平台，作为开发者，采用跨平台方案开发小程序几乎成了必选项

目前市面上跨平台解决方案基本只剩下 uni-app 和 Taro, 其他的比如 WePY、飞冰 社区生态都不够活跃

由于公司采用 React 技术栈，所以最终选择了 Taro 3.x（写这篇博客时版本为 v3.6.2）

 

一、创建项目

在合适的目录中执行以下命令

npx @tarojs/cli init myTaroApp

执行之后会在当前目录创建一个 myTaroApp 项目文件夹

注意：从 Taro v3.5 开始，Taro 将默认使用 React 18 版本

而对于 React 18，有以下注意事项：

- 开发支付宝小程序时，Webpack4 暂不支持使用 React18，#12134

- 受小程序环境限制，诸如新 SSR Suspense 等特性将不能在小程序中使用

- RN 暂不支持 React v18，需要等待 RN 官方输出支持方案

生成的目录结构和编译配置可以参考官方文档，这里着重强调一下多平台的项目配置文件 project.config.json

为了能够适配不同小程序平台的配置文件不同的情况，Taro 为各个小程序平台添加各自的项目配置文件：

---------------------------

微信小程序：project.config.json

百度小程序：project.swan.json

字节跳动小程序：project.tt.json

QQ 小程序：project.qq.json

支付宝小程序：project.alipay.json

飞书小程序：project.lark.json

--------------------------- 

项目创建之后，执行 yarn dev:weapp 在开发模式下编译微信小程序

编译后会在项目根目录下生成 dist 目录，在微信开发者工具中打开该目录进行预览

 

 

二、路由

src/app.js 是项目的入口文件，这个文件不会渲染任何内容，但可以用来设置全局状态

/** 如果使用了 ts, 需要将文件名改为 app.tsx */

import { useEffect, PropsWithChildren } from 'react';
import { useDidShow, useDidHide } from '@tarojs/taro';
// 自行构建的状态管理，可使用 Redux
import { AppContext } from './contexts/AppContext';
import './app.less';

function App(props: PropsWithChildren) {
  // 可以使用所有的 React Hooks
  useEffect(() => { });

  // 对应 onShow
  useDidShow(() => { });

  // 对应 onHide
  useDidHide(() => { });

  return (
    <AppContext.Provider value={{}}>
      {props.children}
    </AppContext.Provider>
  );
}

export default App;

 Taro 沿用了微信小程序的路由规则，可以直接在 src/app.config.ts 中配置 pages

export default {
  pages: [
    /** 首页 */
    'pages/index/index',
    /** 个人中心 */
    'pages/user/index',
  ],
}

还可以在路由页面同级目录创建 .config.js 文件来实现页面配置

pages
├── index  //首页
│   ├── index.config.ts //页面配置
│   └── index.tsx //路由页面
└── user //个人中心
    ├── index.config.ts
    └── index.tsx

最后使用 navigateTo 或者 redirectTo 跳转页面

 如果跳转路径中携带了 URL 参数，可通过 Taro.getCurrentInstance().router.params 获取，详见 Taro 路由功能

 

 

三、多端开发

在应用中可通过环境变量 process.env.TARO_ENV 来判断当前编译的平台类型

枚举值有：weapp（微信）、swan（百度）、alipay（支付宝）、tt（字节跳动）、jd（京东）、qq、h5、rn

需要注意的是：不要解构 process.env 来获取环境变量，一定要使用完整书写（process.env.TARO_ENV）

// 正确写法
if (process.env.TARO_ENV === 'weapp') {
}

// 错误写法
const { TARO_ENV = 'weapp' } = process.env
if (TARO_ENV === 'weapp') {
}

---

除了通过 TARO_ENV 来判断当前平台类型以外，还可以通过文件名来区分

├── test.js                Test 组件默认的形式，编译到微信小程序、百度小程序和 H5 之外的端使用的版本
├── test.weapp.js          Test 组件的微信小程序版本
├── test.swan.js           Test 组件的百度小程序版本
└── test.h5.js             Test 组件的 H5 版本

在使用组件的时候，引入路径中不用携带平台类型代码，直接引入原文件

import Test from '@/components/test';

 

 

四、编译构建

开发完成后，使用 build:{ENV} 命令构建对应平台的小程序代码

比如构建微信小程序使用 npm run build:weapp，然后使用小程序开发工具提交代码

当项目越来越大，打包时间过长，可以考虑 Taro 官方推荐的优化方案《编写插件，将 Taro 编译打包耗时缩短至三分之一》

安装插件

npm install --save-dev thread-loader cache-loader taro-plugin-compiler-optimization

使用插件

// config/index.js
config = {
  // ...
  plugins: ['taro-plugin-compiler-optimization'],
}