鸿蒙应用开发时间卡片练习-鸿蒙开发者社区-51CTO.COM

鸿蒙应用开发时间卡片练习 原创

鸿蒙时代
发布于 2021-6-2 10:36
浏览
4收藏

一、效果展示

运行项目后显示具体时间和星期。

鸿蒙应用开发时间卡片练习-鸿蒙开发者社区

  

 

上滑应用启动卡片显示当前时间

  鸿蒙应用开发时间卡片练习-鸿蒙开发者社区

 

二、核心代码展示

主页(default)

js代码:


export default {
    data: {
        hour: new Date().getHours(),
        minute: new Date().getMinutes(),
        day: "",
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1,
        date: new Date().getDate()
    },
    onInit() {
        switch(new Date().getDay()) {
                case 0:
                    this.day = "日";
                    break;
                case 1:
                    this.day = "一";
                    break;
                case 2:
                    this.day = "二";
                    break;
                case 3:
                    this.day = "三";
                    break;
                case 4:
                    this.day = "四";
                    break;
                case 5:
                    this.day = "五";
                    break;
                case 6:
                    this.day = "六";
                    break;
            }
    }
}

 

hml代码

<div style="position: absolute;">
    <div style="position: absolute;top: 10%; left: 40%;">
        <text>周</text><text>{{day}}</text>
    </div>
    <div style="position: absolute;top: 30%; left: 5%;">
        <text>{{year}}</text><text>年</text><text>{{month}}</text><text>月</text><text>{{ date }}</text><text>日</text>
    </div>
    <div style="position: absolute; top: 50%; left: 40%;">
        <text>{{hour}}</text><text>:</text><text>{{minute}}</text>
    </div>
</div>

 

 

 

卡片(card)

js


export default {
    data: {
        hour: new Date().getHours(),
        minute: new Date().getMinutes()
    }
}

hml

<div style="display: flex; align-items: center;justify-content: center;">
    <div>
        <text>{{hour}}</text>
        <text>:</text>
        <text>{{minute}}</text>
    </div>
</div>

 

三、完整代码地址

https://gitee.com/jltfcloudcn/jump_to/tree/master/%E6%97%B6%E9%97%B4%E5%8D%A1%E7%89%87

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
卡片练习.zip 691.88K 68次下载
3
收藏 4
回复
举报
11条回复
按时间正序
/
按时间倒序
wx605bef525f967
wx605bef525f967

为什么我看官方文档上说服务卡片不能用js,只能用json,你这里可以用js啊?

回复
2021-6-7 01:04:14
鸿蒙时代
鸿蒙时代

是的,卡片不支持任何JS语法,需要使用JSON文件声明。这个应该是我们的技术人员特殊处理过的,为了展示效果的。

回复
2021-6-7 22:41:50
qq60c077669a284
qq60c077669a284

Android 应用可以做这个吗,我看京东、优酷有这个

已于2021-6-9 16:29:30修改
回复
2021-6-9 16:29:02
鸿蒙时代
鸿蒙时代

我理解是可以的,一个是独立的原子化应用,二是基于APP的原子化卡片。这个作品有些问题,我们那个LOGO卡片是正式跑通了的。

回复
2021-6-9 21:49:29
鸿蒙时代
鸿蒙时代

https://harmonyos.51cto.com/posts/5549 这个是跑通了的。

回复
2021-6-9 21:51:40
qq60c077669a284
qq60c077669a284 回复了 鸿蒙时代
我理解是可以的,一个是独立的原子化应用,二是基于APP的原子化卡片。这个作品有些问题,我们那个LOGO卡片是正式跑通了的。

我看下面那个文章里也是在鸿蒙项目里做卡片。你们可不可以用android studio 项目做个卡片demo,就是想京东优酷App上滑应用图标会显示卡片,点右上角可以钉在桌面上

1
回复
2021-6-9 22:28:07
黑板报呀
黑板报呀

js实现起来就是比Java的更简洁,简单。

回复
2021-6-10 08:33:16
鸿蒙时代
鸿蒙时代

JS实现的原子化服务的功能效果是要比JAVA多很多。

回复
2021-6-11 09:54:41
鸿蒙时代
鸿蒙时代

这个是HarmonyOS相关的,我们专注于HarmonyOS开发相关的内容,和android studio 没啥关系。

回复
2021-6-11 09:56:22
鸿蒙时代
鸿蒙时代 回复了 qq60c077669a284
我看下面那个文章里也是在鸿蒙项目里做卡片。你们可不可以用android studio 项目做个卡片demo,就是想京东优酷App上滑应用图标会显示卡片,点右上角可以钉在桌面上

可以这样做的,我们现在专注的多的是纯HarmonyOS的原子化服务。这个我们后续也可以尝试。

回复
2021-6-11 10:02:46
鸿蒙时代
鸿蒙时代 回复了 鸿蒙时代
这个是HarmonyOS相关的,我们专注于HarmonyOS开发相关的内容,和android studio 没啥关系。

这个回复有些偏差,正确的如下。图标上有"HMOS”角标的即为纯HarmonyOS应用,有下划线的应用支持HarmonyOS的卡片特性。纯HarmonyOS应用是指基于HarmonyOS开发的应用,支持HarmonyOS特性的应用是基于Andoid开发的应用,但是使用了HarmonyOS特性。

回复
2021-6-11 10:07:33
回复
    相关推荐