《仿盒马》app开发技术分享-- 首页模块配置(4)

鸿蒙小林
• 阅读 2

技术栈

Appgallery connect

开发准备

上一篇文章中我们实现了项目端云一体化金刚区活动模块,数据也成功的从云端获取,并且我们跟ScrollBar进行关联,能够让用户直观的查看当前滑动的位置。现在我们开始继续向下,随着我们首页的内容越来越多,我们如果因为某些业务需要进行调整和下线,想隐藏和关掉某些模块,就需要每次在打包的时候进行处理,这很明显会非常的麻烦,现在我们通过一张表来对首页的整个模块进行控制,这样每次做展示的时候去进行查询当前状态来实现想要的效果。

代码实现 首先我们先创建一个表把所有的关联id 以及模块的状态字段定义一下

{ "objectTypeName": "home_activity_setting", "fields": [ {"fieldName": "id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true}, {"fieldName": "poster_id", "fieldType": "Integer"}, {"fieldName": "banner_id", "fieldType": "Integer"}, {"fieldName": "good_left_id", "fieldType": "Integer"}, {"fieldName": "good_right_id", "fieldType": "Integer"}, {"fieldName": "goods_list_id", "fieldType": "Integer"}, {"fieldName": "new_people_status", "fieldType": "Boolean"}, {"fieldName": "split_layout_status", "fieldType": "Boolean"}, {"fieldName": "banner_status", "fieldType": "Boolean"}, {"fieldName": "goods_list_status", "fieldType": "Boolean"}

], "indexes": [ {"indexName": "field1IndexId", "indexList": [{"fieldName":"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_activity_setting", "objects": [ { "id": 1, "poster_id": 1, "banner_id": 1, "good_left_id": 1, "good_right_id": 1, "goods_list_id": 1, "new_people_status": true, "split_layout_status": true, "banner_status": true, "goods_list_status": true } ] } 现在进行实体类的创建

export class HomeActivitySetting { id: number; poster_id: number; banner_id: number; good_left_id: number; good_right_id: number; goods_list_id: number; new_people_status: boolean; split_layout_status: boolean; banner_status: boolean; goods_list_status: boolean;

constructor() {
}

getFieldTypeMap():  Map<string, string> {
    let fieldTypeMap = new Map<string, string>();
    fieldTypeMap.set('id', 'Integer');
    fieldTypeMap.set('poster_id', 'Integer');
    fieldTypeMap.set('banner_id', 'Integer');
    fieldTypeMap.set('good_left_id', 'Integer');
    fieldTypeMap.set('good_right_id', 'Integer');
    fieldTypeMap.set('goods_list_id', 'Integer');
    fieldTypeMap.set('new_people_status', 'Boolean');
    fieldTypeMap.set('split_layout_status', 'Boolean');
    fieldTypeMap.set('banner_status', 'Boolean');
    fieldTypeMap.set('goods_list_status', 'Boolean');
    return fieldTypeMap;
}

getClassName(): string {
    return 'home_activity_setting';
}

getPrimaryKeyList(): string[] {
    let primaryKeyList: string[] = [];
    primaryKeyList.push('id');
    return primaryKeyList;
}

getIndexList(): string[] {
    let indexList: string[] = [];
    indexList.push('id');
    return indexList;
}

getEncryptedFieldList(): string[] {
    let encryptedFieldList: string[] = [];
    return encryptedFieldList;
}

setId(id: number): void {
    this.id = id;
}

getId(): number  {
    return this.id;
}

setPoster_id(poster_id: number): void {
    this.poster_id = poster_id;
}

getPoster_id(): number  {
    return this.poster_id;
}

setBanner_id(banner_id: number): void {
    this.banner_id = banner_id;
}

getBanner_id(): number  {
    return this.banner_id;
}

setGood_left_id(good_left_id: number): void {
    this.good_left_id = good_left_id;
}

getGood_left_id(): number  {
    return this.good_left_id;
}

setGood_right_id(good_right_id: number): void {
    this.good_right_id = good_right_id;
}

getGood_right_id(): number  {
    return this.good_right_id;
}

setGoods_list_id(goods_list_id: number): void {
    this.goods_list_id = goods_list_id;
}

getGoods_list_id(): number  {
    return this.goods_list_id;
}

setNew_people_status(new_people_status: boolean): void {
    this.new_people_status = new_people_status;
}

getNew_people_status(): boolean  {
    return this.new_people_status;
}

setSplit_layout_status(split_layout_status: boolean): void {
    this.split_layout_status = split_layout_status;
}

getSplit_layout_status(): boolean  {
    return this.split_layout_status;
}

setBanner_status(banner_status: boolean): void {
    this.banner_status = banner_status;
}

getBanner_status(): boolean  {
    return this.banner_status;
}

setGoods_list_status(goods_list_status: boolean): void {
    this.goods_list_status = goods_list_status;
}

getGoods_list_status(): boolean  {
    return this.goods_list_status;
}

static parseFrom(inputObject: any): HomeActivitySetting {
    let result = new HomeActivitySetting();
    if (!inputObject) {
        return result;
    }
    if (inputObject.id) {
        result.id = inputObject.id;
    }
    if (inputObject.poster_id) {
        result.poster_id = inputObject.poster_id;
    }
    if (inputObject.banner_id) {
        result.banner_id = inputObject.banner_id;
    }
    if (inputObject.good_left_id) {
        result.good_left_id = inputObject.good_left_id;
    }
    if (inputObject.good_right_id) {
        result.good_right_id = inputObject.good_right_id;
    }
    if (inputObject.goods_list_id) {
        result.goods_list_id = inputObject.goods_list_id;
    }
    if (inputObject.new_people_status) {
        result.new_people_status = inputObject.new_people_status;
    }
    if (inputObject.split_layout_status) {
        result.split_layout_status = inputObject.split_layout_status;
    }
    if (inputObject.banner_status) {
        result.banner_status = inputObject.banner_status;
    }
    if (inputObject.goods_list_status) {
        result.goods_list_status = inputObject.goods_list_status;
    }
    return result;
}

}

db类 import { cloudDatabase } from '@kit.CloudFoundationKit';

class home_activity_setting extends cloudDatabase.DatabaseObject { public id: number; public poster_id: number; public banner_id: number; public good_left_id: number; public good_right_id: number; public goods_list_id: number; public new_people_status: boolean; public split_layout_status: boolean; public banner_status: boolean; public goods_list_status: boolean;

public naturalbase_ClassName(): string { return 'home_activity_setting'; } }

export { home_activity_setting };

创建完成之后,记得要在开发工具中把数据提交到云端,我们把数据提交到云端后,可以看到数据提交成功并且表也已经创建完成

进行数据查询 let databaseZone = cloudDatabase.zone('default'); let condition3 = new cloudDatabase.DatabaseQuery(home_activity_setting);

let listData3 = await databaseZone.query(condition3); let json3 = JSON.stringify(listData3) let data3:HomeActivitySetting[]= JSON.parse(json3) this.homeActivity=data3 } catch (err) { hilog.error(0x0000, 'testTag', Failed to query data, code: ${err.code}, message: ${err.message});

}

数据也已经查询成功,接下来我们直接运行程序,可以看到金刚区是在显示中的,接下来我们修改金刚区的状态,再执行一下,可以看到金刚区已经不见了,到这里我们首页模块的显示隐藏配置已经实现了。

点赞
收藏
评论区
推荐文章
鸿蒙小林 鸿蒙小林
5小时前
《仿盒马》app开发技术分享-- 新人专享券(2)
​技术栈Appgalleryconnect开发准备上一篇文章中我们实现了项目端云一体化的升级,我们的数据后期就要从云侧的数据库去获取了,现在我们从头开始对项目进行端云一体化的改造。我们在首页已经把新人专享券抽离为公共组件现在我们继续进行功能开发,把这个组建
鸿蒙小林 鸿蒙小林
5小时前
《仿盒马》app开发技术分享-- 金刚区(3)
技术栈Appgalleryconnect开发准备上一篇文章中我们实现了项目端云一体化新人专享券活动模块,数据也成功的从云端获取,现在我们开始继续向下,实现金刚区模块功能分析金刚区的实现我们之前已经完成了,但是数据的获取都是本地的静态数据,现在我们要获取云端
鸿蒙小林 鸿蒙小林
5小时前
《仿盒马》app开发技术分享-- 首页活动配置(5)
技术栈Appgalleryconnect开发准备上一篇文章中我们实现了项目端云一体化首页部分模块动态配置,实现了对模块模块的后端控制显示和隐藏,这能让我们的app更加的灵活,也能应对更多的情况。现在我们来对配置模块进行完善,除了已有的模块以外,我们还有一些
鸿蒙小林 鸿蒙小林
5小时前
《仿盒马》app开发技术分享-- 首页banner(6)
技术栈Appgalleryconnect开发准备上一篇文章中我们实现了项目端云一体化首页商品活动入口列表,现在我们还差一个banner的模块,banner模块不仅可以用于展示一些信息,还可以在点击之后进行,跳转,弹窗,升级提示,信息提示等作用,我们直接坐的
鸿蒙小林 鸿蒙小林
5小时前
《仿盒马》app开发技术分享-- 首页商品流(7)
技术栈Appgalleryconnect开发准备上一节我们实现了首页banner模块的功能,现在我们的首页还需要添加商品列表,作为一个购物类应用,商品列表是非常重要的一个模块,所以我们尽量把它设计的足够完善,参数能更好的支持我们后期复杂的逻辑,它需要有图片
鸿蒙小林 鸿蒙小林
5小时前
《仿盒马》app开发技术分享-- 首页地址选择&会员码(8)
技术栈Appgalleryconnect开发准备上一节我们实现了商品流标的创建,数据的填充和展示,并且在商品信息表中添加了许多我们后去需要使用到的参数。让我们的首页功能更加的丰富,截至目前首页板块可以说是完成了百分之五十了,跟展示有关的基本都已完成,接下来
鸿蒙小林 鸿蒙小林
5小时前
《仿盒马》app开发技术分享-- 商品规格弹窗(11)
技术栈Appgalleryconnect开发准备上一节我们实现了商品详情页面,并且成功在页面上展示了商品的图片、商品规格、活动详情等信息,要知道同一种商品大多数都是有多种型号跟规格的,所以这一节我们来实现商品的规格弹窗。这节的要点是自定义弹窗的运用。功能分
鸿蒙小林 鸿蒙小林
5小时前
《仿盒马》app开发技术分享-- 购物车功能完善(14)
技术栈Appgalleryconnect开发准备上一节我们实现了购物车商品列表的状态切换,已添加商品数量的增减,已添加商品滑动删除,已添加商品在选中情况下的价格计算。这一节我们在这些功能的基础上实现云端记录,因为我们现在只有数据的查询是从云端获取的,其他的
鸿蒙小林 鸿蒙小林
5小时前
《仿盒马》app开发技术分享-- 分类模块顶部导航列表(15)
技术栈Appgalleryconnect开发准备上一节我们实现了购物车商品列表的大部分功能,实现了商品的添加、删除、增减、价格计算等业务,并且都跟云端进行通信。现在我们继续对项目进行改造,这一节我们要改造的内容是分类页,这个页面我们在之前的非端云一体化项目
鸿蒙小林 鸿蒙小林
5小时前
《仿盒马》app开发技术分享-- 分类模块顶部导航列表弹窗(16)
技术栈Appgalleryconnect开发准备上一节我们实现了分类页面的顶部导航栏列表,并且实现了首页金刚区跟首页导航栏的联动,这一节我们实现导航栏列表的弹窗功能,需要学习的知识点有自定义弹窗,同时我们的数据源需要跟分类页保持一一致。功能分析1.弹窗自定