鸿蒙电商购物车实战：用户管理、商品列表与购物车实现

2. 用户登录实现

登录逻辑与注册类似，但增加了'忘记密码'的处理。同样建议封装为工具类。

import user from '@ohos/user';

export class UserLoginUtil {
  private static instance: UserLoginUtil | null = null;
  private userHelper: user.UserHelper | null = null;

  static getInstance(): UserLoginUtil {
    if (!UserLoginUtil.instance) {
      UserLoginUtil.instance = new UserLoginUtil();
    }
    return UserLoginUtil.instance;
  }

  async init(): Promise<void> {
    if (!this.userHelper) {
      this.userHelper = user.createUserHelper();
    }
  }

  async login(email: string, password: string): Promise<user.UserLoginResult> {
    if (!this.userHelper) return null;
    const result = await this.userHelper.login(email, password);
    return result;
  }

  async forgetPassword(email: string): Promise<user.ForgetPasswordResult> {
    if (!this.userHelper) return null;
    const result = await this.userHelper.forgetPassword(email);
    return result;
  }
}

页面中需注意登录成功后跳转至首页，并处理异常提示。

3. 用户信息管理

允许用户修改个人资料及密码。获取当前用户信息后，填充表单，提交时更新后端或本地存储。

import user from '@ohos/user';

export class UserInformationManagementUtil {
  private static instance: UserInformationManagementUtil | null = null;
  private userHelper: user.UserHelper | null = null;

  static getInstance(): UserInformationManagementUtil {
    if (!UserInformationManagementUtil.instance) {
      UserInformationManagementUtil.instance = new UserInformationManagementUtil();
    }
    return UserInformationManagementUtil.instance;
  }

  async init(): Promise<void> {
    if (!this.userHelper) {
      this.userHelper = user.createUserHelper();
    }
  }

  async getUserInformation(): Promise<user.UserInformation> {
    if (!this.userHelper) return null;
    const result = await this.userHelper.getUserInformation();
    return result;
  }

  async modifyUserInformation(information: user.UserInformation): Promise<user.ModifyUserInformationResult> {
    if (!this.userHelper) return null;
    const result = await this.userHelper.modifyUserInformation(information);
    return result;
  }

  async modifyPassword(oldPassword: string, newPassword: string): Promise<user.ModifyPasswordResult> {
    if (!this.userHelper) return null;
    const result = await this.userHelper.modifyPassword(oldPassword, newPassword);
    return result;
  }
}

三、商品列表实战

1. 商品列表与搜索

商品列表页需要支持分页展示和关键词搜索。利用 ListComponent 进行高效渲染。

import product from '@ohos/product';

export class ProductListUtil {
  private static instance: ProductListUtil | null = null;
  private productHelper: product.ProductHelper | null = null;

  static getInstance(): ProductListUtil {
    if (!ProductListUtil.instance) {
      ProductListUtil.instance = new ProductListUtil();
    }
    return ProductListUtil.instance;
  }

  async init(): Promise<void> {
    if (!this.productHelper) {
      this.productHelper = product.createProductHelper();
    }
  }

  async getProductList(): Promise<Array<product.Product>> {
    if (!this.productHelper) return [];
    const result = await this.productHelper.getProductList();
    return result;
  }

  async searchProduct(keyword: string): Promise<Array<product.Product>> {
    if (!this.productHelper) return [];
    const result = await this.productHelper.searchProduct(keyword);
    return result;
  }
}

页面中监听输入框变化，触发搜索请求，并刷新列表数据。

2. 商品详情

详情页展示商品图片、描述、价格，并提供数量选择器。点击'添加到购物车'时，调用购物车工具类。

import { ProductDetailUtil } from '../utils/ProductDetailUtil';
import { CartManagementUtil } from '../utils/CartManagementUtil';

@Entry
@Component
struct ProductDetailPage {
  @State product: product.Product | null = null;
  @State quantity: number = 1;
  @State productId: number = 0;

  build() {
    Column({ space: 16 }) {
      if (this.product) {
        Image(this.product.avatarUrl).width('100%').height(240).objectFit(ImageFit.Cover).borderRadius(8);
        Text(this.product.name).fontSize(18).fontWeight(FontWeight.Bold).textColor('#000000');
        Text(this.product.description).fontSize(14).textColor('#666666').maxLines(5).textOverflow({ overflow: TextOverflow.Ellipsis });
        Text(`¥${this.product.price}`).fontSize(18).fontWeight(FontWeight.Bold).textColor('#FF0000');
        Row({ space: 16 }) {
          Text('数量：').fontSize(14).textColor('#000000');
          ButtonComponent({ text: '-', onClick: () => { if (this.quantity > 1) { this.quantity--; } }, disabled: this.quantity <= 1 });
          Text(`${this.quantity}`).fontSize(14).textColor('#000000');
          ButtonComponent({ text: '+', onClick: () => { this.quantity++; }, disabled: this.quantity >= 10 });
        }.width('100%').height('auto').justifyContent(FlexAlign.Center);
        ButtonComponent({ text: '添加到购物车', onClick: async () => { await this.addToCart(); }, disabled: !this.product });
      }
    }.width('100%').height('100%').padding(16).backgroundColor('#F5F5F5');
  }

  aboutToAppear() {
    ProductDetailUtil.getInstance().init();
    CartManagementUtil.getInstance().init();
    this.getProductDetail();
  }

  async getProductDetail(): Promise<void> {
    const params = router.getParams() as { productId: number };
    this.productId = params.productId;
    this.product = await ProductDetailUtil.getInstance().getProductDetail(this.productId);
  }

  async addToCart(): Promise<void> {
    const result = await CartManagementUtil.getInstance().addToCart(this.productId, this.quantity);
    if (result.success) {
      promptAction.showToast({ message: '添加到购物车成功' });
    } else {
      promptAction.showToast({ message: '添加到购物车失败' });
    }
  }
}

四、购物车管理实战

购物车是电商的核心，涉及增删改查操作。工具类需封装所有持久化逻辑。

import cart from '@ohos/cart';

export class CartManagementUtil {
  private static instance: CartManagementUtil | null = null;
  private cartHelper: cart.CartHelper | null = null;

  static getInstance(): CartManagementUtil {
    if (!CartManagementUtil.instance) {
      CartManagementUtil.instance = new CartManagementUtil();
    }
    return CartManagementUtil.instance;
  }

  async init(): Promise<void> {
    if (!this.cartHelper) {
      this.cartHelper = cart.createCartHelper();
    }
  }

  async getCartList(): Promise<Array<cart.CartItem>> {
    if (!this.cartHelper) return [];
    const result = await this.cartHelper.getCartList();
    return result;
  }

  async addToCart(productId: number, quantity: number): Promise<cart.AddToCartResult> {
    if (!this.cartHelper) return null;
    const result = await this.cartHelper.addToCart(productId, quantity);
    return result;
  }

  async modifyCartItemQuantity(cartItemId: number, quantity: number): Promise<cart.ModifyCartItemQuantityResult> {
    if (!this.cartHelper) return null;
    const result = await this.cartHelper.modifyCartItemQuantity(cartItemId, quantity);
    return result;
  }

  async deleteCartItem(cartItemId: number): Promise<cart.DeleteCartItemResult> {
    if (!this.cartHelper) return null;
    const result = await this.cartHelper.deleteCartItem(cartItemId);
    return result;
  }

  async clearCart(): Promise<cart.ClearCartResult> {
    if (!this.cartHelper) return null;
    const result = await this.cartHelper.clearCart();
    return result;
  }
}

购物车页面通过遍历列表渲染商品项，每个项提供加减按钮和删除按钮。操作完成后重新拉取列表以同步状态。

五、配置与部署

1. 配置文件修改

在 entry/src/main/module.json5 中确保声明了必要的权限和页面路由。

{
  "module": {
    "requestPermissions": [
      // ... 添加必要权限
    ],
    "abilities": [
      // ... 能力声明
    ],
    "widgets": [
      // ... 组件声明
    ],
    "pages": [
      // ... 页面路径声明
    ]
  }
}

2. 项目部署

在 DevEco Studio 中点击 Build → Build HAP 编译项目。将生成的 HAP 文件部署到真机或模拟器进行测试。重点验证用户注册登录流程是否顺畅，商品能否正常加入购物车，以及数量变更是否正确反映。

六、效果验证

完成开发后，请执行以下检查清单：

• 用户能否通过邮箱/手机号注册并登录？
• 登录后能否查看和管理个人信息？
• 商品列表页能否正常显示并支持搜索？
• 商品详情页能否正确跳转并添加商品？
• 购物车内能否增减数量、删除商品及清空购物车？

确认无误后，即可进入下一阶段的功能迭代。