HarmonyOS NEXT实战：元服务的创建、实现多个案例效果
什么是元服务元服务（原名为原子化服务）是HarmonyOS提供的一种面向未来的服务提供方式，是有独立入口、免安装、可为用户提供一个或多个便捷服务的新型应用步伐形态。
创建元服务
[*]File–>New–>Create Project,选择
https://i-blog.csdnimg.cn/direct/2685d4da932e4f9a94f95c441152695a.png
[*]没登录去登录
https://i-blog.csdnimg.cn/direct/ab996863f9e140fba8e19ee79ae4d44e.png
[*]如果没有APP ID，点
https://i-blog.csdnimg.cn/direct/da6b825674744229a1706c08de62b1c7.png
https://i-blog.csdnimg.cn/direct/fca02ddf050b479dae9ccef274ad122e.png
https://i-blog.csdnimg.cn/direct/5ab5934c8f04464d92d02bbc3b68faae.png
https://i-blog.csdnimg.cn/direct/26b8aa5859114ed28ae55beb29c21018.png
https://i-blog.csdnimg.cn/direct/485cbf2364e1478dbab165072ff5fa48.png
https://i-blog.csdnimg.cn/direct/98df693ee1984442b2f52e9193d5e779.png
https://i-blog.csdnimg.cn/direct/3d545e199bca4e90824adff03c1505d5.png
[*]修改图标，点击查看天生元服务图标
https://i-blog.csdnimg.cn/direct/815a0d9a59bb40a2909858fb5c49d257.png
https://i-blog.csdnimg.cn/direct/4d086bfd6270411294dc3faaa8a20ab8.png
[*]注意，这个图标必须用这个，要不然考核会被拒
您提交的元服务图标与最近任务列表的元服务图标不一致，不符合华为应用市场《元服务考核指南》第1.17项.
https://i-blog.csdnimg.cn/direct/b4f3a296906d4ae2b40b346b9dd2919b.png
https://i-blog.csdnimg.cn/direct/3e96963fc8a3414092a656dce7b0dc0a.png
开发案例一 单机元服务 【 今日步数 】，正在考核中
[*] 先看效果图
https://i-blog.csdnimg.cn/direct/d16804f82da14b85a42cec70d241e69d.gif
[*] 定义需要的参数
// 模拟今日步数
@Local stepCount: number = 0;
@Local dateString: string = this.getDate()
[*]把 ‘走’ : ‘跑’ 封装到一个@Builder里
/** 今日步数 */
@Builder
doseStatistics(isMonitor: boolean, num: number, used: string, residue: string, value: number, text: string,
onClick: () => void) {
Row() {
Text(isMonitor ? '走' : '跑')
.width(50)
.height(50)// .padding(10)
.textAlign(TextAlign.Center)
.backgroundColor(isMonitor ? '#EDF3FD' : "#FCEDEC")
.borderRadius(8)
Column() {
Text() {
Span(isMonitor ? '今日慢走目标' : '今日跑步目标').fontSize(13).fontColor("#222222")
Span(isMonitor ? ` ${num}步数` : ` ${num}米`).fontSize(13).fontColor("#666666")
}
Text() {
Span(isMonitor ? '已走' : '已跑').fontSize(10).fontColor("#666666")
Span(` ${used}`)
.fontSize(14)
.fontColor(isMonitor ? "#CADDFA" : "#E65441")
Span(isMonitor ? '剩余步数' : '剩余跑步').fontSize(10).fontColor("#666666")
Span(` ${residue}`).fontSize(14).fontColor("#222222")
}.margin({ top: 2 })
}.margin({ left: 8 }).alignItems(HorizontalAlign.Start).layoutWeight(1)
Stack() {
Progress({
value: value,
total: 10000,
type: ProgressType.Ring
})
.width(64)
.color(isMonitor ? "#CADDFA" : "#E65441")
.style({ strokeWidth: 10 })
.backgroundColor(isMonitor ? '#EDF3FD' : "#FCEDEC")
Text(text).fontSize(14).fontColor("#222222")
}
}.width('100%').margin({ top: 16 }).onClick(() => {
onClick?.()
})
}
[*]获取当前时间，年代日分秒
private getDate() {
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1; // 注意：月份是从0开始计数的
const day = now.getDate();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
return `${year}-${month}-${day}-${hours}:${minutes}:${seconds}`
}
开发案例二 单机元服务 【 今日气候 】，正在考核中
[*]先看效果图
https://i-blog.csdnimg.cn/direct/dff84bf821aa4ef59a19fcde3082af21.png
[*]今日气候这一部分接纳List+ForEach实现，很简单
List({ space: 30 }) {
ForEach(, (item: number) => {
ListItem() {
Flex({
direction: FlexDirection.Column,
justifyContent: FlexAlign.SpaceBetween,
alignItems: ItemAlign.Center
}) {
Text((9 + item) + ':00')
.fontColor(Color.White)
.fontSize(15)
Image((item == 2 || item == 4) ? $r('app.media.dongyu') : $r('app.media.tianqi'))
.width(40)
.height(40)
.objectFit(ImageFit.Auto)
Text((12 + item) + '℃')
.fontColor(Color.White)
.fontSize(15)
}
}
})
[*]未来四天这一块和上面一样
List({ space: 20 }) {
ForEach(['二', '三', '四', '五'], (item: string) => {
ListItem() {
Row() {
Text('星期' + item)
.fontColor(Color.White)
.fontSize(15)
Image((item == '二' || item == '四') ? $r('app.media.dongyu') : $r('app.media.tianqi'))
.width(40)
.height(40)
.objectFit(ImageFit.Auto)
Text((item == '二' || item == '四') ? '20℃' : '12℃')
.fontColor(Color.White)
.fontSize(15)
Text((item == '二' || item == '四') ? '11℃' : '5℃')
.fontColor(Color.White)
.fontSize(15)
}
.padding({ left: 15, right: 15 })
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
}
开发案例三 单机元服务 【 公共交通出行 】，正在考核中
[*]先看效果图
https://i-blog.csdnimg.cn/direct/1275cff3392b48069d0a146f3a87dce1.png
[*]用户信息
@Builder
userInfo() {
Row() {
Image($r('app.media.ic_my_avatar'))
.width(44)
Column() {
Text('张三')
.fontSize(18)
.fontColor(Color.White)
Text('VIP标识')
.fontSize(10)
.margin({ top: 5 })
.fontColor(Color.Yellow)
}
.alignItems(HorizontalAlign.Start)
.layoutWeight(1)
.margin({ left: 8 })
Text() {
Span('会员剩余')
Span(' 9 ').fontSize(18).fontColor("#FEDB9B")
Span('天')
}
.height(32)
.fontColor("#FEDB9B")
.fontSize(10)
.padding({ left: 16, right: 12 })
.borderRadius({ topLeft: 20, bottomLeft: 20 })
//渐变色
.linearGradient({
angle: 135,
colors: [["#1D2432", 0.2], ['#3E4A61', 0.8]]
})
}
.padding({ bottom: 10 })
.width('100%')
.margin({ top: 46, left: 12 })
.onClick(() => {
})
}
[*]公共交通功能部分代码
Row() {
this.msgRelated($r('app.media.1'), '新能源导航', () => {
promptAction.showToast({ message: '新能源导航' })
})
this.msgRelated($r('app.media.j2'), '货车', () => {
})
this.msgRelated($r('app.media.j3'), '摩托车', () => {
})
this.msgRelated($r('app.media.j4'), '骑行', () => {
})
}
.width('95%')
.height(80)
.margin({
top: 10,
left: 12,
right: 12
})
.backgroundColor(Color.White)
.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企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]