概述

鸿蒙小游戏盒是一个基于HarmonyOS NEXT平台开发的综合性游戏管理应用，旨在为用户提供一个集中的平台来浏览、下载和管理各种小游戏。它类似于4399游戏盒，但专为鸿蒙系统设计，以充分利用其分布式能力和跨设备协同的特性。
1. 游戏共享
一键分享：用户可以轻松地将自己喜欢的小游戏分享给好友或社交网络，利用HarmonyOS提供的分享API实现社交分享功能
。
多渠道分享：支持将游戏分享到不同的社交平台和即时通讯工具，扩大游戏的传播范围。
分享管理：用户可以管理自己的分享历史，查看哪些游戏被分享过以及分享的效果。
2. 社交互动
好友系统：用户可以添加好友，构建自己的游戏社交网络，与好友一起发现和分享游戏。
即时通讯：支持即时消息发送，用户可以与好友进行实时聊天，讨论游戏策略和体验。
社交动态：用户可以发布游戏相关的动态，分享游戏成就和游戏时刻，构建游戏社区氛围。
3. 社交应用新生态
跨设备体验：利用鸿蒙Next的分布式技术，实现跨设备的无缝社交体验，让用户在不同设备间自由切换，保持社交互动的连续性
。
人工智能技术：引入智能推荐好友、智能聊天机器人等人工智能技术，提升用户体验和社交乐趣
---

下面是主要的一部分代码

1.跳转功能

实现页面跳转首先需要在main_page.json问卷里面添加要跳转的页面

{
  "src": [
    "pages/Index",
    "pages/GAME01",
    "pages/GAME02"
  ]
}

这段代码是一个JSON对象，通常用于配置文件中，它定义了一个名为src的数组，数组中包含了三个字符串元素。这些字符串看起来像是文件路径或标识符，指向了一些页面资源。

这个配置通常用于指定应用程序中页面的加载顺序或者页面的依赖关系。在一些前端框架或构建工具中，这样的配置可以帮助工具理解如何组织和构建页面资源。

在要跳转的界面里面加上类似的代码便可以实现点击时跳转

List({ space: 20 }) {
                ListItem() {
                  Row() {
                    Button("五子棋")
                      .fontColor("#66ccff")
                      .width(100)
                      .height(100)
                      .fontSize(20)
                      .borderRadius(50)
                      .onClick(() => {
                        router.pushUrl(this.GAME01)
                      })
                      .backgroundImage('xxx').backgroundImageSize({width: '100%', height: '100%'})
                  }
                }

2.页面设计

这段代码是一个使用HarmonyOS开发框架ArkUI编写的页面组件，它定义了一个名为Index的页面，该页面是一个具有底部导航栏（Tab Bar）的首页，包含四个主要功能模块：游戏、游戏好友、社区和我的。下面是对页面设计的详细解释：

页面结构

1. 底部导航栏（TabBar）：

   • 包含四个导航项，每个导航项由图标、名称和标题组成。

   • 当导航项被选中时，图标会变化，显示为选中状态的图标。

      CommonTabBar(item: TabBarClass) {
         Column() {
           Image(this.List[this.currentIndex].name === item.name ? item.selectIcon : item.icon)
             .width(20)
             .height(20)
     
           Text(item.title)
             .fontSize(12)
             .fontColor(this.List[this.currentIndex].name == item.name ? '#000000' :
             ("#000000"))
             .margin({
               top: 5
             })
         }
       }

     这段代码定义了一个名为 CommonTabBar 的方法，它是一个构建器（Builder）方法，用于创建底部导航栏（TabBar）中每个导航项的视图。这个方法接收一个参数 item，它是 TabBarClass 类型的对象，代表当前需要渲染的导航项。

     代码解析

   • Column()：

     • 使用 Column 组件创建一个垂直布局，用于排列导航项中的图标和标题。

   • Image：

     • Image 组件用于显示导航项的图标。

     • 图标选择逻辑：如果当前导航项（this.List[this.currentIndex].name）的名称与传入的 item 的名称相等，则显示选中状态的图标（item.selectIcon），否则显示普通状态的图标（item.icon）。

     • 图标尺寸被设置为宽20像素、高20像素。

   • Text：

     • Text 组件用于显示导航项的标题（item.title）。

     • 字体大小设置为12像素。

     • 字体颜色选择逻辑：如果当前导航项的名称与传入的 item 的名称相等，则字体颜色为黑色（'#000000'），否则也是黑色（这里可能是代码中的一个错误，因为无论是否选中，字体颜色都是黑色）。

     • 标题的外边距（margin）设置为顶部5像素，这样可以在图标和标题之间提供一些空间。

   • 功能描述

     CommonTabBar 方法的作用是为每个导航项创建一个包含图标和标题的视图。当用户切换不同的导航项时，这个方法会被调用，以更新显示的图标和标题，并根据当前选中的导航项来改变图标的状态（选中或未选中）。

2. 页面内容：

   • 根据当前选中的导航项，页面内容会显示不同的模块。

   • 使用Tabs和TabContent组件来实现底部导航与页面内容的联动。

导航项详情

• 游戏（game）：

  • 显示一个列表，包含两个游戏按钮：“五子棋”和“贪吃蛇”。

  • 点击按钮会跳转到对应的游戏页面。

• 游戏好友（connect）：

  • 显示Connect组件，可能用于展示游戏好友列表或相关社交功能。

• 社区（discover）：

  • 目前显示文本“页面已丢失”，暗示该功能尚未实现或页面内容缺失。

• 我的（my）：

• 显示my组件，可能用于展示用户的个人资料、设置等信息。

样式和动画

              }

            } else if (item.name === "connect") {
              Connect()
            } else if (item.name === "discover") {
              Text('页面已丢失')
            } else if (item.name === "my") {
              my()
            }
          }.tabBar(this.CommonTabBar(item))
        })
      }
      .barPosition(BarPosition.End)
      .animationDuration(300)
    }

• 图标和文本：

  • 导航项的图标和文本根据是否被选中来改变样式，例如选中时图标颜色变化。

• 按钮样式：

  • 游戏按钮具有圆角、字体颜色和背景图片，点击时会跳转到相应的游戏页面。

• 动画：

  • Tabs组件设置了300毫秒的动画持续时间，用于平滑切换页面内容。

3.个人页面

导入依赖

import router from '@ohos.router'

定义样式函数 content_formant

@Extend(Column) function content_formant(){
  .padding({top: 30, bottom: 35})
  .borderRadius('10')
  .width('94%')
  .backgroundColor(Color.White)
  .height(90)
  .shadow({
    radius: 6,
    color: "#000000",
    offsetX: 0,
    offsetY: 2,
  })
}

这个函数扩展了Column组件，定义了一个通用的样式，包括内边距、边框半径、宽度、背景颜色和阴影效果。

@Component
struct my {

这部分代码声明了一个ArkUI组件my

if (1){
  // ... 用户已登录时的UI逻辑
} else {
  // ... 用户未登录时的UI逻辑
}

这部分代码根据用户是否登录显示不同的界面。如果用户已登录（这里用if (1)表示，实际开发中应替换为真实的用户登录状态检查），显示用户的头像、姓名和一个进入个人页面的按钮。如果用户未登录，显示一个欢迎信息和一个登录/注册按钮。

 async aboutToAppear(){
    if (1) {
      console.log('Tag', 'Mine：aboutToAppear', 1)
    } else {
      console.log('Tag', 'Mine：aboutToAppear', 'user == null')
    }

  }

这段代码是一个异步的生命周期方法 aboutToAppear，它通常在组件即将出现在屏幕上时被调用。这个方法用于执行一些在组件显示之前需要完成的任务，比如数据预加载、界面更新等

异步关键字 (async):

async 关键字用于声明一个函数是异步的，这意味着函数内部可以使用 await 关键字来等待一个异步操作的完成。在这个例子中，尽管函数被声明为异步的，实际上并没有使用 await，这可能是因为未来的代码更新中可能会加入异步操作。
条件判断:

if (1): 这个条件始终为真，因为 1 在JavaScript中被视为真值（truthy）。这意味着 if 语句块总是会被执行。
else: 由于 if 条件始终为真，else 语句块实际上永远不会被执行。
日志输出:

console.log('Tag', 'Mine：aboutToAppear', 1): 如果用户已登录（或条件为真），则在控制台输出日志，表明 aboutToAppear 方法被调用，并且用户信息存在。
console.log('Tag', 'Mine：aboutToAppear', 'user == null'): 如果用户未登录（或条件为假），则输出用户信息不存在的日志。然而，由于 if 条件始终为真，这个日志实际上不会被输出。

总结

1.HarmonyOS和ArkUI框架的理解
学习了HarmonyOS操作系统的基本概念和特性，特别是其分布式架构和跨设备能力。
掌握了ArkUI框架的核心组件和布局方式，如Column、Row、Image、Text和Button等。
理解了ArkUI的声明式UI设计方法，以及如何通过声明式代码来构建动态和响应式的用户界面。
2. 组件化开发
通过@Component和@Entry装饰器，学会了如何在ArkUI中定义和组织组件。
掌握了组件的生命周期方法，如aboutToAppear，以及如何在适当的时机执行数据加载和状态更新。
3. 条件渲染和状态管理
学习了如何根据应用的状态（如用户登录状态）进行条件渲染。
掌握了使用@State装饰器来管理组件内部状态的方法。
4. 路由和导航
了解了如何在HarmonyOS应用中使用router模块进行页面间的导航。
学会了使用pushUrl和replaceUrl方法来控制页面跳转和历史堆栈。
5. 样式和布局设计
学习了如何使用ArkUI提供的样式属性来设计美观的界面，包括padding、borderRadius、width、height、backgroundColor和shadow等。
掌握了如何通过布局和样式来提升用户体验。

本博客文章（以下简称“本文章”）提供的信息仅供参考之用，不构成任何形式的专业建议或服务。在任何情况下，文章作者或发布平台不对任何人因使用本文章内容所引致的任何直接、间接、附带、特殊、惩罚性或后果性损害负责，包括但不限于业务中断、数据或利润损失，无论这些损害是基于合同责任、侵权行为还是其他原因，即使已被告知此类损害的可能性。

本文章可能包含对第三方网站或资源的引用或链接。这些链接是为了方便读者而提供，我们不控制这些第三方网站或资源，也不对它们的可用性、内容、广告、产品或其他材料负责。包含这些链接并不意味对这些网站或资源的认可，也不对它们的内容负责。

概述

鸿蒙小游戏盒是一个基于HarmonyOS NEXT平台开发的综合性游戏管理应用，旨在为用户提供一个集中的平台来浏览、下载和管理各种小游戏。它类似于4399游戏盒，但专为鸿蒙系统设计，以充分利用其分布式能力和跨设备协同的特性。
1. 游戏共享
一键分享：用户可以轻松地将自己喜欢的小游戏分享给好友或社交网络，利用HarmonyOS提供的分享API实现社交分享功能
。
多渠道分享：支持将游戏分享到不同的社交平台和即时通讯工具，扩大游戏的传播范围。
分享管理：用户可以管理自己的分享历史，查看哪些游戏被分享过以及分享的效果。
2. 社交互动
好友系统：用户可以添加好友，构建自己的游戏社交网络，与好友一起发现和分享游戏。
即时通讯：支持即时消息发送，用户可以与好友进行实时聊天，讨论游戏策略和体验。
社交动态：用户可以发布游戏相关的动态，分享游戏成就和游戏时刻，构建游戏社区氛围。
3. 社交应用新生态
跨设备体验：利用鸿蒙Next的分布式技术，实现跨设备的无缝社交体验，让用户在不同设备间自由切换，保持社交互动的连续性
。
人工智能技术：引入智能推荐好友、智能聊天机器人等人工智能技术，提升用户体验和社交乐趣
---

下面是主要的一部分代码

1.跳转功能

实现页面跳转首先需要在main_page.json问卷里面添加要跳转的页面

{
  "src": [
    "pages/Index",
    "pages/GAME01",
    "pages/GAME02"
  ]
}

这段代码是一个JSON对象，通常用于配置文件中，它定义了一个名为src的数组，数组中包含了三个字符串元素。这些字符串看起来像是文件路径或标识符，指向了一些页面资源。

这个配置通常用于指定应用程序中页面的加载顺序或者页面的依赖关系。在一些前端框架或构建工具中，这样的配置可以帮助工具理解如何组织和构建页面资源。

在要跳转的界面里面加上类似的代码便可以实现点击时跳转

List({ space: 20 }) {
                ListItem() {
                  Row() {
                    Button("五子棋")
                      .fontColor("#66ccff")
                      .width(100)
                      .height(100)
                      .fontSize(20)
                      .borderRadius(50)
                      .onClick(() => {
                        router.pushUrl(this.GAME01)
                      })
                      .backgroundImage('xxx').backgroundImageSize({width: '100%', height: '100%'})
                  }
                }

2.页面设计

这段代码是一个使用HarmonyOS开发框架ArkUI编写的页面组件，它定义了一个名为Index的页面，该页面是一个具有底部导航栏（Tab Bar）的首页，包含四个主要功能模块：游戏、游戏好友、社区和我的。下面是对页面设计的详细解释：

页面结构

1. 底部导航栏（TabBar）：

   • 包含四个导航项，每个导航项由图标、名称和标题组成。

   • 当导航项被选中时，图标会变化，显示为选中状态的图标。

      CommonTabBar(item: TabBarClass) {
         Column() {
           Image(this.List[this.currentIndex].name === item.name ? item.selectIcon : item.icon)
             .width(20)
             .height(20)
     
           Text(item.title)
             .fontSize(12)
             .fontColor(this.List[this.currentIndex].name == item.name ? '#000000' :
             ("#000000"))
             .margin({
               top: 5
             })
         }
       }

     这段代码定义了一个名为 CommonTabBar 的方法，它是一个构建器（Builder）方法，用于创建底部导航栏（TabBar）中每个导航项的视图。这个方法接收一个参数 item，它是 TabBarClass 类型的对象，代表当前需要渲染的导航项。

     代码解析

   • Column()：

     • 使用 Column 组件创建一个垂直布局，用于排列导航项中的图标和标题。

   • Image：

     • Image 组件用于显示导航项的图标。

     • 图标选择逻辑：如果当前导航项（this.List[this.currentIndex].name）的名称与传入的 item 的名称相等，则显示选中状态的图标（item.selectIcon），否则显示普通状态的图标（item.icon）。

     • 图标尺寸被设置为宽20像素、高20像素。

   • Text：

     • Text 组件用于显示导航项的标题（item.title）。

     • 字体大小设置为12像素。

     • 字体颜色选择逻辑：如果当前导航项的名称与传入的 item 的名称相等，则字体颜色为黑色（'#000000'），否则也是黑色（这里可能是代码中的一个错误，因为无论是否选中，字体颜色都是黑色）。

     • 标题的外边距（margin）设置为顶部5像素，这样可以在图标和标题之间提供一些空间。

   • 功能描述

     CommonTabBar 方法的作用是为每个导航项创建一个包含图标和标题的视图。当用户切换不同的导航项时，这个方法会被调用，以更新显示的图标和标题，并根据当前选中的导航项来改变图标的状态（选中或未选中）。

2. 页面内容：

   • 根据当前选中的导航项，页面内容会显示不同的模块。

   • 使用Tabs和TabContent组件来实现底部导航与页面内容的联动。

导航项详情

• 游戏（game）：

  • 显示一个列表，包含两个游戏按钮：“五子棋”和“贪吃蛇”。

  • 点击按钮会跳转到对应的游戏页面。

• 游戏好友（connect）：

  • 显示Connect组件，可能用于展示游戏好友列表或相关社交功能。

• 社区（discover）：

  • 目前显示文本“页面已丢失”，暗示该功能尚未实现或页面内容缺失。

• 我的（my）：

• 显示my组件，可能用于展示用户的个人资料、设置等信息。

样式和动画

              }

            } else if (item.name === "connect") {
              Connect()
            } else if (item.name === "discover") {
              Text('页面已丢失')
            } else if (item.name === "my") {
              my()
            }
          }.tabBar(this.CommonTabBar(item))
        })
      }
      .barPosition(BarPosition.End)
      .animationDuration(300)
    }

• 图标和文本：

  • 导航项的图标和文本根据是否被选中来改变样式，例如选中时图标颜色变化。

• 按钮样式：

  • 游戏按钮具有圆角、字体颜色和背景图片，点击时会跳转到相应的游戏页面。

• 动画：

  • Tabs组件设置了300毫秒的动画持续时间，用于平滑切换页面内容。

3.个人页面

导入依赖

import router from '@ohos.router'

定义样式函数 content_formant

@Extend(Column) function content_formant(){
  .padding({top: 30, bottom: 35})
  .borderRadius('10')
  .width('94%')
  .backgroundColor(Color.White)
  .height(90)
  .shadow({
    radius: 6,
    color: "#000000",
    offsetX: 0,
    offsetY: 2,
  })
}

这个函数扩展了Column组件，定义了一个通用的样式，包括内边距、边框半径、宽度、背景颜色和阴影效果。

@Component
struct my {

这部分代码声明了一个ArkUI组件my

if (1){
  // ... 用户已登录时的UI逻辑
} else {
  // ... 用户未登录时的UI逻辑
}

这部分代码根据用户是否登录显示不同的界面。如果用户已登录（这里用if (1)表示，实际开发中应替换为真实的用户登录状态检查），显示用户的头像、姓名和一个进入个人页面的按钮。如果用户未登录，显示一个欢迎信息和一个登录/注册按钮。

 async aboutToAppear(){
    if (1) {
      console.log('Tag', 'Mine：aboutToAppear', 1)
    } else {
      console.log('Tag', 'Mine：aboutToAppear', 'user == null')
    }

  }

这段代码是一个异步的生命周期方法 aboutToAppear，它通常在组件即将出现在屏幕上时被调用。这个方法用于执行一些在组件显示之前需要完成的任务，比如数据预加载、界面更新等

异步关键字 (async):

async 关键字用于声明一个函数是异步的，这意味着函数内部可以使用 await 关键字来等待一个异步操作的完成。在这个例子中，尽管函数被声明为异步的，实际上并没有使用 await，这可能是因为未来的代码更新中可能会加入异步操作。
条件判断:

if (1): 这个条件始终为真，因为 1 在JavaScript中被视为真值（truthy）。这意味着 if 语句块总是会被执行。
else: 由于 if 条件始终为真，else 语句块实际上永远不会被执行。
日志输出:

console.log('Tag', 'Mine：aboutToAppear', 1): 如果用户已登录（或条件为真），则在控制台输出日志，表明 aboutToAppear 方法被调用，并且用户信息存在。
console.log('Tag', 'Mine：aboutToAppear', 'user == null'): 如果用户未登录（或条件为假），则输出用户信息不存在的日志。然而，由于 if 条件始终为真，这个日志实际上不会被输出。

总结

1.HarmonyOS和ArkUI框架的理解
学习了HarmonyOS操作系统的基本概念和特性，特别是其分布式架构和跨设备能力。
掌握了ArkUI框架的核心组件和布局方式，如Column、Row、Image、Text和Button等。
理解了ArkUI的声明式UI设计方法，以及如何通过声明式代码来构建动态和响应式的用户界面。
2. 组件化开发
通过@Component和@Entry装饰器，学会了如何在ArkUI中定义和组织组件。
掌握了组件的生命周期方法，如aboutToAppear，以及如何在适当的时机执行数据加载和状态更新。
3. 条件渲染和状态管理
学习了如何根据应用的状态（如用户登录状态）进行条件渲染。
掌握了使用@State装饰器来管理组件内部状态的方法。
4. 路由和导航
了解了如何在HarmonyOS应用中使用router模块进行页面间的导航。
学会了使用pushUrl和replaceUrl方法来控制页面跳转和历史堆栈。
5. 样式和布局设计
学习了如何使用ArkUI提供的样式属性来设计美观的界面，包括padding、borderRadius、width、height、backgroundColor和shadow等。
掌握了如何通过布局和样式来提升用户体验。

本博客文章（以下简称“本文章”）提供的信息仅供参考之用，不构成任何形式的专业建议或服务。在任何情况下，文章作者或发布平台不对任何人因使用本文章内容所引致的任何直接、间接、附带、特殊、惩罚性或后果性损害负责，包括但不限于业务中断、数据或利润损失，无论这些损害是基于合同责任、侵权行为还是其他原因，即使已被告知此类损害的可能性。

本文章可能包含对第三方网站或资源的引用或链接。这些链接是为了方便读者而提供，我们不控制这些第三方网站或资源，也不对它们的可用性、内容、广告、产品或其他材料负责。包含这些链接并不意味对这些网站或资源的认可，也不对它们的内容负责。