ITPub博客

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

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

原创 HTML5 作者:鸿蒙小林 时间:2025-06-26 10:00:21 0 删除 编辑


## 技术栈


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})

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


来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/70046889/viewspace-3088982/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2025-06-26

  • 博文量
    90
  • 访问量
    67437