OpenHarmony原子化服务开发快速入门体验（中）

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

图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;
   }
}

复制

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

效果如下所示:

3.编写第二个页面。

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

图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%;
    }
}

复制

效果如下：

图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'
        })
    }
}

复制

效果如下：

图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'
        })
    }
}

复制

效果如下：

6.编写第五个页面

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

hml：

复制

css：

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

审核编辑：符乾江