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

 想了解更多内容，鸿蒙请访问：

和华为官方合作共建的向应续实习篇鸿蒙技术社区

https://harmonyos.51cto.com/#zz

Tablet 模拟器上的代码案例

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

显示效果：

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

代码如下

第一个页面的用开布局

<?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模拟器上的代码案例

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

显示效果：

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

代码如下：

Index.hml

<div class="container">     <text class="jltftxt">        蛟龙腾飞     </text>     <image src="/common/index22.jpg" class="jltfimg"/>     <text class="jltftxt1">         带你从传统的b2b信息网入门互联网、移动互     </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技术社区共同所有，如需转载，请注明出处，否则将追究法律责任

想了解更多内容，请访问：

和华为官方合作共建的服务器租用鸿蒙技术社区

https://harmonyos.51cto.com/#zz

-->

很赞哦!（4）