0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看威廉希尔官方网站 视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

HarmonyOS原子化服务开发案例 计划本的实现

鸿蒙时代 来源:鸿蒙时代 作者:鸿蒙时代 2022-04-28 10:47 次阅读
poYBAGJp_4GAQwoNAABwCv4adUQ011.png

一.创建项目
二.代码示例

hml代码部分


时间:
计划:
内容:
实现方式:

css代码部分

.container {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
}
.title{
    width: 100%;
    height: 40px;
    font-size: 24px;
    color: #fff;
    text-align: left;
    padding-left: 12px;
    background-color: dodgerblue;
    margin-bottom: 10px;
}
.content{
    flex-direction: column;
    margin-bottom: 10px;
}
.hengStyle{
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin: 2px 0px;
}
.text{
    font-size: 16px;
    padding-left: 16px;
}
.inputDate{
    width: 100px;
    height: 40px;
    font-size: 16px;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
}
.inputTxt{
    width: 64%;
    height: 40px;
    font-size: 16px;
    border-radius: 4px;
}
.inputBtn{
    width: 30%;
    height: 40px;
    font-size: 16px;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
}

js代码部分

export default {
    data: {
        //        学习时间
        dateValue:"",
        startTime: '开始时间',
        endTime: '结束时间',
        selectVal:"2021-06-08",
    },
    startClick(){
        this.$element("startPicker").show();
    },
    endClick(){
        this.$element("endPicker").show();
    },
    startDate(e){
        this.startTime = e.year + "-" + e.month + "-" + e.day;
    },
    endDate(e){
        this.endTime = e.year + "-" + e.month + "-" + e.day;
    },
    input(e){
        let idName = e.target.id;
        if (idName === "school") {
            this.schoolValue = e.value
        }
    },
    inputBtn(){
        this.$element("education").show();
    },
    chooseEducation(e){
        this.educationValue = e.newValue
    }
}
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • HarmonyOS
    +关注

    关注

    79

    文章

    1974

    浏览量

    30147
  • 原子化服务
    +关注

    关注

    0

    文章

    31

    浏览量

    869
收藏 人收藏

    评论

    相关推荐

    HarmonyOS原子服务卡片开发-分布式体验学习

    1.原子服务流转在HarmonyOS中泛指涉及多端的分布式操作。流转能力打破设备界限,多设备联动,使用户应用程序可分可合、可流转,实现如邮
    发表于 09-07 09:38

    直播预告丨 Hello HarmonyOS 进阶课程第五课——原子服务

    关怀等场景进行探索,HarmonyOS原子服务开发的关键因素与整体流程的解说,还有实战模板案例教学演示,组件、DEMO综合实践经验分享,
    发表于 05-30 12:00

    HarmonyOS原子服务案例分享-马仕健专辑

    一、案例说明HarmonyOS应用服务主要为个人音乐专辑的形式。实现了卡片进行歌曲播放、切换与更新。我们设计开发了微、小、中、大卡四种方式
    发表于 07-18 16:05

    HarmonyOS原子服务案例分享-厦门旅游攻略

    的旅游感受和对景点的态度,可以进行评分。服务进行了微、小、中、大卡片的设计开发原子服务内容
    发表于 07-20 15:31

    HarmonyOS原子服务案例分享-成语心情

    服务提供的成语综合平衡地理解自己的每个情绪和情景。用户可以根据我们设定的规则通过服务卡片自动刷新随机阅读成语或者通过原子服务随机上下刷读成
    发表于 07-21 14:10

    HarmonyOS原子服务案例分享-原卡秀

    个性的问候祝福微、小、中、大服务卡片与原子服务,并可以进行华为与畅连分享。
    发表于 07-22 14:30

    HarmonyOS原子服务案例分享-蛟龙服务

    一、项目说明HarmonyOS应用服务主要汇总了原子服务
    发表于 08-05 16:00

    HarmonyOS原子服务案例分享-惠广优品

    一、案例说明HarmonyOS应用服务主要是新一代智慧便利店领域的展示互动原子服务尝试。通过
    发表于 08-05 17:08

    HarmonyOS原子服务开发中的API版本使用问题

    项目与做各项开发工作,比较新鲜。但是,如果开发的这个原子服务需要上架操作的话,API7和API8暂时是不支持的,因为它们还不属于大规模推广
    发表于 08-15 09:55

    HarmonyOS原子服务最新概念、呈现形式与触发方式

    找人更智能,为开发者的服务带来全新的流量入口以及更多的自然流量,为用户提供更加贴心便捷的服务体验。开发者角度:对于开发者而言,
    发表于 12-27 10:03

    HarmonyOS原子服务开发相关术语

    Ability Test Tool华为快服务助手华为快服务助手仅用于华为开发者进行华为原子服务
    发表于 01-19 11:16

    HarmonyOS 3.1 Developer Preview 原子服务开发初体验

    HarmonyOS 3.1 Developer Preview配套IDE下,在选择原子服务(Atomic service)的时候,没有stage模式,只有FA模式,API还在8。而在
    发表于 01-28 15:04

    及刻周边惠:拥抱HarmonyOS原子服务

    及刻周边惠:拥抱HarmonyOS原子服务 开发背景 及刻周边惠是梦享网络旗下本地生活服务平台
    发表于 03-13 10:39

    HarmonyOS鸿蒙原生应用开发设计- 元服务原子服务)图标

    HarmonyOS设计文档中,为大家提供了独特的元服务图标,开发者可以根据需要直接引用。 开发者直接使用官方提供的元服务图标内容,既可以符合
    发表于 11-01 16:55

    原子服务是什么意思?华为原子服务概述

    原子服务是什么意思?华为原子服务概述 原子
    的头像 发表于 11-02 17:52 1.6w次阅读
    <b class='flag-5'>原子</b><b class='flag-5'>化</b><b class='flag-5'>服务</b>是什么意思?华为<b class='flag-5'>原子</b><b class='flag-5'>化</b><b class='flag-5'>服务</b>概述