HarmonyOS NEXT实战：元服务的创建、实现多个案例效果

什么是元服务

元服务（原名为原子化服务）是HarmonyOS提供的一种面向未来的服务提供方式，是有独立入口、免安装、可为用户提供一个或多个便捷服务的新型应用步伐形态。
创建元服务

• File–>New–>Create Project,选择
  
  
  
  
• 没登录去登录
  
  
  
  
• 如果没有APP ID，点
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
• 修改图标，点击查看天生元服务图标
  
  
  
  
  
  
  
• 注意，这个图标必须用这个，要不然考核会被拒
  您提交的元服务图标与最近任务列表的元服务图标不一致，不符合华为应用市场《元服务考核指南》第1.17项.
  
  
  
  

开发案例一 单机元服务 【 今日步数 】，正在考核中

• 先看效果图
  
  
  
  
• 定义需要的参数
  

1.   // 模拟今日步数
2.   @Local stepCount: number = 0;
3.   @Local dateString: string = this.getDate()

复制代码

• 把 ‘走’ : ‘跑’ 封装到一个@Builder里
  

2.   /** 今日步数 */
3.   @Builder
4.   doseStatistics(isMonitor: boolean, num: number, used: string, residue: string, value: number, text: string,
5.     onClick: () => void) {
6.     Row() {
7.       Text(isMonitor ? '走' : '跑')
8.         .width(50)
9.         .height(50)// .padding(10)
10.         .textAlign(TextAlign.Center)
11.         .backgroundColor(isMonitor ? '#EDF3FD' : "#FCEDEC")
12.         .borderRadius(8)
15.       Column() {
16.         Text() {
17.           Span(isMonitor ? '今日慢走目标' : '今日跑步目标').fontSize(13).fontColor("#222222")
18.           Span(isMonitor ? ` ${num}步数` : ` ${num}米`).fontSize(13).fontColor("#666666")
19.         }
21.         Text() {
22.           Span(isMonitor ? '已走' : '已跑').fontSize(10).fontColor("#666666")
23.           Span(` ${used}`)
24.             .fontSize(14)
25.             .fontColor(isMonitor ? "#CADDFA" : "#E65441")
26.           Span(isMonitor ? '  剩余步数' : '  剩余跑步').fontSize(10).fontColor("#666666")
27.           Span(` ${residue}`).fontSize(14).fontColor("#222222")
28.         }.margin({ top: 2 })
29.       }.margin({ left: 8 }).alignItems(HorizontalAlign.Start).layoutWeight(1)
31.       Stack() {
32.         Progress({
33.           value: value,
34.           total: 10000,
35.           type: ProgressType.Ring
36.         })
37.           .width(64)
38.           .color(isMonitor ? "#CADDFA" : "#E65441")
39.           .style({ strokeWidth: 10 })
40.           .backgroundColor(isMonitor ? '#EDF3FD' : "#FCEDEC")
42.         Text(text).fontSize(14).fontColor("#222222")
44.       }
46.     }.width('100%').margin({ top: 16 }).onClick(() => {
47.       onClick?.()
48.     })
50.   }

复制代码

• 获取当前时间，年代日分秒
  

1.   private getDate() {
2.     const now = new Date();
3.     const year = now.getFullYear();
4.     const month = now.getMonth() + 1; // 注意：月份是从0开始计数的
5.     const day = now.getDate();
6.     const hours = now.getHours();
7.     const minutes = now.getMinutes();
8.     const seconds = now.getSeconds();
9.     return `${year}-${month}-${day}-${hours}:${minutes}:${seconds}`
10.   }

复制代码

开发案例二 单机元服务 【 今日气候 】，正在考核中

• 先看效果图
  
  
  
  
• 今日气候这一部分接纳List+ForEach实现，很简单
  

1. List({ space: 30 }) {
2.         ForEach([1, 2, 3, 4, 5], (item: number) => {
3.           ListItem() {
4.             Flex({
5.               direction: FlexDirection.Column,
6.               justifyContent: FlexAlign.SpaceBetween,
7.               alignItems: ItemAlign.Center
8.             }) {
9.               Text((9 + item) + ':00')
10.                 .fontColor(Color.White)
11.                 .fontSize(15)
12.               Image((item == 2 || item == 4) ? $r('app.media.dongyu') : $r('app.media.tianqi'))
13.                 .width(40)
14.                 .height(40)
15.                 .objectFit(ImageFit.Auto)
16.               Text((12 + item) + '℃')
17.                 .fontColor(Color.White)
18.                 .fontSize(15)
19.             }
21.           }
22.         })

复制代码

• 未来四天这一块和上面一样
  

1. List({ space: 20 }) {
2.         ForEach(['二', '三', '四', '五'], (item: string) => {
4.           ListItem() {
5.             Row() {
6.               Text('星期' + item)
7.                 .fontColor(Color.White)
8.                 .fontSize(15)
10.               Image((item == '二' || item == '四') ? $r('app.media.dongyu') : $r('app.media.tianqi'))
11.                 .width(40)
12.                 .height(40)
13.                 .objectFit(ImageFit.Auto)
14.               Text((item == '二' || item == '四') ? '20℃' : '12℃')
15.                 .fontColor(Color.White)
16.                 .fontSize(15)
18.               Text((item == '二' || item == '四') ? '11℃' : '5℃')
19.                 .fontColor(Color.White)
20.                 .fontSize(15)
21.             }
22.             .padding({ left: 15, right: 15 })
23.             .width('100%')
24.             .justifyContent(FlexAlign.SpaceBetween)
26.           }

复制代码

开发案例三 单机元服务 【 公共交通出行 】，正在考核中

• 先看效果图
  
  
  
  
• 用户信息
  

1.   @Builder
2.   userInfo() {
3.     Row() {
4.       Image($r('app.media.ic_my_avatar'))
5.         .width(44)
6.       Column() {
7.         Text('张三')
8.           .fontSize(18)
9.           .fontColor(Color.White)
10.         Text('VIP标识')
11.           .fontSize(10)
12.           .margin({ top: 5 })
13.           .fontColor(Color.Yellow)
14.       }
16.       .alignItems(HorizontalAlign.Start)
17.       .layoutWeight(1)
18.       .margin({ left: 8 })
20.       Text() {
21.         Span('会员剩余')
22.         Span(' 9 ').fontSize(18).fontColor("#FEDB9B")
23.         Span('天')
24.       }
25.       .height(32)
26.       .fontColor("#FEDB9B")
27.       .fontSize(10)
29.       .padding({ left: 16, right: 12 })
30.       .borderRadius({ topLeft: 20, bottomLeft: 20 })
31.       //渐变色
32.       .linearGradient({
33.         angle: 135,
34.         colors: [["#1D2432", 0.2], ['#3E4A61', 0.8]]
35.       })
36.     }
37.     .padding({ bottom: 10 })
38.     .width('100%')
39.     .margin({ top: 46, left: 12 })
40.     .onClick(() => {
42.     })
43.   }

复制代码

• 公共交通功能部分代码
  

1. Row() {
2.           this.msgRelated($r('app.media.1'), '新能源导航', () => {
3.             promptAction.showToast({ message: '新能源导航' })
4.           })
5.           this.msgRelated($r('app.media.j2'), '货车', () => {
7.           })
8.           this.msgRelated($r('app.media.j3'), '摩托车', () => {
10.           })
11.           this.msgRelated($r('app.media.j4'), '骑行', () => {
13.           })
15.         }
16.         .width('95%')
17.         .height(80)
18.         .margin({
19.           top: 10,
20.           left: 12,
21.           right: 12
22.         })
23.         .backgroundColor(Color.White)
24.         .justifyContent(FlexAlign.SpaceAround)

复制代码

上一篇文章>>>>>>>>>>>

HarmonyOS NEXT实战：自定义封装多种样式导航栏组件
若本文对您稍有帮助，诚望您不吝点赞，多谢。
有兴趣的同砚可以点击查看源码

• gitee：https://gitee.com/jiaojiaoone/explore-harmony-next/tree/case%2Fwanandroid/
  
• github：https://github.com/JasonYinH/ExploreHarmonyNext.git
  

接待加我微信一起互换：+V：yinshiyuba


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