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

举报
yd_215151764 发表于 2025/06/30 10:14:47 2025/06/30
【摘要】 技术栈Appgallery connect 开发准备上一篇文章中我们实现了项目端云一体化首页部分模块动态配置,实现了对模块模块的后端控制显示和隐藏,这能让我们的app更加的灵活,也能应对更多的情况。现在我们来对配置模块进行完善,除了已有的模块以外,我们还有一些banner ,活动入口等模块,这些模块的数据并不多,所以我们也归纳到配置中去实现。并且我们在配置表中添加了一些不同的id,我们只需...

技术栈

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

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。