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

鸿蒙时代

发布于 2021-1-13 11:25

浏览

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>
<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>

第二个页面的布局

<?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>
<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>

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

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

}
.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体验心得。

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