如何将WooCommerce集成到Flutter应用实现商品自动同步

1 配置WooCommerce侧基础能力 #

• 登录WordPress后台，进入WooCommerce -> 设置 -> 高级 -> REST API，点击「添加密钥」，生成消费者密钥和消费者密码，权限选择读/写，保存两个值后续开发使用。
• 配置Webhook实现自动同步触发：在高级设置页切换到「Webhooks」分类，点击「添加Webhook」，分别创建product.created、product.updated、product.deleted三个事件的Webhook，对应商品新增、更新、删除的同步触发场景，递送URL填写你的数据中转服务接收地址（已接入Firebase可直接用Firebase Cloud Functions的触发地址），秘密字段填写自定义字符串用于后续请求合法性校验，状态选择启用。

2 搭建同步数据中转逻辑 #

• 优先推荐使用已接入的Firebase能力实现：编写Firebase Cloud Functions逻辑，接收WooCommerce的Webhook请求后，先校验请求签名与你设置的Webhook秘密是否匹配，验证通过后提取商品的有效字段（名称、价格、库存、图片、详情等UI需要的字段），写入Firebase Firestore或Realtime Database的商品集合中。
• 若暂时不会编写云函数，可选择轻量的轮询方案：在Flutter侧加定时轮询逻辑，定期拉取WooCommerce的商品列表接口，该方案无需开发服务端代码，缺点是同步会有延迟，适合前期快速测试。
  轮询方案简单示例代码：

  import 'package:dio/dio.dart';
  import 'dart:async';
  
  // 初始化定时器，每5分钟拉取一次商品列表
  Timer? _productSyncTimer;
  
  void startProductSync() {
    _productSyncTimer = Timer.periodic(const Duration(minutes: 5), (timer) async {
      final response = await Dio().get(
        'https://你的WordPress站点域名/wp-json/wc/v3/products',
        queryParameters: {
          'consumer_key': '你之前生成的WooCommerce消费者密钥',
          'consumer_secret': '你之前生成的WooCommerce消费者密码',
          'per_page': 100,
        },
      );
      // 拿到response.data的商品列表后，更新本地UI的商品数据即可
    });
  }
  
  // 页面销毁时释放定时器避免内存泄漏
  @override
  void dispose() {
    _productSyncTimer?.cancel();
    super.dispose();
  }
  

3 Flutter侧对接数据实现实时更新 #

• 引入dio库或WooCommerce官方Dart SDK，封装WooCommerce REST API请求逻辑，携带之前生成的消费者密钥、密码做身份校验，测试手动拉取商品数据是否正常。
• 若使用云函数+Firebase数据库的方案，直接调用Firebase官方SDK的snapshots()方法监听商品集合的实时变更，一旦监听到商品新增、更新、删除事件，直接替换本地商品列表数据、刷新UI即可，无需额外做主动拉取操作。
• 全链路测试：在WordPress后台新增/编辑/删除一个商品，验证Flutter应用内是否会自动同步对应的商品变动，流程跑通则需求完成。

新手常见问题排查 #

• 调用WooCommerce API报权限错误时，先检查REST API密钥的权限是否为读/写，确认WordPress是否开启了REST API的公开访问权限。
• 存储商品数据时仅保留UI需要的字段即可，减少数据库存储开销和网络传输体积。
• 云函数接收Webhook请求时可加简单的重试逻辑，避免网络波动导致单次同步失败。

内容的提问来源于stack exchange，提问作者Mohsin Memon