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

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

3天内不再提示

OpenHarmony原子化服务开发快速入门体验(中)

鸿蒙时代 来源:鸿蒙时代 作者:鸿蒙时代 2022-06-21 11:11 次阅读

四、编写项目代码
1.新新建一个文件夹common->images将部分照片放在images目录下,作为项目背景图片进行引用。

OpenHarmony原子化服务开发快速入门体验(中)-开源基础软件社区

图6 照片目录

2.编写第一个页面。

hml:


了解更多

复制

css:

/* phone */
@media screen and (device-type: phone) {
    .container {
        width: 100%;
        height: 100%;
        background-image: url("/common/images/zhishi.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-size:720px;
        display: flex;
        justify-content: center;
        align-items: center;

    }
   .liaojie{

       text-color: black;
       background-color: yellow;
       width: 50%;
       height: 100px;
       text-align: center;
       font-size: 42px;
       border-radius: 45px;
       font-weight: 700;
   }
}

复制

点击屏幕右方按钮,打开预览器查看效果。

OpenHarmony原子化服务开发快速入门体验(中)-开源基础软件社区

效果如下所示:

OpenHarmony原子化服务开发快速入门体验(中)-开源基础软件社区

3.编写第二个页面。

Index页面在项目创建的时候,会自动创建,若需要更多的页面,需要进行新建一个页面目录。方法如下:单击pages目录,选择新建一个JS Page。

OpenHarmony原子化服务开发快速入门体验(中)-开源基础软件社区

图3 新建页面

新建玩page目录后,编写相关页面代码即可。

hml:


了解更多

复制

css:

/* 说明设备类型 */
@media screen and (device-type: phone) {/* 样式 */
.box {
width: 100%;
        height: 100%;
        background-image: url("/common/images/page2.jpg");
        background-size: 720px;
        display: flex;
        justify-content: center;
    }
    .liaojie1 {
        text-color: black;
        background-color: yellow;
        width: 30%;
        height: 50px;
        text-align: center;
    font-size: 22px;
        border-radius: 45px;
        font-weight: 700;
        margin-top: 70%;
    }
}


复制

效果如下:

OpenHarmony原子化服务开发快速入门体验(中)-开源基础软件社区

图2 效果图

在该页面采用了监听路由跳转的方式进行跳转到下一个页面。

4.编写第三个页面

hml:


{{know_interest}}

复制

css:

/* phone */
@media screen and (device-type: phone) {
    .box_interest {
        width: 100%;
        height: 100%;
        background-image: url("/common/images/xingq.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 720px;
    }
    .button_interest {
        width: 100%;
        height: 150px;
        justify-content: center;
        margin-top: 320px;
    }
    .button_style_interest {
        width: 40%;
        height: 60px;
        text-align: center;
        font-size: 30px;
        border-radius: 45px;
        font-weight: 700;
        background-color: yellow;
        color: black;
       
    }
}

复制

js:

import router from '@system.router';

export default {
    data: {
        know_interest:"点击学习"
    },
    page_three(){
        router.push({
            uri:'pages/study/study'
        })
    }
}

复制

效果如下:

OpenHarmony原子化服务开发快速入门体验(中)-开源基础软件社区


图5 效果图

5.编写第四个页面

按照第二步的方法再新建一个页面。填写其页面代码。

hml:


    
{{$item}}
{{$item.id}}
{{show_text}}
{{know_study}}

复制

css:

/* phone */
@media screen and (device-type: phone) {
    .pagediv {
        width: 100%;
        height: 1500px;
        background-color: cornsilk;/**启用flex布局**/
        display: flex;/**布局方向为按列布局**/

        flex-direction: column;
    }
    .topdiv {
        width: 100%;
        height: 10%;
        background-color: #fad10a;/**启用flex布局**/
        display: flex;/**水平居中**/
        justify-content: center;/**垂直居中**/
        align-items: center;
        flex-direction: column;
    }
    .middlediv {
        width: 100%;
        height: 30%;
        background-color: antiquewhite;
        display: flex;
        justify-content: center;
        align-items: center;/**自动换行**/
        flex-wrap: wrap;
    }
    .box {
        width: 31%;
        height: 100px;
        background-color: #0373fc;
        border: 3px solid black;
        border-radius: 20px;
        margin: 5px;
        margin-top: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .textdiv {
        font-size: 30px;
        color: black;
        font-weight: bold;
    }
    .boxtxt {
        font-size: 45px;
        color: black;
        font-weight: bold;
    }
    .button_dj {
        background-color: #0373fc;
        text-color: white;
        height: 100px;
        width: 200px;
    }
    .bottomdiv{
        background-color: black;
        border: 2px solid black;
        width: 100;
        height: 400px;
        justify-content: center;
      

    }
    .div_dati {

        width: 90%;
        height: 300px;
        background-color: #0612f1;
        margin-top: 150px;
        margin-left: 40px;
        border:2px solid black;
        opacity: 1;
        display: flex;
        justify-content: center;

    }
    .text_style{
        color: white;
        font-size: 36px;
        opacity: 1;
        margin-left:10px;
        text-align: left;
    }
    .button_study {
        width: 100%;
        height: 150px;
        justify-content: center;
        margin-top: 40px;
    }
    .button_style_study {
        width: 35%;
        height: 70px;
        text-align: center;
        font-size: 22px;
        border-radius: 45px;
        background-color: yellow;
        color:black;
        font-weight: 400;
    }
}

复制

js:

export default {
    data: {
        title:["点击按钮","解锁术语解释与学习"],
        arrs:[
            {
                'id':'Ability',
                'value':'应用的重要组成部分,是应用所具备能力的抽象。Ability分为两种类型,Feature Ability和Particle Ability。'
            },
            {
                'id':'AbilitySlice',
                'value':'切片,是单个可视化界面及其交互逻辑的总和,是Feature Ability的组成单元。一个Feature Ability可以包含一组业务关系密切的可视化界面,每一个可视化界面对应一个AbilitySlice。'
            },
            {
                'id':'ANS',
                'value':'Advanced Notification Service,通知增强服务,是HarmonyOS中负责处理通知的订阅、发布和更新等操作的系统服务。'
            },
            {
                'id':'CES',
                'value':'Common Event Service,是HarmonyOS中负责处理公共事件的订阅、发布和退订的系统服务。'
            },
            {
                'id':'DV',
                'value':'Device Virtualization,设备虚拟化,通过虚拟化技术可以实现不同设备的能力和资源融合。'
            },
            {
                'id':'FA',
                'value':'Feature Ability,元程序,代表有界面的Ability,用于与用户进行交互。'
            },
            {
                'id':'HAP',
                'value':'HarmonyOS Ability Package,一个HAP文件包含应用的所有内容,由代码、资源、三方库及应用配置文件组成,其文件后缀名为.hap。'
            },
            {
                'id':'HDF',
                'value':'Hardware Driver Foundation,硬件驱动框架,用于提供统一外设访问能力和驱动开发、管理框架。'
            },
            {
                'id':'IDN',
                'value':'Intelligent Distributed Networking,是HarmonyOS特有的分布式组网能力单元。开发者可以通过IDN获取分布式网络内的设备列表和设备状态信息,以及注册分布式网络内设备的在网状态变化信息。'
            },
            {
                'id':'MSDP',
                'value':'Mobile Sensing Development Platform,移动感知平台。MSDP子系统提供两类核心能力:分布式融合感知和分布式设备虚拟化。'
            },
            {
                'id':'PA',
                'value':'Particle Ability,元服务,代表无界面的Ability,主要为Feature Ability提供支持,例如作为后台服务提供计算能力,或作为数据仓库提供数据访问能力。'
            },
            {
                'id':'Supervirtualdevice',
                'value':'超级虚拟终端亦称超级终端,通过分布式技术将多个终端的能力进行整合,存放在一个虚拟的硬件资源池里,根据业务需要统一管理和调度终端能力,来对外提供服务。'
            }
        ],
        show_text:'',
        know_study:"了解更多"
    },
    show(e){
        console.info(e)
        var list = this;
        this.arrs.forEach(element => {
            console.info(element.id)
            if (element.id==e) {
                list.show_text = element.value
            }
        });
        console.info(list.show_text);
    },
    page_four(){
        router.push({
            uri:'pages/harmonyos/harmonyos'
        })
    }
}

复制

效果如下:

OpenHarmony原子化服务开发快速入门体验(中)-开源基础软件社区

6.编写第五个页面

新建一个页面,用于介绍harmongy官方网站。代码如下

hml:


end.jpg

复制

css:

/* 说明设备类型 */
@media screen and (device-type: phone) {
    /*样式*/
    .container {
        flex-direction: column;
        height: 100%;
        width: 100%;
        background-image: url("/images/end.jpg");
    }
}

审核编辑:符乾江
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 代码
    +关注

    关注

    30

    文章

    4845

    浏览量

    69246
  • OpenHarmony
    +关注

    关注

    25

    文章

    3755

    浏览量

    16756
收藏 人收藏

    相关推荐

    鸿蒙北向开发OpenHarmony4.1 DevEco Studio开发工具安装与配置

    OpenHarmony4.1 DevEco Studio开发工具安装与配置,鸿蒙北向开发入门必备!
    的头像 发表于 02-07 17:35 200次阅读
    鸿蒙北向<b class='flag-5'>开发</b><b class='flag-5'>OpenHarmony</b>4.1 DevEco Studio<b class='flag-5'>开发</b>工具安装与配置

    戈帅《OpenHarmony轻量系统从入门到精通50例》开发板与传感器配置说明

    戈帅《OpenHarmony轻量系统从入门到精通50例》开发板与传感器配置说明,请查看附件*附件:《OpenHarmony轻量系统从入门到精
    发表于 12-03 15:46

    50万奖金池!开放原子大赛——第二届OpenHarmony创新应用挑战赛正式启动

    第二届OpenHarmony创新应用挑战赛作为开放原子大赛旗下的重要赛项,聚焦 OpenHarmony应用开发,致力提升开发者的动手实践能力
    发表于 10-24 15:40

    【全新课程资料】正点原子《ESP32基础及项目实战入门》培训课程资料上线!

    正点原子《ESP32基础及项目实战入门》全新课程资料上线啦!正点原子工程师手把手教你学!熟练掌握ESP-IDF开发,突破ESP32入门难题!
    发表于 09-24 17:59

    基于ArkTS语言的OpenHarmony APP应用开发:HelloOpenharmony

    1、程序简介该程序是基于OpenHarmony标准系统编写的UI应用类:HelloOpenHarmony。本案例是基于API9接口开发。本案例已在OpenHarmony凌蒙派-RK35
    的头像 发表于 09-15 08:09 527次阅读
    基于ArkTS语言的<b class='flag-5'>OpenHarmony</b> APP应用<b class='flag-5'>开发</b>:Hello<b class='flag-5'>Openharmony</b>

    鸿蒙OpenHarmony南向/北向快速开发教程-迅为RK3568开发

    大家期待已久的迅为RK3568开发板终于迎来了鸿蒙4.1系统的强势支持!想知道如何实现快速开发学习吗?跟着我们一起来探索吧! 迅为RK3568开发板: 想象一下,你手中的RK3568
    发表于 07-23 10:44

    名单公布!【书籍评测活动NO.38】OpenHarmony开发与实践 | 基于红莓RK2206开发

    OpenHarmony操作系统的概述、快速入门、内核、适配移植、IoT组件开发、SIMPLEGUI显示及开发示例。第1章介绍了
    发表于 07-19 10:57

    软通动力助阵OpenHarmony开发者大会2024成功举办

    近日,由开放原子开源基金会OpenHarmony项目群工作委员会主办的OpenHarmony开发者大会2024在深圳成功举办。
    的头像 发表于 05-28 09:35 786次阅读
    软通动力助阵<b class='flag-5'>OpenHarmony</b><b class='flag-5'>开发</b>者大会2024成功举办

    CW32快速开发入门

    CW32快速开发入门
    的头像 发表于 04-24 18:56 2178次阅读
    CW32<b class='flag-5'>快速</b><b class='flag-5'>开发</b><b class='flag-5'>入门</b>

    开放原子开源大赛OpenHarmony智能应用生态挑战赛决赛路成功举办

    软件定义世界,开源共筑未来。在江苏省工信厅、市工信局、开放原子开源基金会及相关单位的指导和支持下,4月19-20日,由中软国际教育科技集团联合举办的开放原子开源大赛-OpenHarmony智能
    的头像 发表于 04-24 09:48 479次阅读

    鸿蒙OpenHarmony快速入门概述】

    OpenHarmony是一款面向全场景的开源分布式操作系统,采用组件设计,支持在128KiB到xGiB RAM资源的设备上运行系统组件,设备开发者可基于目标硬件能力自由选择系统组件进行集成。
    的头像 发表于 04-19 15:14 576次阅读
    鸿蒙<b class='flag-5'>OpenHarmony</b>【<b class='flag-5'>快速</b><b class='flag-5'>入门</b>概述】

    九联开鸿加入开放原子开源基金会OpenHarmony医疗健康专委会

    近日,九联开鸿加入开放原子开源基金会OpenHarmony医疗健康专委会,将与医疗行业伙伴合作开发基于OpenHarmony系统的智慧医疗产品以及智慧病房解决方案,完成包括床头屏、走廊
    的头像 发表于 04-18 09:46 514次阅读
    九联开鸿加入开放<b class='flag-5'>原子</b>开源基金会<b class='flag-5'>OpenHarmony</b>医疗健康专委会

    OpenHarmony内核编程实战

    编写程序,让开发板在串口调试工具输出”Hello,OpenHarmony“。▍操作在源码的根目录中有名为”applications“的文件,他存放着应用程序样例
    的头像 发表于 03-27 08:31 980次阅读
    <b class='flag-5'>OpenHarmony</b>内核编程实战

    【六】Purple Pi OH开发板带你7天入门OpenHarmony

    今天我们来从OpenHarmony简介、环境搭建、创建第一个OpenHarmony项目等方面开始OpenHarmony应用开发的第一步。一.Open
    的头像 发表于 03-14 08:31 626次阅读
    【六】Purple Pi OH<b class='flag-5'>开发</b>板带你7天<b class='flag-5'>入门</b><b class='flag-5'>OpenHarmony</b>!

    开放原子开源大赛—基于OpenHarmony的团结引擎应用开发赛正式启动!

    “基于OpenHarmony的团结引擎应用开发赛”是开放原子全球开源大赛下开设的新兴及应用赛的赛题之一,本次赛题旨在鼓励更多开发者基于OpenHar
    发表于 03-13 10:45