家庭食谱小程序开发总结（基于 Taro + Redux Toolkit）

🧱 技术栈

框架：Taro 4 + React + TypeScript
状态管理：Redux Toolkit + Redux Persist
云服务：腾讯云 CloudBase
构建工具：初期 Vite，后迁移为 Webpack

📦 功能简介

家庭成员共享一个食谱库，支持多人共用
每日菜谱安排，未来 7 天规划
分类筛选（如炒菜、汤类、大荤、小荤）+ 菜谱搜索
图片上传、用户认证、数据存储使用 CloudBase 实现

⚙️ 项目中的挑战与解决方案

Redux Toolkit 无法在 Vite 环境中正常工作
使用 Vite 构建时，Redux Toolkit 中依赖的 React Context 无法被正确解析，导致 useSelector 无法取到状态，Provider 注入失败。尝试配置 Vite 插件无效，最终决定迁移至 Webpack。
图片上传限制
小程序端对图片尺寸和格式有限制，上传前加入压缩和格式校验，提升上传成功率。
Taro 封装不足
个别微信原生接口（如图片选择后显示）Taro 封装不完整，直接使用 wx.* API 替代。
腾讯云数据库操作规范
微信云开发中数据库操作需要用 data 字段包裹数据，而腾讯云数据库接口则不需要使用 data 字段，直接传入数据对象，避免接口报错和数据异常。
云函数调用规范
前端统一通过 Taro.cloud.callFunction 调用云函数，所有数据库操作集中在云函数内完成，保证数据模型一致性和安全。云函数返回数据或错误信息供前端统一处理。

云函数调用封装示例

项目中封装了一个通用的云函数调用方法，方便前端统一调用并自动处理异常，示例代码如下：

/**
 * 通用云函数调用封装
 * @param name 云函数名
 * @param data 参数对象
 * @returns result 字段（自动抛出云函数异常）
 */
export async function callCloud<T>(name: string, data: Record<string, any> = {}): Promise<CloudResult<T>> {
  try {
    // 自动带上 token
    const token = getToken()
    if (token) {
      data.token = token
    }
    const res = await Taro.cloud.callFunction({ name, data })
    if ('result' in res) {
      const result = res.result as CloudResult<T>
      if (result.code !== 0) {
        throw new Error(result.message || '云函数调用失败')
      }
      return result
    }
    // 兼容极端情况
    return res as CloudResult<T>
  } catch (error) {
    throw error
  }
}

自动附带身份验证 token，确保云函数调用权限

云函数返回非 0 业务码时抛出异常，统一错误处理

兼容极端返回结构，增强健壮性

🌀 Vite → Webpack：构建系统迁移记录

背景

项目最初采用 Vite 构建，期望提升开发效率与热更新体验。但在 Taro 环境下接入 Redux Toolkit 后，出现关键问题：

状态注入失败：Provider 包裹组件后 useSelector 取不到任何状态
构建异常：createContext 无法正确导出，出现运行时错误
社区支持不足：官方和 GitHub issue 都未提供有效解决方案

迁移过程

将 Taro 配置文件中 compiler 从 vite 改为 webpack5
替换相关构建依赖和插件，移除 @tarojs/plugin-vite
重新配置 babel 和 postcss
重装依赖并调整构建脚本以适配 Webpack

迁移效果

Redux Toolkit 运行稳定，状态正常注入
构建输出符合预期，无样式缺失

🧱 技术栈

框架：Taro 4 + React + TypeScript
状态管理：Redux Toolkit + Redux Persist
云服务：腾讯云 CloudBase
构建工具：初期 Vite，后迁移为 Webpack

📦 功能简介

家庭成员共享一个食谱库，支持多人共用
每日菜谱安排，未来 7 天规划
分类筛选（如炒菜、汤类、大荤、小荤）+ 菜谱搜索
图片上传、用户认证、数据存储使用 CloudBase 实现

⚙️ 项目中的挑战与解决方案

Redux Toolkit 无法在 Vite 环境中正常工作
使用 Vite 构建时，Redux Toolkit 中依赖的 React Context 无法被正确解析，导致 useSelector 无法取到状态，Provider 注入失败。尝试配置 Vite 插件无效，最终决定迁移至 Webpack。
图片上传限制
小程序端对图片尺寸和格式有限制，上传前加入压缩和格式校验，提升上传成功率。
Taro 封装不足
个别微信原生接口（如图片选择后显示）Taro 封装不完整，直接使用 wx.* API 替代。
腾讯云数据库操作规范
微信云开发中数据库操作需要用 data 字段包裹数据，而腾讯云数据库接口则不需要使用 data 字段，直接传入数据对象，避免接口报错和数据异常。
云函数调用规范
前端统一通过 Taro.cloud.callFunction 调用云函数，所有数据库操作集中在云函数内完成，保证数据模型一致性和安全。云函数返回数据或错误信息供前端统一处理。

云函数调用封装示例

项目中封装了一个通用的云函数调用方法，方便前端统一调用并自动处理异常，示例代码如下：

/**
 * 通用云函数调用封装
 * @param name 云函数名
 * @param data 参数对象
 * @returns result 字段（自动抛出云函数异常）
 */
export async function callCloud<T>(name: string, data: Record<string, any> = {}): Promise<CloudResult<T>> {
  try {
    // 自动带上 token
    const token = getToken()
    if (token) {
      data.token = token
    }
    const res = await Taro.cloud.callFunction({ name, data })
    if ('result' in res) {
      const result = res.result as CloudResult<T>
      if (result.code !== 0) {
        throw new Error(result.message || '云函数调用失败')
      }
      return result
    }
    // 兼容极端情况
    return res as CloudResult<T>
  } catch (error) {
    throw error
  }
}

自动附带身份验证 token，确保云函数调用权限

云函数返回非 0 业务码时抛出异常，统一错误处理

兼容极端返回结构，增强健壮性

🌀 Vite → Webpack：构建系统迁移记录

背景

项目最初采用 Vite 构建，期望提升开发效率与热更新体验。但在 Taro 环境下接入 Redux Toolkit 后，出现关键问题：

状态注入失败：Provider 包裹组件后 useSelector 取不到任何状态
构建异常：createContext 无法正确导出，出现运行时错误
社区支持不足：官方和 GitHub issue 都未提供有效解决方案

迁移过程

将 Taro 配置文件中 compiler 从 vite 改为 webpack5
替换相关构建依赖和插件，移除 @tarojs/plugin-vite
重新配置 babel 和 postcss
重装依赖并调整构建脚本以适配 Webpack

迁移效果

Redux Toolkit 运行稳定，状态正常注入
构建输出符合预期，无样式缺失