《仿盒马》app开发技术分享-- 首页活动配置（5）

技术栈

Appgallery connect

开发准备

上一篇文章中我们实现了项目端云一体化首页部分模块动态配置，实现了对模块模块的后端控制显示和隐藏，这能让我们的app更加的灵活，也能应对更多的情况。现在我们来对配置模块进行完善，除了已有的模块以外，我们还有一些banner ，活动入口等模块，这些模块的数据并不多，所以我们也归纳到配置中去实现。并且我们在配置表中添加了一些不同的id，我们只需要根据相对应的id 去查询对应的表就可以了

代码实现 实现横幅海报，商品活动入口

创建海报横幅表 { "objectTypeName": "home_poster", "fields": [ {"fieldName": "id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true}, {"fieldName": "poster_id", "fieldType": "Integer", "notNull": true, "defaultValue": 0}, {"fieldName": "url", "fieldType": "String"}, {"fieldName": "router", "fieldType": "String"} ], "indexes": [ {"indexName": "posterIdIndex", "indexList": [{"fieldName":"poster_id","sortType":"ASC"}]} ], "permissions": [ {"role": "World", "rights": ["Read"]}, {"role": "Authenticated", "rights": ["Read", "Upsert"]}, {"role": "Creator", "rights": ["Read", "Upsert", "Delete"]}, {"role": "Administrator", "rights": ["Read", "Upsert", "Delete"]} ] }

创建商品活动入口表

{ "objectTypeName": "home_good_center", "fields": [ {"fieldName": "id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true}, {"fieldName": "good_left_id", "fieldType": "Integer", "notNull": true, "defaultValue": 0}, {"fieldName": "title", "fieldType": "String"}, {"fieldName": "url", "fieldType": "String"} ], "indexes": [ {"indexName": "goodLeftIdIndex", "indexList": [{"fieldName":"good_left_id","sortType":"ASC"}]} ], "permissions": [ {"role": "World", "rights": ["Read"]}, {"role": "Authenticated", "rights": ["Read", "Upsert"]}, {"role": "Creator", "rights": ["Read", "Upsert", "Delete"]}, {"role": "Administrator", "rights": ["Read", "Upsert", "Delete"]} ] }

分别填充数据

海报 { "cloudDBZoneName": "default", "objectTypeName": "home_poster", "objects": [ { "id": 10, "poster_id": 1, "url": "在线图片链接", "router": "string1" } ] } 商品活动入口 { "cloudDBZoneName": "default", "objectTypeName": "home_good_center", "objects": [ { "id": 10, "good_left_id": 1, "title": "生鲜严选", "url": "在线图片链接" }, { "id": 20, "good_left_id": 1, "title": "西购新品", "url": "在线图片链接" }, { "id": 30, "good_left_id": 1, "title": "今日推荐", "url": "在线图片链接" } ] }

都填充完成后，我们把数据提交到云端，然后进行配置类的同步

接下来我们进行数据查询，因为我们在配置表中添加了id ，所以我们要查询出对应id的活动入口。

@State homeActivity:HomeActivitySetting[]=[]//首页活动配置 @State homeGoodCenter:HomeGoodCenter[]=[]//商品活动入口

let listData3 = await databaseZone.query(condition3); let json3 = JSON.stringify(listData3) let data3:HomeActivitySetting[]= JSON.parse(json3) this.homeActivity=data3 hilog.error(0x0000, 'testTag', Failed to query data, code: ${this.homeActivity}); let list5 = await databaseZone.query(home_good); home_good.equalTo("good_left_id",data3[0].good_left_id); let json5 = JSON.stringify(list5) let data5:HomeGoodCenter[]= JSON.parse(json5) this.homeGoodCenter=data5 hilog.error(0x0000, 'testTag', Failed to query data, code: ${this.homeGoodCenter});

然后我们修改一下商品活动入口的内容

import { HomeGoodCenter } from "../entity/HomeGoodCenter"

@Component @Preview export struct SpecialColumn { @Link goodInfo: HomeGoodCenter[]

build() { Column(){ List({space:10}){ ForEach(this.goodInfo,(data:HomeGoodCenter)=>{ ListItem(){ Column(){ Text(data.title) .fontSize(16) .fontWeight(FontWeight.Bold) .fontColor(Color.Black) Blank() Image(data.url) .width('28%') .height(90) .margin({ bottom: 8 }) .objectFit(ImageFit.Cover) } .borderRadius(5) .backgroundColor("#ffeedeb8") .padding(5) } }) } .listDirection(Axis.Horizontal) } .margin({top:10})

} }

在首页进行调用 SpecialColumn({goodInfo:this.homeGoodCenter}) 到这里我们就实现了活动配置相关的内容