鸿蒙APP开发从入门到精通：鸿蒙电商购物车全栈项目——用户管理、商品列表、购物车

Ne0inhk

— 15 min read
鸿蒙APP开发从入门到精通：鸿蒙电商购物车全栈项目——用户管理、商品列表、购物车

《鸿蒙APP开发从入门到精通》第13篇：鸿蒙电商购物车全栈项目——用户管理、商品列表、购物车 🛒📱

在这里插入图片描述

内容承接与核心价值

这是《鸿蒙APP开发从入门到精通》的第13篇——用户管理、商品列表、购物车篇，100%承接第12篇的「运维监控、生态运营与专属变现」项目架构，完成鸿蒙电商购物车全栈项目的基础功能实现。

学习目标：

  • 掌握用户管理的设计与实现；
  • 实现用户注册、登录、用户信息管理；
  • 理解商品列表的设计与实现；
  • 实现商品列表、商品详情、商品搜索；
  • 掌握购物车管理的设计与实现；
  • 实现添加商品到购物车、修改购物车商品数量、删除购物车商品；
  • 优化用户管理、商品列表、购物车的用户体验（响应速度、数据安全、用户反馈）。

学习重点：

  • 鸿蒙APP用户管理的开发流程；
  • 用户管理的分类与使用场景；
  • 商品列表的设计与实现；
  • 购物车管理的设计与实现。

一、 用户管理基础 🎯

1.1 用户管理定义

用户管理是指对应用的用户进行管理，主要包括以下方面：

  • 用户注册：用户可以通过手机号、邮箱等方式注册；
  • 用户登录：用户可以通过手机号、邮箱等方式登录；
  • 用户信息管理：用户可以管理自己的个人信息；
  • 用户权限管理：管理用户的权限。

1.2 用户管理架构

用户管理采用分层架构，由以下部分组成：

  • 用户服务层：负责用户的业务逻辑；
  • 用户数据层：负责用户的数据存储与管理；
  • 用户接口层：负责用户的接口设计与实现；
  • 用户展示层：负责用户的界面渲染与交互。

二、 用户管理实战 🛠️

2.1 实战目标

基于第12篇的「MyFirstHarmonyApp」项目架构，实现以下功能：

  • 用户注册：用户可以通过手机号、邮箱等方式注册；
  • 用户登录：用户可以通过手机号、邮箱等方式登录；
  • 用户信息管理：用户可以管理自己的个人信息。

2.2 🔧 用户注册实现

1. 用户注册工具类

⌨️ entry/src/main/ets/utils/UserRegistrationUtil.ets

import user from'@ohos.user';// 用户注册工具类exportclassUserRegistrationUtil{privatestatic instance: UserRegistrationUtil |null=null;private userHelper: user.UserHelper |null=null;// 单例模式staticgetInstance(): UserRegistrationUtil {if(!UserRegistrationUtil.instance){ UserRegistrationUtil.instance =newUserRegistrationUtil();}return UserRegistrationUtil.instance;}// 初始化用户注册asyncinit():Promise<void>{if(!this.userHelper){this.userHelper = user.createUserHelper();}}// 用户注册asyncregister(email:string, password:string):Promise<user.UserRegistrationResult>{if(!this.userHelper){returnnull;}const result =awaitthis.userHelper.register(email, password);return result;}// 发送验证码asyncsendVerificationCode(email:string):Promise<user.SendVerificationCodeResult>{if(!this.userHelper){returnnull;}const result =awaitthis.userHelper.sendVerificationCode(email);return result;}}
2. 用户注册应用

⌨️ entry/src/main/ets/pages/RegistrationPage.ets

import{ UserRegistrationUtil }from'../utils/UserRegistrationUtil';@Entry@Component struct RegistrationPage {@State email:string='';@State password:string='';@State verificationCode:string='';build(){Column({ space:16}){InputComponent({ placeholder:'请输入邮箱', value:this.email,onChange:(value:string)=>{this.email = value;}, type: InputType.Email });InputComponent({ placeholder:'请输入密码', value:this.password,onChange:(value:string)=>{this.password = value;}, type: InputType.Password });InputComponent({ placeholder:'请输入验证码', value:this.verificationCode,onChange:(value:string)=>{this.verificationCode = value;}, type: InputType.Normal });ButtonComponent({ text:'发送验证码',onClick:async()=>{awaitthis.sendVerificationCode();}, disabled:!this.email });ButtonComponent({ text:'注册',onClick:async()=>{awaitthis.register();}, disabled:!this.email ||!this.password ||!this.verificationCode });}.width('100%').height('100%').padding(16).backgroundColor('#F5F5F5');}aboutToAppear(){// 初始化用户注册 UserRegistrationUtil.getInstance().init();}asyncsendVerificationCode():Promise<void>{const result =await UserRegistrationUtil.getInstance().sendVerificationCode(this.email);if(result.success){ promptAction.showToast({ message:'验证码发送成功'});}else{ promptAction.showToast({ message:'验证码发送失败'});}}asyncregister():Promise<void>{const result =await UserRegistrationUtil.getInstance().register(this.email,this.password);if(result.success){ promptAction.showToast({ message:'注册成功'}); router.pushUrl({ url:'/pages/LoginPage'});}else{ promptAction.showToast({ message:'注册失败'});}}}

2.3 🔧 用户登录实现

1. 用户登录工具类

⌨️ entry/src/main/ets/utils/UserLoginUtil.ets

import user from'@ohos.user';// 用户登录工具类exportclassUserLoginUtil{privatestatic instance: UserLoginUtil |null=null;private userHelper: user.UserHelper |null=null;// 单例模式staticgetInstance(): UserLoginUtil {if(!UserLoginUtil.instance){ UserLoginUtil.instance =newUserLoginUtil();}return UserLoginUtil.instance;}// 初始化用户登录asyncinit():Promise<void>{if(!this.userHelper){this.userHelper = user.createUserHelper();}}// 用户登录asynclogin(email:string, password:string):Promise<user.UserLoginResult>{if(!this.userHelper){returnnull;}const result =awaitthis.userHelper.login(email, password);return result;}// 忘记密码asyncforgetPassword(email:string):Promise<user.ForgetPasswordResult>{if(!this.userHelper){returnnull;}const result =awaitthis.userHelper.forgetPassword(email);return result;}}
2. 用户登录应用

⌨️ entry/src/main/ets/pages/LoginPage.ets

import{ UserLoginUtil }from'../utils/UserLoginUtil';@Entry@Component struct LoginPage {@State email:string='';@State password:string='';build(){Column({ space:16}){InputComponent({ placeholder:'请输入邮箱', value:this.email,onChange:(value:string)=>{this.email = value;}, type: InputType.Email });InputComponent({ placeholder:'请输入密码', value:this.password,onChange:(value:string)=>{this.password = value;}, type: InputType.Password });ButtonComponent({ text:'登录',onClick:async()=>{awaitthis.login();}, disabled:!this.email ||!this.password });Text('忘记密码').fontSize(14).textColor('#666666').onClick(()=>{this.forgetPassword();});}.width('100%').height('100%').padding(16).backgroundColor('#F5F5F5');}aboutToAppear(){// 初始化用户登录 UserLoginUtil.getInstance().init();}asynclogin():Promise<void>{const result =await UserLoginUtil.getInstance().login(this.email,this.password);if(result.success){ promptAction.showToast({ message:'登录成功'}); router.pushUrl({ url:'/pages/HomePage'});}else{ promptAction.showToast({ message:'登录失败'});}}asyncforgetPassword():Promise<void>{const result =await UserLoginUtil.getInstance().forgetPassword(this.email);if(result.success){ promptAction.showToast({ message:'密码重置邮件已发送'});}else{ promptAction.showToast({ message:'密码重置邮件发送失败'});}}}

2.4 🔧 用户信息管理实现

1. 用户信息管理工具类

⌨️ entry/src/main/ets/utils/UserInformationManagementUtil.ets

import user from'@ohos.user';// 用户信息管理工具类exportclassUserInformationManagementUtil{privatestatic instance: UserInformationManagementUtil |null=null;private userHelper: user.UserHelper |null=null;// 单例模式staticgetInstance(): UserInformationManagementUtil {if(!UserInformationManagementUtil.instance){ UserInformationManagementUtil.instance =newUserInformationManagementUtil();}return UserInformationManagementUtil.instance;}// 初始化用户信息管理asyncinit():Promise<void>{if(!this.userHelper){this.userHelper = user.createUserHelper();}}// 获取用户信息asyncgetUserInformation():Promise<user.UserInformation>{if(!this.userHelper){returnnull;}const result =awaitthis.userHelper.getUserInformation();return result;}// 修改用户信息asyncmodifyUserInformation(information: user.UserInformation):Promise<user.ModifyUserInformationResult>{if(!this.userHelper){returnnull;}const result =awaitthis.userHelper.modifyUserInformation(information);return result;}// 修改密码asyncmodifyPassword(oldPassword:string, newPassword:string):Promise<user.ModifyPasswordResult>{if(!this.userHelper){returnnull;}const result =awaitthis.userHelper.modifyPassword(oldPassword, newPassword);return result;}}
2. 用户信息管理应用

⌨️ entry/src/main/ets/pages/UserInformationPage.ets

import{ UserInformationManagementUtil }from'../utils/UserInformationManagementUtil';@Entry@Component struct UserInformationPage {@State userInformation: user.UserInformation |null=null;@State name:string='';@State avatarUrl:string='';@State oldPassword:string='';@State newPassword:string='';build(){Column({ space:16}){if(this.userInformation){Text(`用户ID：${this.userInformation.userId}`).fontSize(14).textColor('#666666');InputComponent({ placeholder:'请输入姓名', value:this.name,onChange:(value:string)=>{this.name = value;}, type: InputType.Normal });InputComponent({ placeholder:'请输入头像URL', value:this.avatarUrl,onChange:(value:string)=>{this.avatarUrl = value;}, type: InputType.Normal });ButtonComponent({ text:'修改用户信息',onClick:async()=>{awaitthis.modifyUserInformation();}, disabled:!this.name ||!this.avatarUrl });InputComponent({ placeholder:'请输入旧密码', value:this.oldPassword,onChange:(value:string)=>{this.oldPassword = value;}, type: InputType.Password });InputComponent({ placeholder:'请输入新密码', value:this.newPassword,onChange:(value:string)=>{this.newPassword = value;}, type: InputType.Password });ButtonComponent({ text:'修改密码',onClick:async()=>{awaitthis.modifyPassword();}, disabled:!this.oldPassword ||!this.newPassword });}}.width('100%').height('100%').padding(16).backgroundColor('#F5F5F5');}aboutToAppear(){// 初始化用户信息管理 UserInformationManagementUtil.getInstance().init();// 获取用户信息this.getUserInformation();}asyncgetUserInformation():Promise<void>{this.userInformation =await UserInformationManagementUtil.getInstance().getUserInformation();this.name =this.userInformation?.name ??'';this.avatarUrl =this.userInformation?.avatarUrl ??'';}asyncmodifyUserInformation():Promise<void>{const result =await UserInformationManagementUtil.getInstance().modifyUserInformation({ userId:this.userInformation?.userId ??0, name:this.name, avatarUrl:this.avatarUrl, email:this.userInformation?.email ??''});if(result.success){ promptAction.showToast({ message:'修改用户信息成功'});this.getUserInformation();}else{ promptAction.showToast({ message:'修改用户信息失败'});}}asyncmodifyPassword():Promise<void>{const result =await UserInformationManagementUtil.getInstance().modifyPassword(this.oldPassword,this.newPassword);if(result.success){ promptAction.showToast({ message:'修改密码成功'});this.oldPassword ='';this.newPassword ='';}else{ promptAction.showToast({ message:'修改密码失败'});}}}

三、 商品列表实战 🛠️

3.1 实战目标

基于第12篇的「MyFirstHarmonyApp」项目架构，实现以下功能：

  • 商品列表：显示商品列表；
  • 商品详情：显示商品详情；
  • 商品搜索：搜索商品。

3.2 🔧 商品列表实现

1. 商品列表工具类

⌨️ entry/src/main/ets/utils/ProductListUtil.ets

import product from'@ohos.product';// 商品列表工具类exportclassProductListUtil{privatestatic instance: ProductListUtil |null=null;private productHelper: product.ProductHelper |null=null;// 单例模式staticgetInstance(): ProductListUtil {if(!ProductListUtil.instance){ ProductListUtil.instance =newProductListUtil();}return ProductListUtil.instance;}// 初始化商品列表asyncinit():Promise<void>{if(!this.productHelper){this.productHelper = product.createProductHelper();}}// 获取商品列表asyncgetProductList():Promise<Array<product.Product>>{if(!this.productHelper){return[];}const result =awaitthis.productHelper.getProductList();return result;}// 搜索商品asyncsearchProduct(keyword:string):Promise<Array<product.Product>>{if(!this.productHelper){return[];}const result =awaitthis.productHelper.searchProduct(keyword);return result;}}
2. 商品列表应用

⌨️ entry/src/main/ets/pages/ProductListPage.ets

import{ ProductListUtil }from'../utils/ProductListUtil';@Entry@Component struct ProductListPage {@State productList:Array<product.Product>=[];@State searchKeyword:string='';build(){Column({ space:16}){InputComponent({ placeholder:'请输入搜索关键词', value:this.searchKeyword,onChange:(value:string)=>{this.searchKeyword = value;}, type: InputType.Normal });ButtonComponent({ text:'搜索',onClick:async()=>{awaitthis.searchProduct();}, disabled:!this.searchKeyword });ListComponent({ data:this.productList,renderItem:(item: product.Product, index:number)=>{Row({ space:16}){Image(item.avatarUrl).width(80).height(80).objectFit(ImageFit.Cover).borderRadius(8);Column({ space:8}){Text(item.name).fontSize(16).fontWeight(FontWeight.Bold).textColor('#000000');Text(item.description).fontSize(14).textColor('#666666').maxLines(2).textOverflow({ overflow: TextOverflow.Ellipsis });Text(`¥${item.price}`).fontSize(16).fontWeight(FontWeight.Bold).textColor('#FF0000');}.layoutWeight(1);ButtonComponent({ text:'查看详情',onClick:()=>{ router.pushUrl({ url:'/pages/ProductDetailPage', params:{ productId: item.productId }});}, disabled:false});}.width('100%').height('auto').padding(16).backgroundColor('#FFFFFF').borderRadius(8).margin({ bottom:8});},onItemClick:(item: product.Product, index:number)=>{ router.pushUrl({ url:'/pages/ProductDetailPage', params:{ productId: item.productId }});}});}.width('100%').height('100%').padding(16).backgroundColor('#F5F5F5');}aboutToAppear(){// 初始化商品列表 ProductListUtil.getInstance().init();// 获取商品列表this.getProductList();}asyncgetProductList():Promise<void>{this.productList =await ProductListUtil.getInstance().getProductList();}asyncsearchProduct():Promise<void>{this.productList =await ProductListUtil.getInstance().searchProduct(this.searchKeyword);}}

3.3 🔧 商品详情实现

1. 商品详情工具类

⌨️ entry/src/main/ets/utils/ProductDetailUtil.ets

import product from'@ohos.product';// 商品详情工具类exportclassProductDetailUtil{privatestatic instance: ProductDetailUtil |null=null;private productHelper: product.ProductHelper |null=null;// 单例模式staticgetInstance(): ProductDetailUtil {if(!ProductDetailUtil.instance){ ProductDetailUtil.instance =newProductDetailUtil();}return ProductDetailUtil.instance;}// 初始化商品详情asyncinit():Promise<void>{if(!this.productHelper){this.productHelper = product.createProductHelper();}}// 获取商品详情asyncgetProductDetail(productId:number):Promise<product.Product>{if(!this.productHelper){returnnull;}const result =awaitthis.productHelper.getProductDetail(productId);return result;}// 添加到购物车asyncaddToCart(productId:number, quantity:number):Promise<product.AddToCartResult>{if(!this.productHelper){returnnull;}const result =awaitthis.productHelper.addToCart(productId, quantity);return result;}}
2. 商品详情应用

⌨️ entry/src/main/ets/pages/ProductDetailPage.ets

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()=>{awaitthis.addToCart();}, disabled:!this.product });}}.width('100%').height('100%').padding(16).backgroundColor('#F5F5F5');}aboutToAppear(){// 初始化商品详情 ProductDetailUtil.getInstance().init();// 初始化购物车管理 CartManagementUtil.getInstance().init();// 获取商品详情this.getProductDetail();}asyncgetProductDetail():Promise<void>{const params = router.getParams()as{ productId:number};this.productId = params.productId;this.product =await ProductDetailUtil.getInstance().getProductDetail(this.productId);}asyncaddToCart():Promise<void>{const result =await CartManagementUtil.getInstance().addToCart(this.productId,this.quantity);if(result.success){ promptAction.showToast({ message:'添加到购物车成功'});}else{ promptAction.showToast({ message:'添加到购物车失败'});}}}

四、 购物车管理实战 🛠️

4.1 实战目标

基于第12篇的「MyFirstHarmonyApp」项目架构，实现以下功能：

  • 购物车列表：显示购物车列表；
  • 添加商品到购物车：添加商品到购物车；
  • 修改购物车商品数量：修改购物车商品数量；
  • 删除购物车商品：删除购物车商品。

4.2 🔧 购物车管理工具类

⌨️ entry/src/main/ets/utils/CartManagementUtil.ets

import cart from'@ohos.cart';// 购物车管理工具类exportclassCartManagementUtil{privatestatic instance: CartManagementUtil |null=null;private cartHelper: cart.CartHelper |null=null;// 单例模式staticgetInstance(): CartManagementUtil {if(!CartManagementUtil.instance){ CartManagementUtil.instance =newCartManagementUtil();}return CartManagementUtil.instance;}// 初始化购物车管理asyncinit():Promise<void>{if(!this.cartHelper){this.cartHelper = cart.createCartHelper();}}// 获取购物车列表asyncgetCartList():Promise<Array<cart.CartItem>>{if(!this.cartHelper){return[];}const result =awaitthis.cartHelper.getCartList();return result;}// 添加商品到购物车asyncaddToCart(productId:number, quantity:number):Promise<cart.AddToCartResult>{if(!this.cartHelper){returnnull;}const result =awaitthis.cartHelper.addToCart(productId, quantity);return result;}// 修改购物车商品数量asyncmodifyCartItemQuantity(cartItemId:number, quantity:number):Promise<cart.ModifyCartItemQuantityResult>{if(!this.cartHelper){returnnull;}const result =awaitthis.cartHelper.modifyCartItemQuantity(cartItemId, quantity);return result;}// 删除购物车商品asyncdeleteCartItem(cartItemId:number):Promise<cart.DeleteCartItemResult>{if(!this.cartHelper){returnnull;}const result =awaitthis.cartHelper.deleteCartItem(cartItemId);return result;}// 清空购物车asyncclearCart():Promise<cart.ClearCartResult>{if(!this.cartHelper){returnnull;}const result =awaitthis.cartHelper.clearCart();return result;}}

4.3 🔧 购物车应用

⌨️ entry/src/main/ets/pages/CartPage.ets

import{ CartManagementUtil }from'../utils/CartManagementUtil';@Entry@Component struct CartPage {@State cartList:Array<cart.CartItem>=[];build(){Column({ space:16}){ListComponent({ data:this.cartList,renderItem:(item: cart.CartItem, index:number)=>{Row({ space:16}){Image(item.avatarUrl).width(80).height(80).objectFit(ImageFit.Cover).borderRadius(8);Column({ space:8}){Text(item.name).fontSize(16).fontWeight(FontWeight.Bold).textColor('#000000');Text(item.description).fontSize(14).textColor('#666666').maxLines(2).textOverflow({ overflow: TextOverflow.Ellipsis });Text(`¥${item.price}`).fontSize(16).fontWeight(FontWeight.Bold).textColor('#FF0000');}.layoutWeight(1);Row({ space:8}){ButtonComponent({ text:'-',onClick:async()=>{awaitthis.modifyCartItemQuantity(item.cartItemId, item.quantity -1);}, disabled: item.quantity <=1});Text(`${item.quantity}`).fontSize(14).textColor('#000000');ButtonComponent({ text:'+',onClick:async()=>{awaitthis.modifyCartItemQuantity(item.cartItemId, item.quantity +1);}, disabled: item.quantity >=10});}.width('auto').height('auto');ButtonComponent({ text:'删除',onClick:async()=>{awaitthis.deleteCartItem(item.cartItemId);}, disabled:false});}.width('100%').height('auto').padding(16).backgroundColor('#FFFFFF').borderRadius(8).margin({ bottom:8});},onItemClick:(item: cart.CartItem, index:number)=>{ router.pushUrl({ url:'/pages/ProductDetailPage', params:{ productId: item.productId }});}});ButtonComponent({ text:'清空购物车',onClick:async()=>{awaitthis.clearCart();}, disabled:this.cartList.length ===0});}.width('100%').height('100%').padding(16).backgroundColor('#F5F5F5');}aboutToAppear(){// 初始化购物车管理 CartManagementUtil.getInstance().init();// 获取购物车列表this.getCartList();}asyncgetCartList():Promise<void>{this.cartList =await CartManagementUtil.getInstance().getCartList();}asyncmodifyCartItemQuantity(cartItemId:number, quantity:number):Promise<void>{const result =await CartManagementUtil.getInstance().modifyCartItemQuantity(cartItemId, quantity);if(result.success){this.getCartList();}else{ promptAction.showToast({ message:'修改购物车商品数量失败'});}}asyncdeleteCartItem(cartItemId:number):Promise<void>{const result =await CartManagementUtil.getInstance().deleteCartItem(cartItemId);if(result.success){this.getCartList();}else{ promptAction.showToast({ message:'删除购物车商品失败'});}}asyncclearCart():Promise<void>{const result =await CartManagementUtil.getInstance().clearCart();if(result.success){this.getCartList();}else{ promptAction.showToast({ message:'清空购物车失败'});}}}

五、 项目配置与部署 🚀

5.1 配置文件修改

1. module.json5修改

在「entry/src/main/module.json5」中添加用户管理、商品列表、购物车配置：

{"module":{"requestPermissions":[// ...],"abilities":[// ...],"widgets":[// ...],"pages":[// ...]}}

5.2 🔧 项目部署

1. 编译项目

在DevEco Studio中点击「Build」→「Build HAP」，编译项目。

2. 部署到设备

将编译后的HAP文件部署到鸿蒙设备上。

3. 测试用户管理、商品列表、购物车
  • 在应用中查看用户注册的效果；
  • 在应用中查看用户登录的效果；
  • 在应用中查看用户信息管理的效果；
  • 在应用中查看商品列表的效果；
  • 在应用中查看商品详情的效果；
  • 在应用中查看商品搜索的效果；
  • 在应用中查看购物车列表的效果；
  • 在应用中查看添加商品到购物车的效果；
  • 在应用中查看修改购物车商品数量的效果；
  • 在应用中查看删除购物车商品的效果。

六、 项目运行与效果验证 📱

6.1 效果验证

✅ 用户管理：用户可以通过手机号、邮箱等方式注册；
✅ 用户登录：用户可以通过手机号、邮箱等方式登录；
✅ 用户信息管理：用户可以管理自己的个人信息；
✅ 商品列表：显示商品列表；
✅ 商品详情：显示商品详情；
✅ 商品搜索：搜索商品；
✅ 购物车管理：添加商品到购物车、修改购物车商品数量、删除购物车商品。

七、 总结与未来学习路径 🚀

7.1 总结

本文作为《鸿蒙APP开发从入门到精通》的第13篇，完成了：

  • 鸿蒙APP用户管理的定义与架构；
  • 用户注册、登录、用户信息管理的实现；
  • 商品列表、商品详情、商品搜索的实现；
  • 购物车管理的实现。

7.2 未来学习路径

  • 第14篇：鸿蒙电商购物车全栈项目——订单管理、支付管理、AI原生；
  • 第15篇：鸿蒙电商购物车全栈项目——用户增长、性能优化、Next原生合规；
  • 第16篇：鸿蒙电商购物车全栈项目——运维监控、生态运营、专属变现。

八、 结语 ✅

恭喜你！你已经完成了《鸿蒙APP开发从入门到精通》的第13篇，掌握了用户管理、商品列表、购物车的核心技术。

从现在开始，你已具备了开发鸿蒙电商购物车全栈项目的基础能力。未来的3篇文章将逐步构建一个完整的鸿蒙电商购物车全栈项目，并最终实现华为应用市场上架变现。

让我们一起期待鸿蒙生态的爆发！ 🎉🎉🎉

Read more

Flutter 三方库 drift_postgres 的鸿蒙化适配指南 - 实现高效、稳定的远程 PostgreSQL 数据库接入

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.ZEEKLOG.net Flutter 三方库 drift_postgres 的鸿蒙化适配指南 - 实现高效、稳定的远程 PostgreSQL 数据库接入 在 OpenHarmony 应用开发中，处理复杂的数据持久化需求是架构设计的重中之重。除了本地 SQL 数据库外，直接连接远程 PostgreSQL 数据库也成为许多工业级应用的刚需。本文将深入探讨 drift_postgres 在鸿蒙系统上的适配实战，助力开发者构建强大的数据驱动应用。 前言 drift 是 Flutter 生态中最受欢迎的响应式持久化框架。而 drift_postgres 做为它的重要后端实现，使得我们可以在鸿蒙端直接操作远端数据库，就像操作本地 sqlite 一样丝滑。在鸿蒙设备（如平板或工业手持终端）需要与中央数据库实时同步的高频场景下，其价值不可估量。 一、原理分析 / 概念介绍

By Ne0inhk
Flutter for OpenHarmony: Flutter 三方库 tar 在鸿蒙应用中实现高效文件存档与流式打包（资源分发利器）

Flutter for OpenHarmony: Flutter 三方库 tar 在鸿蒙应用中实现高效文件存档与流式打包（资源分发利器）

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.ZEEKLOG.net 前言 在 OpenHarmony 系统中，文件归档是一个核心需求。例如： 1. 备份数据：将用户的聊天记录、配置和本地图片打包成一个文件导出。 2. 下载包解压：鸿蒙应用的 HAP 包内可能包含 TAR 格式的离线资源包。 3. 日志收集：将多份离线日志合并后上传。 虽然可以使用 Zip，但 TAR 由于其格式简单、解析效率高且广泛兼容各种 Unix-like 环境，仍然是许多系统级功能的首选。tar 软件包提供了一套极其现代、基于 Dart 流（Stream）的 TAR 编码与解析方案，是鸿蒙应用进行“轻量级打包”的最佳选择。 一、流式存取架构模型 tar 库的强大之处在于它支持对超大存档进行“

By Ne0inhk

Flutter 三方库 observable 的鸿蒙化适配指南 - 在鸿蒙系统上构建极致、透明、响应式的对象监控与状态变更追溯引擎

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.ZEEKLOG.net Flutter 三方库 observable 的鸿蒙化适配指南 - 在鸿蒙系统上构建极致、透明、响应式的对象监控与状态变更追溯引擎 在鸿蒙（OpenHarmony）系统的端侧状态同步、多组件联动更新（如鸿蒙版仪表盘联动）或者是针对复杂业务模型的数据监听中，如何实现“数据改变即触发回调”的响应式编程模型？observable 为开发者提供了一套工业级的、基于观察者模式（Observer Pattern）的对象变更审计方案。本文将深入实战其在鸿蒙业务逻辑层响应式驱动中的应用。 前言 什么是 Observable？它不仅是简单的通知（Notification），而是一个能在“对象级别”甚至“集合级别”建立深度监听的系统。它支持标记普通 Dart 对象为“可观察态”，并能精准捕获属性更改（Changes）的具体路径。在 Flutter for OpenHarmony

By Ne0inhk
Flutter 组件 org_parser 的适配 鸿蒙Harmony 实战 - 驾驭 Emacs Org-mode 结构化解析、实现鸿蒙端笔记体系与复杂任务追踪方案

Flutter 组件 org_parser 的适配 鸿蒙Harmony 实战 - 驾驭 Emacs Org-mode 结构化解析、实现鸿蒙端笔记体系与复杂任务追踪方案

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.ZEEKLOG.net Flutter 组件 org_parser 的适配 鸿蒙Harmony 实战 - 驾驭 Emacs Org-mode 结构化解析、实现鸿蒙端笔记体系与复杂任务追踪方案 前言 在鸿蒙（OpenHarmony）生态的个人生产力应用、知识管理工具以及专业文本编辑器开发中，如何处理具备高度结构化的文本内容是一个永恒的命题。虽然 Markdown 已经统治了互联网，但在极客（Geek）与深度办公用户中，Emacs 所定义的 Org-mode 以其更强的文件组织力、内置的任务追踪逻辑以及表格计算能力，被誉为“纯文本管理的终板”。 对于鸿蒙开发者而言，适配 Org 协议不仅意味着能够接入数以百万计的存量知识库文件，更是我们构建“极客级生产力中心”的关键一步。 org_parser 是一套专为 Org 语法设计的递归下降解析引擎。它能精准识别各级标题（

By Ne0inhk