基于HarmonyOS Next的购物应用开发实战：从零构建电商平台

基于HarmonyOS Next的购物应用开发实战：从零构建电商平台

一、项目概述与环境搭建

在HarmonyOS Next中开发购物应用，我们将利用AppGallery Connect（AGC）的强大后端能力与ArkUI的声明式开发范式。核心功能包括：

• 用户认证（AGC认证服务）
• 商品数据管理（AGC云数据库）
• 购物车状态管理（AppStorage）
• 订单处理（AGC云函数）

环境准备：

1. 安装DevEco Studio 4.1+

2. 在AGC控制台创建项目并启用：

   • 认证服务（手机号/邮箱登录）
   • 云数据库（商品数据存储）
   • 云函数（订单处理）

二、用户认证模块实现

使用AGC认证服务实现安全登录：

// src/main/ets/pages/LoginPage.ets
import { Index } from '@ohos/agconnect/auth';

@Entry
@Component
struct LoginPage {
  @State phone: string = '';
  @State verifyCode: string = '';

  // 发送验证码
  sendCode() {
    const request = new Index.VerifyCodeSettings(Index.VerifyCodeAction.LOGIN, 30);
    Index.AuthService.sendVerifyCode(this.phone, request)
      .then(() => { console.log('验证码已发送'); })
      .catch(err => { console.error('发送失败:', err); });
  }

  // 手机号+验证码登录
  loginWithPhone() {
    Index.AuthService.signIn(this.phone, this.verifyCode)
      .then(user => {
        console.log('登录成功:', user.uid);
        AppStorage.setOrCreate('isLogin', true);
        router.replaceUrl({ url: 'pages/HomePage' });
      })
      .catch(err => { console.error('登录失败:', err); });
  }

  build() {
    Column() {
      TextInput({ placeholder: '输入手机号' })
        .onChange(value => this.phone = value)
      
      TextInput({ placeholder: '输入验证码' })
        .onChange(value => this.verifyCode = value)
      
      Button('获取验证码').onClick(() => this.sendCode())
      Button('登录').onClick(() => this.loginWithPhone())
    }
  }
}

三、商品数据管理

通过AGC云数据库获取商品信息：

// src/main/ets/model/ProductModel.ets
import cloud from '@ohos/agconnect/cloud';
const db = cloud.database();

export class ProductService {
  // 获取商品列表
  static async getProducts(): Promise<Array<Product>> {
    try {
      const result = await db.collection('products')
        .orderBy('sales', 'desc')
        .limit(20)
        .get();
      return result.data;
    } catch (err) {
      console.error('获取商品失败:', err);
      return [];
    }
  }

  // 商品数据结构
  interface Product {
    id: string;
    name: string;
    price: number;
    image: string;
    stock: number;
  }
}

四、购物车功能开发

使用AppStorage实现全局购物车状态管理：

// src/main/ets/model/CartModel.ets
class CartItem {
  productId: string;
  count: number;
  price: number;
}

// 创建响应式购物车管理器
class CartManager {
  @State @Watch('onCartChange') items: Map<string, CartItem> = new Map();

  // 添加商品到购物车
  addToCart(product: ProductModel.Product) {
    const existItem = this.items.get(product.id);
    if (existItem) {
      existItem.count++;
    } else {
      this.items.set(product.id, {
        productId: product.id,
        count: 1,
        price: product.price
      });
    }
  }

  // 购物车变化监听
  onCartChange() {
    AppStorage.setOrCreate('cartTotal', this.totalPrice);
  }

  // 计算总价
  get totalPrice(): number {
    let total = 0;
    this.items.forEach(item => {
      total += item.count * item.price;
    });
    return total;
  }
}

// 全局购物车实例
export const cartManager = new CartManager();

五、订单生成与云函数调用

通过AGC云函数处理订单逻辑：

// src/main/ets/model/OrderModel.ets
import cloud from '@ohos/agconnect/cloud';

export class OrderService {
  // 创建订单
  static async createOrder(cartItems: Array<CartItem>) {
    const params = {
      items: cartItems,
      userId: AppStorage.get('userId'),
      timestamp: new Date().getTime()
    };

    try {
      const result = await cloud.function('createOrder')
        .call(params);
        
      if (result.code === 0) {
        console.log('订单创建成功:', result.orderId);
        cartManager.clearCart(); // 清空购物车
        return true;
      }
      return false;
    } catch (err) {
      console.error('订单创建失败:', err);
      return false;
    }
  }
}

六、商品列表与详情页实现

// src/main/ets/pages/ProductListPage.ets
import { ProductService } from '../model/ProductModel';
import { cartManager } from '../model/CartModel';

@Entry
@Component
struct ProductListPage {
  @State products: Array<ProductService.Product> = [];

  aboutToAppear() {
    ProductService.getProducts().then(data => {
      this.products = data;
    });
  }

  build() {
    List() {
      ForEach(this.products, item => {
        ListItem() {
          ProductItem({ product: item })
        }
      })
    }
  }
}

@Component
struct ProductItem {
  @Prop product: ProductService.Product;

  build() {
    Row() {
      Image(this.product.image)
        .width(100)
        .height(100)
      
      Column() {
        Text(this.product.name)
          .fontSize(18)
        Text(`¥${this.product.price}`)
          .fontColor(Color.Red)
      }

      Button('加入购物车')
        .onClick(() => cartManager.addToCart(this.product))
    }
  }
}

七、购物车页面开发

// src/main/ets/pages/CartPage.ets
import { cartManager } from '../model/CartManager';
import { OrderService } from '../model/OrderModel';

@Entry
@Component
struct CartPage {
  @State @Link cartItems: Array<CartItem> = [];

  build() {
    Column() {
      List() {
        ForEach(this.cartItems, item => {
          ListItem() {
            CartItemView({ item })
          }
        })
      }

      Text(`总计：¥${cartManager.totalPrice}`)
        .fontSize(20)
        .margin(20)

      Button('结算订单')
        .onClick(() => this.checkout())
    }
  }

  async checkout() {
    const success = await OrderService.createOrder(this.cartItems);
    if (success) {
      router.replaceUrl({ url: 'pages/OrderSuccess' });
    }
  }
}

@Component
struct CartItemView {
  @Prop item: CartItem;

  build() {
    Row() {
      Text(this.item.productName)
      Text(`x${this.item.count}`)
      Text(`¥${this.item.price * this.item.count}`)
    }
  }
}

八、云函数示例（Node.js）

在AGC云函数中实现订单创建逻辑：

// cloudfunctions/createOrder/index.js
exports.handler = async (req, res) => {
  const db = agconnect.database();
  const orderCollection = db.collection('orders');
  
  // 验证库存
  for (const item of req.body.items) {
    const product = await db.collection('products')
      .doc(item.productId)
      .get();
    
    if (product.stock < item.count) {
      return res.status(400).send({ 
        code: 1001, 
        message: `${product.name}库存不足` 
      });
    }
  }

  // 创建订单
  const orderData = {
    userId: req.body.userId,
    items: req.body.items,
    total: calculateTotal(req.body.items),
    status: 'unpaid',
    createTime: new Date()
  };

  const result = await orderCollection.add(orderData);
  
  // 扣减库存
  for (const item of req.body.items) {
    await db.collection('products')
      .doc(item.productId)
      .update({
        stock: Field.increment(-item.count),
        sales: Field.increment(item.count)
      });
  }

  return res.send({ 
    code: 0, 
    orderId: result.id 
  });
};

九、性能优化技巧

1. 数据缓存：使用HarmonyOS数据管理模块缓存商品数据

   const cachedProducts = DataCache.get('products');
   if (cachedProducts) {
     this.products = cachedProducts;
   } else {
     // 从云端获取...
   }

2. 图片优化：

   Image(this.product.image)
     .objectFit(ImageFit.Contain)
     .cached(true) // 启用缓存
     .syncLoad(true) // 同步加载提升体验

3. 按需加载：

   LazyForEach(this.products, (item: Product) => {
     ProductItem({ product: item })
   })

十、项目扩展方向

1. 集成支付SDK实现微信/支付宝支付
2. 使用AGC的AB测试优化商品展示策略
3. 通过分布式能力实现跨设备购物车同步
4. 集成推送服务实现订单状态通知

最佳实践建议：

• 使用TypeScript强类型约束提升代码质量
• 模块化设计（分离UI、业务逻辑、数据层）
• 错误边界处理所有网络请求
• 关键操作添加埋点监控

本项目完整代码已适配HarmonyOS Next特性，包括：

• 基于Stage模型的组件化开发
• 声明式UI的精确状态管理
• 统一渲染管线优化性能
• 原生ArkTS编译器的高效执行

通过本教程，您已掌握使用HarmonyOS Next和AGC开发完整购物应用的核心技能。实际部署时请根据业务需求扩展支付、推荐算法等模块，AGC控制台提供实时监控和性能分析工具助您持续优化应用体验。