HarmonyOS 鸿蒙Next 店铺应用案例 鸿蒙场景化代码

发布于 1周前 作者 sinazl 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 店铺应用案例 鸿蒙场景化代码
<markdown _ngcontent-tjj-c147="" class="markdownPreContainer">

介绍

本示例构建了一个简单的店铺应用，应用案例内主要包含以下两个功能。

  • 消息页面，通过任务、消息、通报Tab的切换，实现消息的分类
  • 店掌页面，点击全部应用按钮后，自定义布局展示常用服务以及各类经营服务，点击编辑按钮可进行新增操作

店铺应用案例源码链接

效果图

图片名称

使用说明

  1. 进入应用后，首先展示店掌页面，点击按钮，即可进入全部应用页面。
  2. 在全部应用页面可以进行常用服务的查看，点击编辑按钮可以进行常用服务的新增。
  3. 点击返回后进入消息页面，可以查看任务页面，Tab组件展示待执行、待验收等任务类型，点击可进行切换。
  4. 点击消息按钮，切换页面，展示消息列表。
  5. 点击通报按钮，切换页面，展示通报信息列表。

实现思路

消息页面的构建

  1. 通过两层嵌套Tabs实现应用的不同页面的切换，消息页面的不同类型的切换。
深色代码主题
复制
Tabs({ controller: this.tabsController }) {
}
  .tabBar('店掌')

TabContent() {
Column() {
Row() {
···
Tabs({ controller: this.tabsController2 }) {
TabContent() {
this.taskTabContent()
}.tabBar(this.checkIndex(0, ‘任务’, $r(‘app.media.ic_task’)))
···
}
}
}
.tabBar(‘消息’)


TabContent() {
Text(‘商城’)
}
.tabBar(‘商城’)
···
}

  1. 使用List组件，实现消息列表的呈现；其中使用LazyForEach，相比ForEach在处理大量数据时有明显性能上的优势。
深色代码主题
复制
  listDataForEach(infoData: ListItemAdapter<InfoDataModel>) {
    LazyForEach(infoData, (item: InfoDataModel, index: number) => {
      if (item.previewType == PreviewType.Normal) {
        ListItem(){
        ···
        }
    }
  })
}

店掌页面的构建

  1. 实现数据处理能力，主要包括getList、setList、addList、totalCount等。
深色代码主题
复制
export class ListItemAdapter<T> implements IDataSource {
  private listItems: T[] = [];
  private listeners: DataChangeListener[] = [];
  ···
}
  1. 实现取消增加服务功能，实现对编辑中想要添加的图标进行取消操作；构造reset函数，将所有值置为0。
深色代码主题
复制
reset() {
  this.selectedItem = undefined
  this.scrollLen = 0
  this.dragStartX = 0
  this.dragStartY = 0
  this.dragOffsetX = 0
  this.dragOffsetY = 0
  this.offsetX = 0
  this.offsetY = 0
  this.scroller.scrollTo(this.scroller.currentOffset())
}
  1. 构造itemMove函数，函数的主要功能是用于将经营服务的一些图标添加到常用服务列表中。首先，使用splice方法从list数组中移除位置为index的元素，并存储在一个临时变量tmp中。这个操作会修改原始数组，并且tmp会包含北一出的元素。
深色代码主题
复制
itemMove(index: number, newIndex: number) {
  let tmp = this.list.splice(index, 1)
  this.list.splice(newIndex, 0, tmp[0])
}
  1. 构造handleDrag()函数，通过判断index的大小，决定要进行添加的位置；根据index的大小，总共分为下、上、右、左、右下、右上、左上、左下八个位置。
深色代码主题
复制
handleDrag() {
  let index = -1
  this.list.forEach((item: ItemInfo, i: number) => {
    ···
    if (index < 4) {
      return
    }
    this.itemMove(index, index - 4)
    this.dragOffsetY -= itemLength
    ···
  })
}
  1. 对于Grid组件的每个图标设置一个组合手势，其中包含一个长按手势LongPressGesture。GestureGroup创建一个手势组，其中手势按序列Sequence模式执行；LongPressGesture是一个长按手势，设置为可重复触发；.onAction()这是长按手势的处理函数，用于定义当长按手势被识别时应该执行的操作。
深色代码主题
复制
GestureGroup(GestureMode.Sequence,
  LongPressGesture({ repeat: true })
    .onAction((event?: GestureEvent) => {
      if (this.selectedItem === undefined && this.edit) {
        this.selectedItem = item
        this.dragStartX = Number(event?.target.area.globalPosition.x)
        this.dragStartY = Number(event?.target.area.globalPosition.y)
      }
    })
    .onActionEnd(() => {
      this.reset()
    }))

工程目录

深色代码主题
复制
entry/src/main/ets/
|---componet
|   |---NavTitle.ets              // 路由标题
|---entryability
|   |---EntryAbility.ets
|---entrybackupability
|   |---EntryBackupAbility.ets            
|---model
|   |---InfoModel.ets             // 数据模型
|   |---ListItemAdapter.ets       // 数据处理
|---pages
|   |---AllApps.ets               // 所有应用页
|   |---EditListComponent.ets     // 编辑应用组件
|   |---Index.ets                 // 主页

约束与限制

  • 手机ROM版本：ALN-AL00 5.0.0.102(SP8C00E73R4P17logpatch02)
  • IDE：DevEco Studio 5.0.3.910
  • SDK：HarmonyOS 5.0.0 Release（API 12）
</markdown>

更多关于HarmonyOS 鸿蒙Next 店铺应用案例 鸿蒙场景化代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
1 回复

更多关于HarmonyOS 鸿蒙Next 店铺应用案例 鸿蒙场景化代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对您提到的“HarmonyOS 鸿蒙Next 店铺应用案例 鸿蒙场景化代码”这一主题，以下是一些直接相关的内容：

HarmonyOS 鸿蒙Next在店铺应用中的场景化代码实现，主要依赖于其分布式技术和丰富的系统API。以下是一个简化的示例，用于展示如何在鸿蒙系统中实现店铺应用的某个特定场景，如商品展示和购买。

在鸿蒙系统中，您可以使用ArkUI（基于TS/JS的声明式UI框架）来构建用户界面。以下是一个简单的商品展示页面代码示例：

@Entry
@Component
struct ShopPage {
  @State items: Array<string> = ['商品1', '商品2', '商品3'];

  build() {
    Column() {
      ForEach(this.items, (item) => {
        Text(item)
          .fontSize(18)
          .onClick(() => {
            // 点击商品时的逻辑，如跳转到购买页面
          });
      });
    }
  }
}

上述代码展示了如何使用ArkUI来创建一个简单的商品列表页面，并添加点击事件处理逻辑。在实际应用中，您需要根据具体需求进一步丰富和完善界面逻辑，如添加商品详情、价格、购买按钮等。

请注意，上述代码仅为示例，并非完整的店铺应用实现。实际应用中可能需要考虑更多细节和功能。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部