HarmonyOS鸿蒙Next中《仿盒马》app开发技术分享07-- 商品详情初探（端云一体）
HarmonyOS鸿蒙Next中《仿盒马》app开发技术分享07-- 商品详情初探（端云一体）
开发准备
上一节我们实现了顶部toolbar的地址选择，会员码展示，首页的静态页面就先告一段落，这节我们来实现商品列表item的点击传值、自定义标题栏。
功能分析
自定义标题栏
当我们进入二级三级页面的时候，就需要向用户介绍我们当前的页面信息，标题栏很好的实现了这个效果，并且进入的页面级别过多，也要给用户一个可点击的退出按钮。当然了，有些页面是不需要有返回按钮的，这里我们还要兼顾通用性。
页面间传值
页面之前的数据传递，是app中比较常见也是比较重要的知识点，这里我们通过点击列表的条目进行数据的传递，然后在详情页进行数据的接收
代码实现
自定义标题栏
import router from '@ohos.router'
@Component
export struct CommonTopBar {
@Prop title: string
@Prop alpha: number
private titleAlignment: TextAlign = TextAlign.Center
private backButton: boolean = true
private onBackClick?: () => void
build() {
Column() {
Blank()
.backgroundColor(Color.Red)
.opacity(this.alpha)
Stack({ alignContent: Alignment.Start }) {
Stack()
.height(50)
.width("100%")
.opacity(this.alpha)
.backgroundColor(Color.Red)
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
Text(this.title)
.flexGrow(1)
.textAlign(this.titleAlignment)
.fontSize(18)
.fontColor(Color.Black)
.align(Alignment.Center)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
.height(50)
.margin({ left: 50, right: 50 })
.alignSelf(ItemAlign.Center)
if (this.backButton) {
Stack() {
Image($r('app.media.ic_back'))
.height(16)
.width(12)
.objectFit(ImageFit.Contain)
.align(Alignment.Center)
}
.onClick(() => {
this.onBackClick?.()
router.back();
})
.height(50)
.width(50)
}
}
.height(50)
.width("100%")
Divider().strokeWidth(0.5).color("#E6E6E6")
}.backgroundColor(Color.White)
.height(51)
}
}
在标题栏中我们使用了一些逻辑判断，并且设置标题是外部传入的，而且还预留了一个事件的回调，这能让我们的标题栏更加的灵活
页面间传值
首先我们需要创建一个商品详情页的页面，然后把我们的自定义标题栏引入进去
import { CommonTopBar } from '../widget/CommonTopBar';
@Entry
@Component
struct ProductDetailsPage {
build() {
Column() {
CommonTopBar({ title: "商品详情", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})
}
.height('100%')
.width('100%')
}
}
然后在商品流的点击事件里使用router
.onClick(() => {
router.pushUrl({
url: 'pages/component/ProductDetailsPage',
params: item
}, (err) => {
if (err) {
console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('Invoke pushUrl succeeded.');
})
})
这里我们吧整个item的信息都传递过去，方便我们使用
接收
@State receivedParams: HomeProductList = {} as HomeProductList;
aboutToAppear(): void {
let order= router.getParams() as HomeProductList;
console.info('Received params:',order);
}
在页面上我们先展示出来
Text(JSON.stringify(this.receivedParams))
.fontColor(Color.Black)
执行代码看看效果
在HarmonyOS鸿蒙Next中开发《仿盒马》商品详情页（端云一体）需关注以下要点：
-
使用ArkUI的声明式开发范式构建页面布局
-
通过云开发组件实现端云数据同步
-
商品数据模型需包含ID、名称、价格、库存等字段
-
云端使用HarmonyOS云数据库存储商品信息
-
端侧采用分布式数据管理实现本地缓存
-
商品图片加载推荐使用Image组件配合云存储URL
-
交互逻辑使用TypeScript编写
-
注意端云一致性问题处理机制
更多关于HarmonyOS鸿蒙Next中《仿盒马》app开发技术分享07-- 商品详情初探（端云一体）的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
这是一个很好的HarmonyOS Next应用开发实践分享。我来点评下几个关键技术点：
-
自定义标题栏的实现很规范，通过@Prop实现了标题文字、透明度等属性的灵活配置，同时支持返回按钮的显隐控制，这种组件化设计思路值得借鉴。
-
页面传值采用了router.pushUrl的标准方式，通过params参数传递整个商品对象，在目标页面通过router.getParams()获取，这是HarmonyOS推荐的页面通信方式。
-
代码中使用了TypeScript类型(HomeProductList)来确保传参类型安全，这对大型应用开发很有帮助。
-
关于性能优化建议：当传递大量数据时，可以考虑只传必要字段或ID，详情页再通过接口获取完整数据。
-
下一步开发商品详情页时，可以结合HarmonyOS的声明式UI特性，使用ForEach渲染商品规格选项等列表数据。
整体实现符合HarmonyOS应用开发规范，组件解耦做得很好，为后续功能扩展打下了良好基础。期待看到更多关于商品详情页的开发分享。
