現在很多大廠都推出了自己的小程序平臺，作爲開發者，採用跨平臺方案開發小程序幾乎成了必選項
目前市面上跨平臺解決方案基本只剩下 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'],
}