HarmonyOS北向应用开发者 极速入门教程(一)续----实战练习篇2 原创 精华

发布于 2021-1-13 11:25
1096浏览
0收藏

Tablet 模拟器上的代码案例

新建项目选择模板进行下一步。

   HarmonyOS北向应用开发者 极速入门教程(一)续----实战练习篇2

显示效果:

   HarmonyOS北向应用开发者 极速入门教程(一)续----实战练习篇2

点击“点击了解更多”进入下一个页面

   HarmonyOS北向应用开发者 极速入门教程(一)续----实战练习篇2

代码如下

第一个页面的布局

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <DirectionalLayout
        ohos:width="match_parent"
        ohos:weight="1">
        <Text
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="蛟龙腾飞"
            ohos:text_size="40fp"
            ohos:top_margin="180px"
            ohos:left_margin="80px"/>

    </DirectionalLayout>
    <DirectionalLayout
        ohos:width="match_parent"
        ohos:weight="4"
        ohos:orientation="horizontal">
        <DirectionalLayout
            ohos:height="match_parent"
            ohos:weight="1">
            <Image
                ohos:width="600px"
                ohos:height="600px"
                ohos:top_margin="160px"
                ohos:left_margin="100px"
                ohos:image_src="$media:index6"/>
        </DirectionalLayout>
        <DirectionalLayout
            ohos:height="match_parent"
            ohos:weight="2">
            <Text
                ohos:width="match_content"
                ohos:height="match_content"
                ohos:multiple_lines="true"
                ohos:text="带你从传统的互联网、移动互联网时代
                               跳转到万物互联的智能世界!
                                          马上创建体验个人、公司或组织的鸿蒙应用吧!"
                ohos:text_size="35fp"
                ohos:top_margin="240px"
                ohos:left_margin="60px"/>
            <Button
                ohos:id="$+id:jltfbutton"
                ohos:width="match_content"
                ohos:height="match_content"
                ohos:text="点击了解更多"
                ohos:text_size="40fp"
                ohos:top_margin="380px"
                ohos:left_margin="1000px"
                ohos:text_color="red"/>
        </DirectionalLayout>

    </DirectionalLayout>

</DirectionalLayout>

第二个页面的布局

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <DirectionalLayout
        ohos:width="match_parent"
       ohos:weight="1"
        >
        <Text
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="蛟龙腾飞"
            ohos:text_size="40fp"
            ohos:top_margin="180px"
            ohos:left_margin="80px"/>

    </DirectionalLayout>
    <DirectionalLayout
        ohos:width="match_parent"
        ohos:weight="4"
        ohos:orientation="horizontal">
        <DirectionalLayout
            ohos:height="match_parent"
            ohos:weight="1">
            <Image
                ohos:width="600px"
                ohos:height="600px"
                ohos:top_margin="60px"
                ohos:left_margin="100px"
                ohos:image_src="$media:index7"/>
        </DirectionalLayout>
        <DirectionalLayout
            ohos:height="match_parent"
            ohos:weight="2">
            <Text
                ohos:width="match_content"
                ohos:height="match_content"
                ohos:multiple_lines="true"
                ohos:text="你好,欢迎来到鸿蒙时代!
                                    蛟龙腾飞,鸿蒙先行者,全心全意为你提供鸿蒙各项服务!"
                ohos:text_size="35fp"
                ohos:top_margin="240px"
                ohos:left_margin="10px"/>
        </DirectionalLayout>

    </DirectionalLayout>

</DirectionalLayout>

然后再第一个页面中添加点击事件进行跳转

Button button = (Button) findComponentById(ResourceTable.Id_jltfbutton);

button.setClickedListener(new Component.ClickedListener() {
    @Override
    public void onClick(Component component) {

        present(new jltftabletSlice(),new Intent());
    }


});

Lite wearable模拟器上的代码案例

 

新建项目选择模板进行下一步。

   HarmonyOS北向应用开发者 极速入门教程(一)续----实战练习篇2

显示效果:

HarmonyOS北向应用开发者 极速入门教程(一)续----实战练习篇2


点击“点击了解更多”进入下一个页面

   HarmonyOS北向应用开发者 极速入门教程(一)续----实战练习篇2

代码如下:

Index.hml

<div class="container">
    <text class="jltftxt">
       蛟龙腾飞
    </text>
    <image src="/common/index22.jpg" class="jltfimg"/>
    <text class="jltftxt1">
        带你从传统的互联网、移动互
    </text>
    <text class="jltftxt2">
        联网时代. 跳转到万物互联的智
    </text>
    <text class="jltftxt3">
         能世界!。马上创建体验个人、
    </text>
    <text class="jltftxt4">
        公司或组织的鸿蒙应用吧!
    </text>
    <input class="jltfbtn"type="button" value="点击了解更多" onclick="jltfclick"/>
</div>

 

Index.css

.container {
    flex-direction: column;
    width: 454px;
    height: 454px;
    justify-content: center;
    align-items: center;
}
.jltftxt {
     margin-left: -180px;
     margin-bottom: 10px;
}
.jltftxt1 {
    width: 400px;
    font-size: 30px;

}
.jltfimg {
    width: 138px;
    height:103px;
    margin-left: 5px;
}
.jltfbtn {
    width: 200px;
    margin-bottom: -70px;
}

 

Index.js

import router from '@system.router'

export default {
    data: {

    },
    jltfclick() {
        router.replace({
            uri:'pages/jltfindex/jltfindex'
        });
    }
}

 

Jltfindex.hml

<div class="container">
    <text class="jltftxt">
        蛟龙腾飞
    </text>
    <image src="/common/index16.jpg" class="jltfimg"/>
    <text class="jltftxt1">
        你好,欢迎来到鸿蒙时代!
    </text>
    <text class="jltftxt2">
        蛟龙腾飞,鸿蒙先行者,全心全
    </text>
    <text class="jltftxt3">
        意为你提供鸿蒙各项服务!       

</div>

 

Jltfindex.css

.container {
    flex-direction: column;
    width: 454px;
    height: 454px;
    justify-content: center;
    align-items: center;
}
.jltftxt {
    margin-left: -180px;
    margin-bottom: 10px;
}
.jltftxt1 {
    width: 400px;
    font-size: 30px;

}
.jltfimg {
    width: 413px;
    height:103px;
    margin-left: 8px;
}
.jltfbtn {
    width: 200px;
    margin-bottom: -70px;
}

 

Jltfindex.js

export default {
    data: {
    }
}

在第一个页面中添加跳转的代码

在第一个页面js文件中加入如下代码即可

jltfclick() {
    router.replace({
        uri:'pages/jltfindex/jltfindex'
    });
}

2. 练习题二

还是基于“练习一”题目中的图片和文字内容,7种设备中用其他不同的模板样式尝试实现一下和“练习一”模板样式不一样的效果,尽可能每种设备实现一种不同的布局和效果呈现,作业要求,样式截图与全部代码。

3. 点击和尝试DevEco Studio里的每个菜单栏,概览这个DevEco Studio的各项功能结构。结合前面的练习,写一个100字以上的Deveco Studio体验心得。

具体编辑器使用的细节可以参考如下链接和内容。

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/tools_overview-0000001053582387 

  HarmonyOS北向应用开发者 极速入门教程(一)续----实战练习篇2

 

 

 

            深圳市蛟龙腾飞网络科技有限公司 

©著作权归作者和HarmonyOS技术社区共同所有,如需转载,请注明出处,否则将追究法律责任
HarmonyOS北向应用开发者极速入门教程(一.pdf 2.12M 2次下载
收藏
回复
举报
回复
上传资源包
上传文件可以提高自己的声望,一次最多可上传5个文件 查看上传规则
    这个用户很懒,还没有个人简介
    帖子
    视频
    声望
    粉丝
    社区精华内容