鸿蒙NEXT版实战开发案例：购物商城（附带源码）

往期鸿蒙全套实战精彩文章必看内容：

• 鸿蒙开发焦点知识点，看这篇文章就够了
  
• 最新版！鸿蒙HarmonyOS Next应用开发实战学习蹊径
  
• 鸿蒙HarmonyOS NEXT开发技能最全学习蹊径指南
  
• 鸿蒙应用开发实战项目，看这一篇文章就够了（部门项目附源码）
  

---

本项目采取前后端分离计划，后端利用Apache+MySql+PHP，前端为鸿蒙原生。实现了完备的注册、登录、商品分类、购物车、购买、我的订单等功能，管理员可以在后端数据库对用户和商品举行增编削查操纵。
完备效果图：

下面跟各人分享本项目标一些知识要点。

首页部门是一个List组件，内部门为三部门，banner图利用Swiper组件，商品分类和商品列表都利用Grid组件，详细代码如下：

1. List({space:8}){
2.           ListItem(){
3.             Swiper() {
4.               ForEach(this.data, (item:Resource) => {
5.                 Image(item)
6.                   .size({ width: '100%', height: 200 })
7.                   .borderRadius(12)
8.                   .padding(8)
9.               })
10.             }
11.           }
12.          
13.           ListItem(){
14.             Grid(){
15.               ForEach(this.classData,(item:object,index:number) => {
16.                 GridItem(){
17.                   Column(){
18.                     Image(item['cover'])
19.                       .width('100%')
20.                       .height('80%')
21.                     Text(item['classname'])
22.                       .fontColor(Color.Black)
23.                       .fontSize(14)
24.                       .margin({top:3})
25.                   }
26.                 }
27.                 .width(70)
28.                 .height(90)
29.               })
30.             }
31.             .columnsTemplate('1fr 1fr 1fr 1fr')
32.             .rowsTemplate('1fr 1fr')
33.             .width('100%')
34.             .height(200)
35.             .backgroundColor(Color.White)
36.           }
37.           .width('100%')
38.           .height(200)
40.           ListItem(){
41.             Grid(){
42.               ForEach(this.goods,(item:object,index:number) => {
43.                 GridItem(){
44.                   Column(){
45.                     Image(item['cover'])
46.                       .width('100%')
47.                       .height((this.screen_width - 25)/2)
48.                     Text(item['name'])
49.                       .fontColor(Color.Black)
50.                       .fontSize(17)
51.                       .margin({top:4})
52.                       .fontWeight(FontWeight.Bold)
53.                       .maxLines(2)
54.                     Text(item['price'])
55.                       .fontColor(Color.Red)
56.                       .fontSize(15)
57.                       .margin({top:6})
58.                   }
59.                   .alignItems(HorizontalAlign.Start)
60.                 }
61.                 .width((this.screen_width - 24)/2)
62.                 .height(this.listHeight)
63.               })
64.             }
65.             .backgroundColor(Color.White)
66.             .columnsTemplate('1fr 1fr')
67.             .rowsGap(5)
68.             .columnsGap(5)
69.             .width('100%')
70.           }
71.           .width('100%')
72.         }
73.         .width('100%')
74.         .height('100%')

复制代码

分类界面分为两部门，左侧利用List组件，右侧利用Grid组件，点击List列表后革新右侧网格列表。

代码如下：

1. Row() {
2.         List(){
3.           ForEach(this.classData,(item:object,index)=>{
4.             ListItem(){
5.               Text(item['classname'])
6.                 .fontColor(Color.Gray)
7.                 .fontSize(17)
8.             }
9.             .backgroundColor(index == this.classIndex? 'rgb(255,255,255)' : 'rgb(240,240,240)')
10.             .width(100)
11.             .height(55)
12.             .onClick(()=>{
13.               this.getSubClass(item['id'])
14.               this.classIndex = index
15.             })
16.           })
17.         }
18.         .width(100)
19.         .height('100%')
20.         .backgroundColor(Color.White)
22.         Grid(){
23.           ForEach(this.subClassData,(item:object,index)=>{
24.             GridItem(){
25.               Column(){
26.                 Image(item['cover'])
27.                   .width('100%')
28.                   .height((this.screen_width - 100)/3)
29.                 Text(item['name'])
30.                   .fontSize(15)
31.                   .fontColor(Color.Black)
32.               }
33.               .onClick(()=>{
34.                
35.               })
36.             }
37.             .backgroundColor(Color.White)
38.             .width((this.screen_width - 100)/3)
39.             .height((this.screen_width - 100)/3 + 20)
40.           })
41.         }
42.         .columnsTemplate('1fr 1fr 1fr')
43.         .columnsGap(5)
44.         .rowsGap(5)
45.         .width(this.screen_width - 100)
46.         .height('100%')
47.       }

复制代码

其他页面也都比力简朴，大多数利用list组件实现。

​

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。