《仿盒马》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})

到这里我们就实现了活动配置相关的内容