HarmonyOS 5.0 Next实战应用开辟—‘我的家乡’【HarmonyOS Next华为公司完 ...

HarmonyOS 5.0 Next

HarmonyOS NEXT是鸿蒙扬弃Linux内核及安卓开放源代码项目（AOSP）等代码的首个大版本，该系统仅支持鸿蒙内核和鸿蒙系统的应用，不再兼容安卓应用。
引入了“和谐美学”计划理念，通过先辈的物理渲染引擎，精致地还原了真实天下的光影色彩与时空力感，为用户呈现更加沉浸、多彩且灵动的感官体验。
应用图标计划巧妙融入了国画的理念，用恰到好处的留白代替繁复的内容展示，同时结合取色与实时含糊技术，展示着中式美学的均衡与和谐之感。
智慧美学构图功能强大，可以或许智能识别并裁剪出风景或人物的最佳比例，共同不同字体及位置，使得壁纸的整体结果更加和谐、雅观。
HarmonyOS NEXT作为华为自研的操作系统，在技术创新、计划理念、创新功能以及生态发展等方面都取得了显著成果。它的发布不但为用户带来了更加便捷、智能的体验，也为华为在智能设备协同领域的发展奠定了坚固基础。

HarmonyOS NEXT作为华为自研的操作系统，具有一系列独特的功能特点，这些特点旨在提升用户体验、增强设备间的协同性以及保障系统的安全性和稳定性。以下是对HarmonyOS NEXT功能特点的详细先容：
原生鸿蒙应用支持：
HarmonyOS NEXT是首个完全基于鸿蒙内核和鸿蒙系统应用构建的版本，不再依赖Linux内核及安卓开放源代码项目（AOSP）等代码。
这意味着用户将可以或许体验到更加纯净、高效的鸿蒙系统，同时享受专为鸿蒙系统计划的原生应用。
设备协同与接续功能：
HarmonyOS NEXT强化了设备间的协同能力，使得用户可以在不同设备间无缝切换任务。
例如，用户可以在手机上开始阅读一篇文章，然后在平板或电脑上继承阅读，而无需重新加载或查找内容。
这种接续功能支持多种场景，如阅读、创作、修图、看视频等，并适配了众多第三方应用。
智慧美学计划：
HarmonyOS NEXT引入了“和谐美学”计划理念，通过先辈的物理渲染引擎和精致的光影色彩与时空力感呈现，为用户带来更加沉浸、多彩且灵动的感官体验。
应用图标计划巧妙融入了国画理念，用留白代替繁复的内容展示，同时结合取色与实时含糊技术，显现中式美学的均衡与和谐。
安全与隐私掩护：
HarmonyOS NEXT留意用户的数据安全和隐私掩护，接纳了多项安全步伐来确保用户信息的安全。
例如，系统提供了数据加密、隐私权限管理等功能，让用户可以或许更加放心地使用设备。
分布式技术：
HarmonyOS NEXT利用了分布式技术，使得不同设备可以构成一个超级终端，实现资源共享和协同工作。
这种技术为用户带来了更加便捷、高效的使用体验，如跨设备文件传输、跨设备通话等。
开辟者支持：
HarmonyOS NEXT为开辟者提供了丰富的开辟工具和资源，帮助他们更轻松地创建和优化鸿蒙应用。
这些工具和资源包括开辟工具包（SDK）、模仿器、文档等，有助于降低开辟门槛并提高开辟效率。
持续更新与升级：
HarmonyOS NEXT将持续进行更新和升级，以修复已知问题、引入新功能并提升系统性能。

华为将定期发布更新包，确保用户可以或许始终享受到最新、最稳定的系统版本。
综上所述，HarmonyOS NEXT具有原生鸿蒙应用支持、设备协同与接续功能、智慧美学计划、安全与隐私掩护、分布式技术、开辟者支持以及持续更新与升级等独特的功能特点。这些特点使得HarmonyOS NEXT在用户体验、设备协同以及系统安全性等方面都取得了显著的提升。
一．HarmonyOS Next—华为公司完全自研的操作系统

2024年1月18日鸿蒙生态千帆启航仪式在深圳举行，正式揭开纯血鸿蒙的新篇章。“轻舟已过万重山”鸿蒙操作系统以令天下惊艳的速度成长，成为iOS和安卓的有力竞争者，推翻了他们的双头垄断职位。仅仅四年的时间，使用鸿蒙系统的设备已经超过7亿，而到场鸿蒙开辟的开辟者数量也超过了220万。
经过多年的努力，华为鸿蒙系统加速了生态系统的构建，其发展计划也十分明确：兼容→搬迁→脱离安卓。目前，华为鸿蒙生态接入设备数量已超过7亿台。在基于华为鸿蒙系统的使用过程中，用户和开辟者都已经形成了新的风俗，因此在2024年第一季度，鸿蒙系统的NEXT星河版本将不再兼容Android。

1.1什么是HarmonyOS Next？

HarmonyOS NEXT是华为公司自研的操作系统，它是鸿蒙扬弃Linux内核及安卓开放源代码项目（AOSP）等代码的首个大版本，该系统仅支持鸿蒙内核和鸿蒙系统的应用，不再兼容安卓应用，因此被称为“纯血鸿蒙”。
HarmonyOS NEXT接纳了轻量化的计划理念，针对不同设备进行定制化开辟，使得系统运行更加流畅、高效。同时，该系统还提供了丰富的开辟工具和组件，让开辟者可以或许更加便捷地构建应用，降低了开辟门槛。
在安全性方面，HarmonyOS NEXT接纳了更加严格的数据加密和隐私掩护步伐，确保用户数据的安全可靠。同时，它还支持可信实行环境，为开辟者提供了更加安全的应用运行环境。

此外，华为积极构建HarmonyOS NEXT生态圈，与众多厂商和开辟者互助，共同打造一个开放、共享、繁荣的应用生态。在2024年，华为计划协助企业和机构在年底开辟逾5000个鸿蒙原生应用，最终实现超50万个原生应用的开辟。
在最新的发展动态中，高德开放平台已经发布了HarmonyOS NEXT定位、舆图SDK，助力鸿蒙生态发展。这表明，基于HarmonyOS NEXT开辟的鸿蒙原生应用能力正在逐步增强，鸿蒙生态也在持续强大。
HarmonyOS NEXT作为华为自研的操作系统，不但具有高效、安全、轻量化等特点，还在不停推动鸿蒙生态的发展和完善，为将来的智能设备和应用开辟提供了更多的大概性。
1.2HarmonyOS Next三大焦点技术理念

1.一次开辟，多端部署。

一次开辟，多端部署指的是一个工程，一次开辟上架，多端按需部署。目标是支持开辟者高效地开辟多种终端设备上的应用。为了实现这一目标，鸿蒙系统提供了几个焦点能力，包括多端开辟环境，多端开辟能力以及多端分发机制。一次开辟，多端部署是HarmonyOS Next的一项紧张特性和焦点理念。
开辟者们只必要使用一套API进行开辟，就可以或许同时顺应手机、平板、智能电视等各种范例的设备。这样大大降低了开辟的复杂性和本钱，提升了开辟效率。

2.可分可合，自由流转。

HarmonyOS Next接纳了分布式体系架构，可以或许实现多设备间的资源共享和协同。这使得在多设备环境下的应用体验可以或许自由地在各个设备间流转，包管了用户体验的连贯性和丰富性。
可分可合是指鸿蒙生态中的应用和服务可以根据必要进行拆分和组合。在开辟过程中，开辟者通过业务解耦，将不同的业务拆分为多个模块。
在应用部署阶段，开辟者可以自由组合一个或多个模块，打包成一个应用程序包（App Pack），以便同一上架。
在分发和运行阶段，每个模块可以独立分发，以满足用户单一的使用场景，也可以组合多模块以满足用户更复杂的使用场景。

自由流转是指这些拆分和组合后的应用和服务可以在鸿蒙生态中自由流转。鸿蒙系统通过同一的账户体系和设备认证机制，实现了不同设备之间的无缝连接和协同工作。这意味着用户可以在不同设备之间自由切换，而无需担心数据和服务的同步问题。
同时，鸿蒙系统还支持跨设备任务接续和资源共享，用户可以在不同设备上无缝继承之前的工作或娱乐体验。自由流转可分为跨端迁徙和多端协同两种环境。他们分别是时间上的串行交互和时间上的并行交互。自由流转不但带给用户全新的交互体验，也为开辟者搭建了一座从单设备时代通往多设备时代的桥梁。
3.同一生态，原生智能。

同一生态，原生智能意味着HarmonyOS Next在不同设备间构建了同一的操作逻辑和用法，用户在各个设备间切换时得到的都是一致的用户体验。
同时，分布式系统的计划使得智能可以或许广泛地应用于系统中，提升了系统对用户需求的洞察力和满足力。通过同一生态，鸿蒙成功构建了一个开放、共生、共荣的开辟者环境，使得开辟者可以或许在这个平台上共享资源、技术和经验，同时HarmonyOS与OpenHarmony同一生态，共同推动鸿蒙生态的繁荣发展。
鸿蒙系统内置强大的 AI 能力，面向鸿蒙生态应用的开辟，通过不同条理的AI能力开放， 满足开辟者的不同开辟场景下的诉求，降低应用的开辟门槛，帮助开辟者快速实现应用智能化。
二．HarmonyOS Next 两种应用形态

HarmonyOS应用（也被称为鸿蒙OS应用） 是指利用HarmonyOS SDK开辟的应用程序，在华为终端设备（例如手机、平板等）上运行，这些应用有两种形态。

• 传统方式的应用，必要用户进行安装的应用包。
  
• 元服务，是一种轻量级的应用情势，无需安装即可使用，随时随地提供服务，具有直接接入服务、灵活自由流通等关键特点。
  

2.1什么是HarmonyOS Next元服务？

鸿蒙元服务是华为鸿蒙操作系统中提供的一系列焦点服务。它是基于HarmonyOS API的全新服务提供方式，具有即用即走、信息外显、服务直达的特性。
鸿蒙元服务仅需开辟一次，即可支持多终端设备运行，并以鸿蒙全能卡片等多种呈现形态，向用户提供更轻量化的服务。鸿蒙全能卡片是元服务最主要的呈现形态之一，每一个全能卡片都是在桌面上“永久打开的”元服务/应用，将元服务/应用的紧张信息以卡片的情势展示在桌面，通过轻量交互行为实现服务直达。

鸿蒙元服务还涵盖了设备接入、资源调理、分布式能力等多个方面。它提供了强大的设备接入能力，支持各类智能设备快速接入操作系统，并可以或许充分利用设备的硬件资源。这意味着用户可以通过鸿蒙系统将多个设备连接到一起，实现灵活的设备互联，享受更加便捷、高效和安全的智能互联体验。
鸿蒙元服务是鸿蒙操作系统的紧张构成部分，通过提供焦点服务和优化设备间的互联互通，为用户带来了更精彩的智能设备使用体验。
2.2元服务的呈现形态和优点

鸿蒙全能卡片是元服务最主要的呈现形态之一（其他形态如语音、图标等），每一个全能卡片都是在桌面上“永久打开的”元服务/应用，将元服务/应用的紧张信息以卡片的情势展示在桌面，通过轻量交互行为实现服务直达。
（1）免安装，更轻量化地将服务带给用户
（2）一键服务直达，将用户感兴趣的内容前置、外显
（3）跨端转移，多终端设备间无缝流转
（4）情景智能卡片保举，随心定制、更懂用户

三.Harmony Next 实战—“我的家乡”元服务

在广袤无垠的草原上，奔驰的骏马是自由的象征，也是家乡独特的风景线。在这个充满活力和魅力的地方，我基于华为鸿蒙操作系统HarmonyOS Next，倾力打造了一款名为我的家乡”的元服务。
3.1视频演示

账号迁徙中，视频临时下架。
3.2项目构建

这些服务以新型应用程序形态呈现，相比传统必要安装的应用形态，更加轻量，同时提供更丰富的入口和更精准的分发。
在创建项目标模板选择页面选择Atomic Service和Empty Ability（空模板），创建元服务工程

创建成功后，DevEco Stdio就会创建整个应用，并且主动天生工程代码。
IDE界面说明如下。

• 目次工程区主要用于管理和组织相关的工程文件、数据和其他资源。
  
• 代码编辑区提供了一个可视化的界面，让开辟者可以或许直接输入和编辑代码。具有语法高亮功能，可以或许主动识别和显示代码中不同元素（如变量、函数、关键字等）的颜色，从而提高代码的可读性。集成了错误检查工具，可以或许在开辟者输入代码时实时检查语法错误和潜在问题。此外，通过连接调试器，开辟者可以在编辑区内设置断点、查看变量值、实行单步调试等操作，帮助定位和解决问题。
  
• 预览区是一个专门用于展示应用界面计划结果的区域，开辟者可以在此查看和调试UI组件的结构、样式以及交互结果，从而确保应用界面的正确性和雅观性。支持结构调试功能，开辟者可以通过调整组件的位置、大小、边距等属性，实时查看结构变化。这有助于快速发现并修复结构问题，提高界面的可用性和雅观性。
  
• 通知栏是一个多功能区域，为开辟者提供了丰富的工具和操作选项，有助于提高开辟效率和代码质量。实时显示代码的错误、告诫和提示信息，帮助开辟者实时发现和修复问题。同时，它还显示项目标构建状态、调试状态等信息，让开辟者相识项目标当前环境等等。
  

3.3登录页面构建

登录页面（Login Page）是一个用于用户进行身份验证的界面。在网站、应用程序或系统中，登录页面是用户输入其用户名和暗码，以验证其身份并访问受掩护的资源的地方。

对于本案例来说，登录页面主要是UI的计划。
焦点代码如下：

1.   Column(){
2.       Image($r("app.media.logo")).width(400).margin({
3.         bottom:60
4.       })
6.       Column(){
7.         Text("用户名").fontWeight(FontWeight.Bold).margin({
8.           bottom:14
9.         })
10.         Row(){
11.           Image($r("app.media.user")).width(30)
12.           TextInput({
13.             placeholder:"请输入用户名",
14.             text:this.username
15.           }).width("70%")
16.             .onChange((value:string) => {
17.               this.username = value
18.             })
19.             .margin({
20.               bottom:14,
21.               left:14
22.             })
23.         }
24.         Divider().width("80%").margin({
25.           bottom:14
26.         })
27.         Text("密码").fontWeight(FontWeight.Bold).margin({
28.           top:10,
29.           bottom:14
30.         })
31.         Row(){
32.           Image($r("app.media.password")).width(30)
33.           TextInput({
34.             placeholder:"请输入密码",
35.             text:this.password,
36.           }).width("70%")
37.             .onChange((value:string) => {
38.               this.password = value
39.             })
40.             .margin({
41.               bottom:14,
42.               left:14
43.             })
44.             .type(InputType.Password)
46.         }
47.         Divider().width("80%").margin({
48.           bottom:14
49.         })
50.       }.alignItems(HorizontalAlign.Start)
51.       Row(){
52.         Blank()  
53.         Text("忘记密码？").fontColor('#ffcac7c7')
54.       }.width("60%").margin({
55.         left:50,
56.         top:20
57.       }).onClick(()=>{
58.         router.pushUrl({
59.           url:"pages/tabs"
60.         })
61.       })
62.       Button("登录").width(150).backgroundColor('#1086f0')
63.         .margin({
64.           top:30,
65.           bottom:30
66.         }).onClick(() => {
67.         router.pushUrl({
68.           url:"pages/tabs",
69.           params:{
70.             name:this.username
71.           }
72.         })
73.       })
75.       Text("立即注册").margin({
76.         top:20
77.       }).fontColor('black')
78.         .onClick(()=>{
79.           router.pushUrl({
80.             url:"pages/RegisterPage"
81.           })
82.         }).fontWeight(FontWeight.Bold)
84.     }.backgroundImage('/picture/background.jpg',ImageRepeat.NoRepeat)
85.     .backgroundImageSize(ImageSize.Cover)
86.     .border({ width: 1 })
87.     .width("100%").height("100%").alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center)

复制代码

3.4自定义底部导航页签

自定义底部导航页签在移动应用中起着关键作用。它们不但提供了导航和定位的功能，使用户可以轻松欣赏应用的各个部分，而且位于手机屏幕底部，便于用户操作。这种计划不但增强了用户体验，还提高了应用的可用性和可发现性。通过保持一致的用户界面，底部导航页签另有助于用户更快地顺应不同应用程序，并且在美学和计划方面也能提升应用的整体品质。

1. import { homepage } from './homepage'
2. import router from '@ohos.router';
3. import { CommuityPage } from './dynamic'
4. import { Personal } from './Personal'
5. @Entry
6. @Component
7. struct Index {
8.   @State currentIndex: number = 0
9.   private controller: TabsController = new TabsController()
10.   @State filterText: string = ''; // 添加一个状态用于保存搜索框的值
11.   // 自定义导航页签的样式
12.   @Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
13.     Column() {
14.       Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
15.         .size({ width: 25, height: 25 })
16.       Text(title)
17.         .fontColor(this.currentIndex === targetIndex ? '#28bff1' : '#8a8a8a')
18.     }
19.     .width('100%')
20.     .height(50)
21.     .justifyContent(FlexAlign.Center)
22.     .onClick(() => {
23.       this.currentIndex = targetIndex
24.       this.controller.changeIndex(this.currentIndex)
25.     })
26.   }
28.   build() {
29.     Column() {
30.       Tabs({
31.         barPosition: BarPosition.End,
32.         controller: this.controller
33.       }) {
34.         TabContent() {
35.           homepage()
36.         }.tabBar(this.TabBuilder('首页', 0, $r('app.media.indexinco'), $r('app.media.indexinco')))
38.         TabContent() {
39.           Column() {
40.             CommuityPage()
41.           }.size({ width: '100%', height: '100%' })
42.         }.tabBar(this.TabBuilder('内蒙古动态', 1, $r('app.media.dongtai2'), $r('app.media.dongtai2')))
44.         TabContent() {
45.           Column() {
46.             Personal()
47.           }.size({ width: '100%', height: '100%' })
48.         }.tabBar(this.TabBuilder('我的', 2, $r('app.media.user1'), $r('app.media.user1')))
49.       }.scrollable(false) // 禁止滑动切换
50.     }
51.     .width('100%')
52.     .height('100%')
53.   }
54. }

复制代码

页面组件，以@Entry和@Component注解标识，定名为Index。它导入了相关组件和库，并定义了一系列状态变量，如currentIndex和filterText，用于管理页面状态。通过Tabs组件实现了标签页功能，每个标签页对应不同的子页面（如homepage、CommuityPage和Personal），并提供了自定义导航页签样式的功能。
3.5首页页面构建

首页页面是任何网站或应用程序的流派，承载着多重紧张功能。起首，它是用户与网站或应用程序首次打仗的地方，因此扮演着转达品牌形象、引导用户的角色。其次，首页提供了对整体内容的概览，使用户可以快速相识焦点特点和价值。
同时，通过明确的导航和吸引人的计划，首页还能促进用户转化和完成故意义的行为。此外，首页也是展示品牌定位和风格的平台，有助于增强用户对品牌的认知。最后，通过优化首页内容和结构，还能提高页面流量和搜索引擎优化结果。因此，首页页面在网站或应用程序中扮演着不可或缺的关键角色。

页面内导航代码如下：

1. Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
2.     // 页面1
3.     TabContent() {
4.         // 页面内容，包括图片、文字等
5.     }.tabBar(this.TabBuilder(0, '自然景观'))
7.     // 页面2
8.     TabContent() {
9.         // 页面内容，包括图片、文字等
10.     }.tabBar(this.TabBuilder(1, '民族文化'))
12.     // 页面3
13.     TabContent() {
14.         // 页面内容，包括图片、文字等
15.     }.tabBar(this.TabBuilder(2, '特色美食'))
16. }

复制代码

我创建了一个 Tabs（标签页）组件，此中包含三个标签页（页面1、页面2、页面3）。每个标签页的内容由 TabContent() 函数定义，而标签栏（tabBar）则由 TabBuilder 函数定义。 TabBuilder 是一个自定义的函数，根据给定的索引和名称构建了一个标签。
自定义类TabBuilder代码如下：

1.   @Builder TabBuilder(index: number, name: string) {
2.     Column() {
3.       Text(name)
4.         .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
5.         .fontSize(16)
6.         .fontWeight(this.currentIndex === index ? 500 : 400)
7.         .lineHeight(22)
8.         .margin({ top: 0, bottom: 0 })
10.     }.width('100%')
11.   }

复制代码

以上代码展示了一个首页页面的示例，主要包括了轮播图、搜索框和选项卡等元素，以及与之相关的交互逻辑。在该页面中，用户可以欣赏不同类别的内容，如天然景观、民族文化和特色美食，并通过选项卡进行切换。每个选项卡下面都列有相应类别的内容，用户点击后可跳转至详细页面。
总体而言，该首页页面具有以下特点和功能：

• 精良的结构计划：使用了适当的分列和结构，使页面内容清晰易读。
  
• 交互性强：添加了点击事件处理函数，实现了用户点击后的页面跳转功能。
  
• 多样化的内容展示：展示了不同类别的内容，满足了用户多样化的欣赏需求。
  
• 搜索功能：提供了搜索框，使用户可以根据关键字搜索感兴趣的内容。
  
• 使用了Tabs组件进行页面内容切换，增强了用户体验。
  

该首页页面计划公道，功能丰富，可以或许有效地引导用户欣赏和交互，提升了应用的用户体验。
3.6仿小某书动态页面构建

仿小某书动态页面是一种交际化的内容展示平台，其主要作用在于促进用户之间的互动和内容分享。通过用户可以发布、欣赏和批评朋友们的动态内容，提供了一个互换的空间。这种交际互动不但增强了用户之间的接洽，也增长了用户对平台的粘性和活跃度。同时，动态页面也为用户提供了一个分享自己生活、观点和兴趣的平台，从而推广了各种情势的内容，包括文字、图片等。

自定义组件焦点代码如下：

1. 自定义组件核心代码如下：
2. build() {
3.     Row(){
4.       Column() {
5.         Image(this.img).width(170).height(150)
6.           .sharedTransition('sharedImage1', { duration: 1000, curve: Curve.Linear })
7.           .onClick(() => {
8.             router.pushUrl({ url: 'pages/sharedTransitionDst',params:{
9.               text:this.text,
10.               img:this.img
11.             } });
12.           })
13.         Text(this.textx).width(170)
14.           Row(){
15.             Image($r("app.media.pyqtoxiang")).width(30).height(30)
16.             Text(this.text).width(170).fontSize(15)
17.           }.width(170)
18.       }.margin({
19.         bottom:20
20.       })
22.       Column() {
23.         Image(this.img1).width(170).height(150)
24.           .sharedTransition('img1', { duration: 1000, curve: Curve.Linear })
25.           .onClick(() => {
26.             router.pushUrl({ url: 'pages/sharedTransitionDst',params:{
27.               text1:this.text1,
28.               img1:this.img1
29.             } });
30.           })
31.         Text(this.text1x).width(170)
32.         Row(){
33.           Image($r("app.media.pyqtoxiang")).width(30).height(30)
34.           Text(this.text1).width(170).fontSize(15)
35.         }.width(180)
37.       }.margin({
38.         bottom:20,
39.         left:10
40.       })
41.     }
43.   }

复制代码

焦点代码是build()函数，此中定义了一个自定义组件Mycomponent，该组件包含两个列（Column），每个列内部包含一个图像（Image）、一个文本（Text）和一个行（Row），用于展示图像和相关文本信息。在图像上设置了点击事件，点击后通过路由跳转至下一页面。
仿小某书动态页面的作用是创建交际互动平台，促进用户之间的互换和内容分享。
3.7个人中心页面构建

个人中心页面是用户在应用程序或网站中管理个人信息和设置偏好的紧张界面。其主要作用在于提供一个集中管理用户设置和偏好选项的入口，以便用户可以或许轻松地管理和维护自己的账户。
通过个人中心页面，用户可以满足个性化的需求和提升用户体验。此外，帮助用户更好地相识自己在平台上的活动环境。

焦点代码如下：

1. build() {
2.     Column(){
4.       Image($r('app.media.toxiang'))
5.         .width("150vp")
6.         .margin({top:20})
8.       Item({
9.         text:"我是谁",
10.         img:$r("app.media.whois"),
11.       }).onClick(() => {
12.         promptAction.showDialog({
13.           message:"",
14.           buttons:[
15.             {
16.               text:"我已了解",
17.               color:$r("app.color.start_window_background")
18.             },
19.           ]
20.         }).then(data => {
21.      
22.           })
23.       })
25.       // 其他Item的类似代码...
26.     }.backgroundImage('/picture/pinkback.jpg',ImageRepeat.NoRepeat)
27.     .backgroundImageSize(ImageSize.Cover)
28.     .width('100%').height('100%')
29.   }
30. }

复制代码

焦点代码是build()函数，此中定义了一个名为Personal的组件。该组件内部包含了多个Item组件，每个Item代表一个功能选项，包括显示文字和对应图标，并设置了点击事件。点击不同的功能选项会触发不同的交互操作，例如显示对话框、跳转页面等。整体结构接纳了Column包裹Item组件，以展示垂直分列的功能选项列表，并设置了背景图片和尺寸。
个人中心页面在增强用户管理能力、提升用户满足度等方面具有紧张作用。
3.7服务卡片页面构建

鸿蒙的服务卡片是鸿蒙的一种界面展示情势，它将FA的紧张信息或操作前置到卡片，以到达服务直达、减少体验层级的目标。
服务卡片通常用于嵌入到其他应用（当前卡片使用方只支持系统应用，如桌面）中作为其界面显示的一部分，并支持拉起页面、发送消息等基础的交互功能。它们可以或许展示更多信息，如天气预告、日程提醒等，使用户无需打开应用即可获取所需信息。通过与卡片进行交互，用户无需打开应用，就可以实现应用内的部分操作，使用十分便捷。

焦点代码如下：

1. build() {
2.     Stack() {
3.       Image($r("app.media.back"))
4.         .objectFit(ImageFit.Cover)
5.       Column() {
6.         Text(`${this.currentQuestionIndex+1}`+'.'+`${this.title[this.currentQuestionIndex]}`)
7.           .fontSize(18)
8.         Row() {
9.           Text(`${this.where[this.currentQuestionIndex]}`)
10.             .fontSize(15)
11.             .margin(3)
12.         }
13.         Text(`${this.time[this.currentQuestionIndex]}`)
14.           .fontSize(12)
15.           .margin({top:5})
16.         Image('images/'+`${this.img[this.currentQuestionIndex]}`+".png")
17.           .width("100%")
18.           .height("50%")
19.           .onClick(() => {
20.           })
21.           .margin({top:10})
23.         if(this.ende){
24.           Button('到尽头了')
25.             .margin(1)
26.             .fontSize(10)
27.             .fontColor(Color.White)
28.             .backgroundColor("#499c54")
29.             .padding({ left: '2vp', right: '2vp' })
30.             .width("100%")
31.             .height("10%")
32.             .margin({ top: '4vp' })
33.         }else {
34.           if (this.flag[this.currentQuestionIndex]=='1'){
35.             Button('下一个')
36.               .margin(1)
37.               .fontSize(10)
38.               .fontColor(Color.White)
39.               .backgroundColor("#499c54")
40.               .padding({ left: '2vp', right: '2vp' })
41.               .width("100%")
42.               .height("10%")
43.               .margin({ top: '4vp' })
44.               .onClick(() => {
45.                 this.onNextQuestion();
46.               });
47.           }
48.           else {
49.             Button('下一个')
50.               .margin(1)
51.               .fontSize(10)
52.               .fontColor(Color.White)
53.               .backgroundColor("#499c54")
54.               .padding({ left: '2vp', right: '2vp' })
55.               .width("100%")
56.               .height("10%")
57.               .margin({ top: '4vp' })
58.               .onClick(() => {
59.                 this.onNextQuestion();
60.               });
61.           }
62.         }
63.       }
64.       .alignItems(HorizontalAlign.Start)
65.       .padding($r('app.float.column_padding'))
66.     }
67.   }
68. }

复制代码

四.总结

HarmonyOS NEXT是华为公司自研的操作系统，它是鸿蒙扬弃Linux内核及安卓开放源代码项目（AOSP）等代码的首个大版本，该系统仅支持鸿蒙内核和鸿蒙系统的应用。
本文先容了基于HarmonyOS Next操作系统开辟的“我的家乡”元服务应用案例。起首，先容了HarmonyOS Next作为华为公司完全自研的操作系统的特点和焦点技术理念。随后，讨论了HarmonyOS Next两种应用形态，重点先容了元服务的概念、呈现形态和优点。接着，通过实战演示了如何构建“马背上的家乡”元服务应用，包括项目构建、登录页面、自定义底部导航页签、首页页面、仿小某书动态页面、个人中心页面和服务卡片页面的构建过程。最后，提供了结果截图，并对整个应用开辟过程进行了总结。
通过本文，读者可以深入相识HarmonyOS Next操作系统的特点和优势，相识元服务在应用开辟中的应用形态和实际操作方法。同时，通过“马背上的家乡”元服务应用案例的实战演示，读者可以掌握如何利用HarmonyOS Next进行应用开辟的详细步骤和技术要点。

HarmonyOS NEXT，即华为自研的鸿蒙操作系统的一个大版本更新，具有以下几个显著特点：
1.分布式架构：HarmonyOS NEXT接纳了分布式架构计划，使多个设备之间可以或许实现资源共享和协同工作。用户通过一个设备即可操作其他设备的功能，从而提供更为流畅的用户体验。通过分布式软总线技术，不同设备可以像连接在一起一样方便地进行数据传输和交互，极大地提高了设备间的协同效率和用户体验。
2.高性能：HarmonyOS NEXT通过分布式调理算法，为不同设备提供最佳的计算资源分配，从而提高了设备的性能，提供了更快的响应速度。
3.安全可靠：HarmonyOS NEXT接纳了多条理的安全策略，确保用户数据的隐私和安全。系统接纳了更加严格的数据加密和隐私掩护步伐，并支持可信实行环境，为开辟者提供了更加安全的应用运行环境。此外，它还可以对多种设备进行安全管理，包括智能手机、电视、智能家居设备等。
4.轻量化计划：HarmonyOS NEXT接纳了轻量化的计划理念，针对不同设备进行定制化开辟，使系统运行更加流畅、高效。同时，系统减少了40%的冗余代码，提升了系统的流畅度、能效以及安全性。
5.生态丰富：HarmonyOS NEXT致力于构建一个开放、共享、繁荣的应用生态。华为积极与众多厂商和开辟者互助，共同推动鸿蒙生态的发展。目前，鸿蒙原生应用版图已经成型，涵盖了导航、新闻、工具、旅游、金融、便捷生活、美食、游戏等多个领域的企业和开辟者。
总的来说，HarmonyOS NEXT在分布式架构、高性能、安全可靠、轻量化计划以及生态丰富等方面都体现出了其独特优势，为用户提供了更加便捷、高效且安全的操作体验。如需相识更多关于HarmonyOS NEXT的信息，发起访问华为官方网站或相关开辟者社区。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。