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

鸿蒙时代

发布于 2022-6-21 10:58

浏览

0收藏

最新收录于

鸿蒙时代蛟龙腾飞鸿蒙成长路上知识共享

查看专栏

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

OpenHarmony原子化服务开发快速入门体验（中）-鸿蒙开发者社区

图6 照片目录

2.编写第一个页面。

hml:

<div class="container">
    <button onclick="button_image" class="liaojie">了解更多</button>
</div>

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:

<div class="box">
    <button onclick="page_two" class="liaojie1">了解更多</button>
</div>

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:

<div class="box_interest">
    <div class="button_interest">
        <text class="button_style_interest" onclick="page_three">{{know_interest}}</text>
    </div>
</div>

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:

<!--    头部标题  -->
    <div class="topdiv">
        <text class="textdiv" for="{{title}}">{{$item}}</text>
    </div>
<!--    按钮选项   -->
    <div class="middlediv">
        <block for="{{arrs}}">
            <div class="box">
                <button class="button_dj" onclick="show({{$item.id}})" >{{$item.id}}</button>
            </div>
        </block>
    </div>
<!--    显示框   -->
    <div clss="bottomdiv">
        <div class="div_dati">
           <text class="text_style">{{show_text}}</text>
        </div>
    </div>
    <div class="button_study">
        <text class="button_style_study" onclick="page_four">{{know_study}}</text>
    </div>
</div>

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：

<div class="container">
    <image src="/image/end.jpg"  style="width: 720px;" >
    </image>
</div>

css：

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

通过预览器查看效果

OpenHarmony原子化服务开发快速入门体验（中）-鸿蒙开发者社区