写点什么

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

作者:鸿蒙小林
  • 2025-06-30
    浙江
  • 本文字数:1842 字

    阅读完需:约 6 分钟

技术栈

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=data3hilog.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=data5hilog.error(0x0000, 'testTag', Failed to query data, code: ${this.homeGoodCenter});


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


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


@Component@Previewexport 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})到这里我们就实现了活动配置相关的内容

用户头像

鸿蒙小林

关注

还未添加个人签名 2025-06-20 加入

还未添加个人简介

评论

发布
暂无评论
《仿盒马》app开发技术分享-- 首页活动配置(5)_HarmonyOS NEXT_鸿蒙小林_InfoQ写作社区