在鸿蒙HarmonyOS 5中使用Appgallery connect实现一个懂车帝的发动机型号的展示

勿念436

317人浏览 · 2025-06-26 13:24:19

勿念436 · 2025-06-26 13:24:19 发布

下面我将详细介绍如何在HarmonyOS 5应用中通过AppGallery Connect实现类似懂车帝的汽车发动机型号展示功能。

准备工作

确保已在AppGallery Connect中创建项目并启用Cloud DB服务
在HarmonyOS项目中集成AppGallery Connect SDK
准备发动机型号数据模型

实现步骤

1. 数据模型设计

首先定义发动机数据模型：

// 发动机对象类型定义
export interface EngineModel {
  id: string;               // 发动机ID
  brand: string;            // 汽车品牌
  model: string;            // 车型
  engineCode: string;       // 发动机代号
  engineType: string;       // 发动机类型（如：涡轮增压、自然吸气等）
  displacement: number;     // 排量（L）
  power: number;            // 功率（kW）
  torque: number;           // 扭矩（N·m）
  fuelType: string;         // 燃油类型
  emissionStandard: string;  // 排放标准
  yearFrom: number;         // 开始使用年份
  yearTo?: number;          // 结束使用年份（可选）
  featuredCars: string[];   // 搭载此发动机的车型
  imageUrl?: string;        // 发动机图片URL
  technicalFeatures: string; // 技术特点
}

2. 初始化Cloud DB

import agconnect from '@hw-agconnect/api';
import '@hw-agconnect/core';
import agconnectCloudDB from '@hw-agconnect/clouddb';

// 初始化Cloud DB
async function initCloudDB() {
  try {
    const agcCloudDB = agconnectCloudDB.default;
    return await agcCloudDB.openCloudDBZone({
      zoneName: "ENGINE_MODEL_ZONE",
      persistence: true,
      // 其他配置...
    });
  } catch (error) {
    console.error('初始化Cloud DB失败:', error);
    throw error;
  }
}

3. 核心功能实现

获取发动机型号列表

// 获取所有发动机型号列表
async function getAllEngineModels(): Promise<EngineModel[]> {
  try {
    const cloudDBZone = await initCloudDB();
    
    const query = agconnectCloudDB.CloudDBZoneQuery.where(EngineModel)
      .orderByAsc("brand")
      .orderByAsc("model");
    
    const snapshot = await cloudDBZone.executeQuery(query);
    const engines: EngineModel[] = [];
    snapshot.getSnapshotObjects().forEach((doc) => {
      engines.push(doc);
    });
    
    return engines;
  } catch (error) {
    console.error('获取发动机型号列表失败:', error);
    return [];
  }
}

按品牌筛选发动机

// 按品牌获取发动机型号
async function getEnginesByBrand(brand: string): Promise<EngineModel[]> {
  try {
    const cloudDBZone = await initCloudDB();
    
    const query = agconnectCloudDB.CloudDBZoneQuery.where(EngineModel)
      .equalTo("brand", brand)
      .orderByAsc("model");
    
    const snapshot = await cloudDBZone.executeQuery(query);
    const engines: EngineModel[] = [];
    snapshot.getSnapshotObjects().forEach((doc) => {
      engines.push(doc);
    });
    
    return engines;
  } catch (error) {
    console.error('按品牌获取发动机失败:', error);
    return [];
  }
}

搜索发动机型号

// 搜索发动机型号
async function searchEngineModels(keyword: string): Promise<EngineModel[]> {
  try {
    const cloudDBZone = await initCloudDB();
    
    const query = agconnectCloudDB.CloudDBZoneQuery.where(EngineModel)
      .contains("engineCode", keyword)
      .or()
      .contains("model", keyword)
      .orderByAsc("brand");
    
    const snapshot = await cloudDBZone.executeQuery(query);
    const engines: EngineModel[] = [];
    snapshot.getSnapshotObjects().forEach((doc) => {
      engines.push(doc);
    });
    
    return engines;
  } catch (error) {
    console.error('搜索发动机型号失败:', error);
    return [];
  }
}

4. UI界面实现

@Entry
@Component
struct EngineModelPage {
  @State engineModels: EngineModel[] = [];
  @State brands: string[] = [];
  @State selectedBrand: string = '';
  @State searchKeyword: string = '';
  
  aboutToAppear() {
    this.loadEngineModels();
  }
  
  // 加载发动机型号数据
  async loadEngineModels() {
    const models = await getAllEngineModels();
    this.engineModels = models;
    
    // 提取所有品牌
    const brandSet = new Set<string>();
    models.forEach(model => brandSet.add(model.brand));
    this.brands = Array.from(brandSet);
  }
  
  // 按品牌筛选
  async filterByBrand() {
    if (!this.selectedBrand) {
      this.loadEngineModels();
      return;
    }
    
    this.engineModels = await getEnginesByBrand(this.selectedBrand);
  }
  
  // 搜索
  async handleSearch() {
    if (!this.searchKeyword.trim()) {
      this.loadEngineModels();
      return;
    }
    
    this.engineModels = await searchEngineModels(this.searchKeyword);
  }
  
  build() {
    Column() {
      // 搜索栏
      Row() {
        TextInput({ placeholder: '搜索发动机型号或车型...', text: this.searchKeyword })
          .onChange((value: string) => {
            this.searchKeyword = value;
          })
          .layoutWeight(1)
        
        Button('搜索')
          .onClick(() => this.handleSearch())
      }
      .padding(10)
      
      // 品牌筛选
      Scroll() {
        Row() {
          // 全部品牌选项
          Button(this.selectedBrand === '' ? '全部品牌(选中)' : '全部品牌')
            .type(ButtonType.Capsule)
            .stateEffect(true)
            .onClick(() => {
              this.selectedBrand = '';
              this.filterByBrand();
            })
            .margin(5)
          
          // 品牌列表
          ForEach(this.brands, (brand: string) => {
            Button(brand === this.selectedBrand ? `${brand}(选中)` : brand)
              .type(ButtonType.Capsule)
              .stateEffect(true)
              .onClick(() => {
                this.selectedBrand = brand;
                this.filterByBrand();
              })
              .margin(5)
          })
        }
        .padding(5)
      }
      .height(60)
      .margin({ bottom: 10 })
      
      // 发动机型号列表
      List({ space: 15 }) {
        ForEach(this.engineModels, (engine: EngineModel) => {
          ListItem() {
            Column() {
              // 标题行
              Row() {
                Text(`${engine.brand} ${engine.model}`)
                  .fontSize(18)
                  .fontWeight(FontWeight.Bold)
                  .layoutWeight(1)
                
                Text(engine.engineCode)
                  .fontSize(16)
                  .fontColor('#666')
              }
              .width('100%')
              .margin({ bottom: 8 })
              
              // 发动机图片
              if (engine.imageUrl) {
                Image(engine.imageUrl)
                  .width('100%')
                  .height(200)
                  .objectFit(ImageFit.Cover)
                  .margin({ bottom: 10 })
              }
              
              // 基本信息
              GridRow({ columns: 2 }) {
                GridCol() {
                  Text(`排量: ${engine.displacement}L`)
                }
                GridCol() {
                  Text(`功率: ${engine.power}kW`)
                }
                GridCol() {
                  Text(`扭矩: ${engine.torque}N·m`)
                }
                GridCol() {
                  Text(`燃油: ${engine.fuelType}`)
                }
                GridCol() {
                  Text(`类型: ${engine.engineType}`)
                }
                GridCol() {
                  Text(`排放: ${engine.emissionStandard}`)
                }
              }
              .margin({ bottom: 10 })
              
              // 技术特点
              if (engine.technicalFeatures) {
                Text('技术特点:')
                  .fontSize(14)
                  .fontColor('#333')
                  .margin({ bottom: 5 })
                Text(engine.technicalFeatures)
                  .fontSize(13)
                  .fontColor('#666')
              }
              
              // 搭载车型
              if (engine.featuredCars && engine.featuredCars.length > 0) {
                Text('搭载车型:')
                  .fontSize(14)
                  .fontColor('#333')
                  .margin({ top: 10, bottom: 5 })
                
                Flex({ wrap: FlexWrap.Wrap }) {
                  ForEach(engine.featuredCars, (car: string) => {
                    Text(car)
                      .fontSize(12)
                      .padding(5)
                      .margin(3)
                      .backgroundColor('#f5f5f5')
                      .borderRadius(10)
                  })
                }
              }
            }
            .padding(15)
            .backgroundColor(Color.White)
            .borderRadius(15)
            .shadow({ radius: 5, color: '#10000000', offsetX: 1, offsetY: 1 })
          }
          .margin({ left: 10, right: 10 })
        })
      }
      .layoutWeight(1)
      .width('100%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#f5f5f5')
  }
}

5. 高级功能实现

实时数据更新

// 订阅发动机型号变化
async function subscribeEngineModelChanges(callback: (engines: EngineModel[]) => void) {
  try {
    const cloudDBZone = await initCloudDB();
    
    const query = agconnectCloudDB.CloudDBZoneQuery.where(EngineModel)
      .orderByAsc("brand")
      .orderByAsc("model");
    
    // 订阅数据变化
    cloudDBZone.subscribeSnapshot(query, (snapshot) => {
      if (snapshot) {
        const engines: EngineModel[] = [];
        snapshot.getSnapshotObjects().forEach((doc) => {
          engines.push(doc);
        });
        callback(engines);
      }
    });
  } catch (error) {
    console.error('订阅发动机型号变化失败:', error);
  }
}

分页加载

// 在EngineModelPage组件中添加分页逻辑
@State currentPage: number = 1;
@State loadingMore: boolean = false;
@State noMoreData: boolean = false;

// 获取分页数据
async function getEngineModelsPaged(pageSize: number, pageNum: number): Promise<EngineModel[]> {
  try {
    const cloudDBZone = await initCloudDB();
    
    const query = agconnectCloudDB.CloudDBZoneQuery.where(EngineModel)
      .orderByAsc("brand")
      .orderByAsc("model")
      .limit(pageSize, (pageNum - 1) * pageSize);
    
    const snapshot = await cloudDBZone.executeQuery(query);
    const engines: EngineModel[] = [];
    snapshot.getSnapshotObjects().forEach((doc) => {
      engines.push(doc);
    });
    
    return engines;
  } catch (error) {
    console.error('获取分页发动机数据失败:', error);
    return [];
  }
}

// 加载更多数据
async loadMoreEngines() {
  if (this.loadingMore || this.noMoreData) return;
  
  this.loadingMore = true;
  const newEngines = await getEngineModelsPaged(10, this.currentPage + 1);
  
  if (newEngines.length > 0) {
    this.engineModels = [...this.engineModels, ...newEngines];
    this.currentPage++;
  } else {
    this.noMoreData = true;
  }
  
  this.loadingMore = false;
}

// 在List底部添加加载更多组件
if (!this.noMoreData) {
  ListItem() {
    Row() {
      if (this.loadingMore) {
        LoadingProgress()
          .height(40)
      } else {
        Text('上拉加载更多')
          .fontSize(12)
          .fontColor('#999')
      }
    }
    .width('100%')
    .justifyContent(FlexAlign.Center)
    .margin({ top: 10, bottom: 10 })
  }
  .onClick(() => this.loadMoreEngines())
}

性能优化建议

图片懒加载：对于发动机图片，实现懒加载功能
数据缓存：对常用数据进行本地缓存
预加载：预测用户可能查看的数据并提前加载
虚拟列表：对于大量数据使用虚拟列表技术
数据压缩：对于文本数据可以考虑压缩传输

注意事项

数据准确性：确保发动机技术参数的准确性
单位统一：保持所有数据的单位一致
多语言支持：考虑国际化的需求
图片版权：确保使用的发动机图片有合法版权
错误处理：妥善处理数据加载失败的情况

总结

通过AppGallery Connect的Cloud DB服务，我们实现了完整的汽车发动机型号展示功能，包括：

发动机型号列表展示
按品牌筛选
关键词搜索
分页加载
实时数据更新
详细参数展示

您可以根据实际需求进一步扩展功能，如：

发动机参数对比功能
用户收藏发动机功能
发动机技术解析文章
用户评论和评分功能
3D发动机模型展示

HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

HarmonyOS 6.1 跨端开发进阶：ArkUI-X从“一次开发”到“多端部署”的实战

Web容器（Cordova/WebView）：体验差，性能低，只是网页套壳。自绘引擎（React Native/Flutter）：性能好，但生态割裂，调试困难，包体积大。ArkUI-X（鸿蒙原生跨端）：基于鸿蒙原生渲染引擎，共享核心代码，保留平台特性，是真正的“一次开发，多端部署”。核心价值代码复用率90%+：业务逻辑、UI布局、状态管理完全复用。原生性能：不使用WebView，直接调用Skia渲