当前位置：主页 > 查看内容

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

发布时间：2021-07-10 00:00| 有 位朋友查看

简介：想了解更多内容，请访问： 51CTO和华为官方战略合作共建的鸿蒙技术社区 https://harmonyos.51cto.com/#zz 三、实战练习 截图另外做文档答题。文档要求，文件名：某某研究日志日期。文件内容，题目和答题，截图代码和文字等综合展示。 1.练习题一 以下是基于D……

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

51CTO和华为官方战略合作共建的鸿蒙技术社区

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

三、实战练习

截图另外做文档答题。文档要求，文件名：某某研究日志日期。文件内容，题目和答题，截图代码和文字等综合展示。

1.练习题一

以下是基于DevEco Studio蛟龙腾飞北向应用开发工程师已经实现的布局、功能、代码及路径，请安装要求一模一样的流程和效果，在自己的DevEco Studio实现。这里我们可以自行选择自己想开发的设备和模板，这里我们以Phone为例，开发模板选择空特性java的开发模板，点击next进行下一步。

开发的设备有七种：

  • Phone
  • Tablet
  • Car
  • Tv
  • Wearable
  • Lite wearable
  • smart vision

Phone设备中有很多种不同的模板，主要是java和js进行开发以及不同的模板样式，不同样式之间布局不一样，不同的布局所展示的效果代码已经写入其中，只需要加入想加入的元素即可。


选择好了之后点击next进行下一步。

这里是创建项目的一些项目配置，配置完成点击Finish完成创建。


完成创建后，我们进入了主界面，这里需要等待一小会，因为一些配置东西在进行下载配置。


Phone模拟器上的代码案例：


显示效果：

 




双击图中选中的设备就可以运行了。

显示如下：



运行效果：


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


代码如下：

第一个布局中

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <DirectionalLayout 
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  4.     ohos:height="match_parent" 
  5.     ohos:width="match_parent" 
  6.     ohos:orientation="vertical"> 
  7.  
  8.     <DirectionalLayout 
  9.         ohos:width="match_parent" 
  10.         ohos:weight="1"> 
  11.         <Text 
  12.             ohos:width="match_content" 
  13.             ohos:height="match_content" 
  14.             ohos:text="蛟龙腾飞" 
  15.             ohos:text_size="80px" 
  16.             ohos:top_margin="280px" 
  17.             ohos:left_margin="50px"/> 
  18.     </DirectionalLayout> 
  19.     <DirectionalLayout 
  20.         ohos:weight="1" 
  21.         ohos:width="match_parent"> 
  22.         <Image 
  23.             ohos:width="1080px" 
  24.             ohos:height="468px" 
  25.             ohos:image_src="$media:index12.jpg"/> 
  26.  
  27.     </DirectionalLayout> 
  28.     <DirectionalLayout 
  29.         ohos:width="match_parent" 
  30.         ohos:weight="3"> 
  31.         <Text 
  32.             ohos:width="match_content" 
  33.             ohos:height="match_content" 
  34.             ohos:text_size="60px" 
  35.             ohos:multiple_lines="true" 
  36.             ohos:left_margin="8px" 
  37.             ohos:text="带你从传统的互联网、移动互联网时代"/> 
  38.         <Text 
  39.             ohos:width="match_content" 
  40.             ohos:height="match_content" 
  41.             ohos:text_size="60px" 
  42.             ohos:multiple_lines="true" 
  43.             ohos:left_margin="8px" 
  44.             ohos:top_margin="10px" 
  45.             ohos:text="跳转到万物互联的智能世界!"/> 
  46.         <Text 
  47.             ohos:width="match_content" 
  48.             ohos:height="match_content" 
  49.             ohos:text_size="60px" 
  50.             ohos:multiple_lines="true" 
  51.             ohos:left_margin="8px" 
  52.             ohos:top_margin="10px" 
  53.             ohos:text="马上创建体验个人、公司或组织的鸿蒙应用吧！"/> 
  54.         <Button 
  55.             ohos:id="$+id:jltfbutton" 
  56.             ohos:width="match_content" 
  57.             ohos:height="match_content" 
  58.             ohos:text="点击了解更多" 
  59.             ohos:text_color="red" 
  60.             ohos:text_size="100px" 
  61.             ohos:top_margin="400px" 
  62.             ohos:left_margin="420px"/> 
  63.     </DirectionalLayout> 
  64.  
  65. </DirectionalLayout> 

第二个布局中

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <DirectionalLayout 
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  4.     ohos:height="match_parent" 
  5.     ohos:width="match_parent" 
  6.     ohos:orientation="vertical"> 
  7.  
  8.     <DirectionalLayout 
  9.         ohos:width="match_parent" 
  10.         ohos:weight="1"> 
  11.         <Text 
  12.             ohos:width="match_content" 
  13.             ohos:height="match_content" 
  14.             ohos:text="蛟龙腾飞" 
  15.             ohos:text_size="80px" 
  16.             ohos:top_margin="280px" 
  17.             ohos:left_margin="50px"/> 
  18.     </DirectionalLayout> 
  19.     <DirectionalLayout 
  20.         ohos:weight="1" 
  21.         ohos:width="match_parent"> 
  22.         <Image 
  23.             ohos:width="1080px" 
  24.             ohos:height="468px" 
  25.             ohos:image_src="$media:index13.jpg"/> 
  26.  
  27.     </DirectionalLayout> 
  28.     <DirectionalLayout 
  29.         ohos:width="match_parent" 
  30.         ohos:weight="3"> 
  31.         <Text 
  32.             ohos:width="match_content" 
  33.             ohos:height="match_content" 
  34.             ohos:text_size="60px" 
  35.             ohos:multiple_lines="true" 
  36.             ohos:left_margin="8px" 
  37.             ohos:text="你好，欢迎来到鸿蒙时代！"/> 
  38.         <Text 
  39.             ohos:width="match_content" 
  40.             ohos:height="match_content" 
  41.             ohos:text_size="60px" 
  42.             ohos:multiple_lines="true" 
  43.             ohos:left_margin="8px" 
  44.             ohos:top_margin="10px" 
  45.             ohos:text="蛟龙腾飞，鸿蒙先行者，全心全意为你"/> 
  46.         <Text 
  47.             ohos:width="match_content" 
  48.             ohos:height="match_content" 
  49.             ohos:text_size="60px" 
  50.             ohos:multiple_lines="true" 
  51.             ohos:left_margin="10px" 
  52.             ohos:top_margin="10px" 
  53.             ohos:text="提供鸿蒙各项服务！ 马上咨询：李先生 13725519713 或 18138827525"/> 
  54.     </DirectionalLayout> 
  55.  
  56. </DirectionalLayout> 

在slice文件的类中添加点击事件进行跳转：


  1. Button button = (Button) findComponentById(ResourceTable.Id_jltfbutton); 
  2. button.setClickedListener(new Component.ClickedListener() { 
  3.     @Override 
  4.     public void onClick(Component component) { 
  5.         present(new JltfAbilitySlice(),new Intent()); 
  6.     } 
  7. }); 

TV模拟器上的代码案例：

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


显示效果：


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


代码如下：

第一个页面中的布局

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <DirectionalLayout 
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  4.     ohos:height="match_parent" 
  5.     ohos:width="match_parent" 
  6.     ohos:orientation="vertical"> 
  7.  
  8.    <DirectionalLayout 
  9.        ohos:width="match_parent" 
  10.        ohos:height="160px" 
  11.        > 
  12.        <Text 
  13.            ohos:width="match_content" 
  14.            ohos:height="match_content" 
  15.            ohos:text="蛟龙腾飞" 
  16.            ohos:text_size="25fp" 
  17.            ohos:top_margin="40px" 
  18.            ohos:left_margin="40px"/> 
  19.  
  20.    </DirectionalLayout> 
  21.     <DirectionalLayout 
  22.         ohos:width="match_parent" 
  23.         ohos:height="920px" 
  24.         ohos:orientation="horizontal"> 
  25.         <DirectionalLayout 
  26.             ohos:height="match_parent" 
  27.             ohos:width="820px"> 
  28.             <Image 
  29.                 ohos:width="600px" 
  30.                 ohos:height="600px" 
  31.                 ohos:top_margin="60px" 
  32.                 ohos:left_margin="100px" 
  33.                 ohos:image_src="$media:index6"/> 
  34.         </DirectionalLayout> 
  35.         <DirectionalLayout 
  36.             ohos:height="match_parent" 
  37.             ohos:width="1100px"> 
  38.             <Text 
  39.                 ohos:width="match_content" 
  40.                 ohos:height="match_content" 
  41.                 ohos:multiple_lines="true" 
  42.                 ohos:text="带你从传统的互联网、移动互联网时代 
  43.                                跳转到万物互联的智能世界! 
  44.                                     马上创建体验个人、公司或组织的鸿蒙应用吧！" 
  45.                 ohos:text_size="25fp" 
  46.                 ohos:top_margin="240px" 
  47.                 ohos:left_margin="10px"/> 
  48.             <Button 
  49.                 ohos:id="$+id:jltfbutton" 
  50.                 ohos:width="match_content" 
  51.                 ohos:height="match_content" 
  52.                 ohos:text="点击了解更多" 
  53.                 ohos:text_size="30fp" 
  54.                 ohos:top_margin="290px" 
  55.                ohos:left_margin="680px" 
  56.                 ohos:text_color="red"/> 
  57.         </DirectionalLayout> 
  58.  
  59.     </DirectionalLayout> 
  60.  
  61. </DirectionalLayout> 

第二个页面中的布局

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <DirectionalLayout 
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  4.     ohos:height="match_parent" 
  5.     ohos:width="match_parent" 
  6.     ohos:orientation="vertical"> 
  7.  
  8.     <DirectionalLayout 
  9.         ohos:width="match_parent" 
  10.         ohos:height="160px" 
  11.         > 
  12.         <Text 
  13.             ohos:width="match_content" 
  14.             ohos:height="match_content" 
  15.             ohos:text="蛟龙腾飞" 
  16.             ohos:text_size="25fp" 
  17.             ohos:top_margin="40px" 
  18.             ohos:left_margin="40px"/> 
  19.  
  20.     </DirectionalLayout> 
  21.     <DirectionalLayout 
  22.         ohos:width="match_parent" 
  23.         ohos:height="920px" 
  24.         ohos:orientation="horizontal"> 
  25.         <DirectionalLayout 
  26.             ohos:id="$+id:direction1" 
  27.             ohos:height="match_parent" 
  28.             ohos:width="820px"> 
  29.             <Image 
  30.                 ohos:width="600px" 
  31.                 ohos:height="600px" 
  32.                 ohos:top_margin="60px" 
  33.                 ohos:left_margin="100px" 
  34.                 ohos:image_src="$media:index7"/> 
  35.         </DirectionalLayout> 
  36.         <DirectionalLayout 
  37.             ohos:height="match_parent" 
  38.             ohos:width="1100px"> 
  39.             <Text 
  40.                 ohos:width="match_content" 
  41.                 ohos:height="match_content" 
  42.                 ohos:multiple_lines="true" 
  43.                 ohos:text="你好，欢迎来到鸿蒙时代！ 
  44.                                     蛟龙腾飞，鸿蒙先行者，全心全意为你提供鸿蒙各项服务！  马上咨询： 
  45.                                              李先生:13725519713 或 18138827525" 
  46.                 ohos:text_size="25fp" 
  47.                 ohos:top_margin="240px" 
  48.                 ohos:left_margin="10px"/> 
  49.         </DirectionalLayout> 
  50.  
  51.     </DirectionalLayout> 
  52.  
  53. </DirectionalLayout> 

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

  1. Button button = (Button) findComponentById(ResourceTable.Id_jltfbutton); 
  2.  
  3.   button.setClickedListener(new Component.ClickedListener() { 
  4.         @Override 
  5.         public void onClick(Component component) { 
  6.  
  7.             present(new JltfAbilitySlice(),new Intent()); 
  8.         } 
  9.  
  10.  
  11.     }); 

Smart vision模拟器上的代码案例

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


这里选择的是js开发的模板就需要下载node.js文件在编辑器中进行配置(node.js)网上有下载教程。


显示效果：


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


代码如下：

Index.hml

  1. <div class="container"> 
  2.     <text class="jltftxt"> 
  3.        蛟龙腾飞 
  4.     </text> 
  5.     <div class="container1"> 
  6.         <image src="/common/index27.jpg" class="jltfimg"/> 
  7.         <div class="container2"> 
  8.             <text class="jltftxt1"> 
  9.                 带你从传统的互联网、移动互 
  10.             </text> 
  11.             <text class="jltftxt2"> 
  12.                 联网时代. 跳转到万物互联的智 
  13.             </text> 
  14.             <text class="jltftxt3"> 
  15.                 能世界!。马上创建体验个人、 
  16.             </text> 
  17.             <text class="jltftxt4"> 
  18.                 公司或组织的鸿蒙应用吧！ 
  19.             </text> 
  20.             <input class="jltfbtn"type="button" value="点击了解更多" onclick="jltfclick"/> 
  21.         </div> 
  22.  
  23.     </div> 
  24.  
  25. </div> 

Index.css

  1. .container { 
  2.     flex-direction: column; 
  3.     width: 960px; 
  4.     height: 480px; 
  5.     justify-content: center; 
  6.     align-items: center; 
  7. } 
  8. .container1 { 
  9.     flex-direction: row; 
  10.     width: 960px; 
  11.     height: 400px; 
  12. } 
  13. .container2 { 
  14.     margin-left: 30px; 
  15.     flex-direction: column; 
  16.     width: 600px; 
  17.     height: 400px; 
  18. } 
  19. .jltftxt { 
  20.      margin-left: -700px; 
  21.      margin-bottom: 10px; 
  22.     font-size: 45px; 
  23. } 
  24. .jltftxt1 { 
  25.     margin-top: 45px; 
  26. } 
  27. .jltftxt4 { 
  28.     margin-left: 5px; 
  29. } 
  30. .jltfimg { 
  31.     margin-top: 40px; 
  32.     width: 300px; 
  33.     height: 282px; 
  34.     margin-left: 40px; 
  35. } 
  36. .jltfbtn { 
  37.     height: 60px; 
  38.     width: 280px; 
  39.     margin-left: 260px; 
  40.     margin-top: 50px; 
  41. } 
  42. .jltftxt1,.jltftxt2,.jltftxt3,.jltftxt4{ 
  43.     font-size: 40px; 
  44.     margin-left: 20px; 
  45. } 

Index.js

  1. import router from '@system.router' 
  2.  
  3. export default { 
  4.     data: { 
  5.  
  6.     }, 
  7.     jltfclick() { 
  8.         router.replace({ 
  9.             uri:'pages/jltfindex/jltfindex' 
  10.         }); 
  11.     } 
  12. } 
  13.  
  14.   
  15.  
  16. jltfIndex.hml 
  17.  
  18. <div class="container"> 
  19.     <text class="jltftxt"> 
  20.         蛟龙腾飞 
  21.     </text> 
  22.      <div class="container1"> 
  23.     <image src="/common/index28.jpg" class="jltfimg"/> 
  24.          <div class="container2"> 
  25.              <text class="jltftxt1"> 
  26.                  你好，欢迎来到鸿蒙时代！ 
  27.              </text> 
  28.              <text class="jltftxt2"> 
  29.                  蛟龙腾飞，鸿蒙先行者，全 
  30.              </text> 
  31.              <text class="jltftxt3"> 
  32.                  心全意为你提供鸿蒙各项服 
  33.              </text> 
  34.              <text class="jltftxt4"> 
  35.                  务！ 
  36.              </text> 
  37.          </div> 
  38.      </div> 
  39. </div> 

jltfIndex.css

  1. .container { 
  2.     flex-direction: column; 
  3.     width: 960px; 
  4.     height: 480px; 
  5.     justify-content: center; 
  6.     align-items: center; 
  7. } 
  8. .container1 { 
  9.     flex-direction: row; 
  10.     width: 960px; 
  11.     height: 400px; 
  12. } 
  13. .container2 { 
  14.     margin-left: 5px; 
  15.     flex-direction: column; 
  16.     width: 600px; 
  17.     height: 400px; 
  18. } 
  19. .jltftxt { 
  20.     margin-left: -700px; 
  21.     margin-bottom: 10px; 
  22.     font-size: 45px; 
  23. } 
  24. .jltftxt1 { 
  25.     margin-top: 50px; 
  26. } 
  27. .jltfimg { 
  28.     margin-top: 20px; 
  29.     width: 357px; 
  30.     height: 321px; 
  31.     margin-left: 20px; 
  32. } 
  33. .jltftxt1,.jltftxt2,.jltftxt3,.jltftxt4{ 
  34.     font-size: 45px; 
  35.     margin-left: 20px; 
  36. } 
  37.  
  38.   

jltfIndex.js

  1. export default { 
  2.     data: { 
  3.     } 
  4. } 

在第一个页面js文件中加入跳转的代码

  1. jltfclick() { 
  2.         router.replace({ 
  3.             uri:'pages/jltfindex/jltfindex' 
  4.         }); 
  5.     } 

还得在配置文件中配置相关下一个页面的位置

config.json找到图中js的位置

  1. "js": [ 
  2.   { 
  3.     "pages": [ 
  4.       "pages/index/index", 
  5.       "pages/jltfindex/jltfindex" 
  6.     ], 
  7.     "name": "default" 
  8.   } 
  9. ] 

加入"pages/jltfindex/jltfindex"下一个页面位置即可

wearable模拟器上的代码案例


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


显示效果：


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


代码如下：

第一个页面

  1. Index.hml 
  2.  
  3. <div class="container"> 
  4.     <text class="jltftxt"> 
  5.        蛟龙腾飞 
  6.     </text> 
  7.     <image src="/common/index22.png" class="jltfimg"/> 
  8.     <text class="jltftxt1"> 
  9.         带你从传统的互联网、移动互 
  10.     </text> 
  11.     <text class="jltftxt2"> 
  12.         联网时代. 跳转到万物互联的智 
  13.     </text> 
  14.     <text class="jltftxt3"> 
  15.          能世界!。马上创建体验个人、 
  16.     </text> 
  17.     <text class="jltftxt4"> 
  18.         公司或组织的鸿蒙应用吧！ 
  19.     </text> 
  20.     <input class="jltfbtn"type="button" value="点击了解更多" onclick="jltfclick"/> 
  21. </div> 

Index.css

  1. .container { 
  2.     flex-direction: column; 
  3.     width: 454px; 
  4.     height: 454px; 
  5.     justify-content: center; 
  6.     align-items: center; 
  7. } 
  8. .jltftxt { 
  9.      margin-left: -180px; 
  10.      margin-bottom: 10px; 
  11. } 
  12. .jltftxt1 { 
  13.     width: 400px; 
  14.     font-size: 30px; 
  15.  
  16. } 
  17. .jltftxt4 { 
  18.     margin-left: 5px; 
  19. } 
  20. .jltfimg { 
  21.     width: 138px; 
  22.     height: 103px; 
  23.     margin-left: 5px; 
  24. } 
  25. .jltfbtn { 
  26.     height: 60px; 
  27.     width: 280px; 
  28.     margin-bottom: -60px; 
  29. } 
  30. .jltftxt1,.jltftxt2,.jltftxt3,.jltftxt4{ 
  31.     font-size: 30px; 
  32. } 

Index.js

  1. import router from '@system.router' 
  2.  
  3. export default { 
  4.     data: { 
  5.  
  6.     }, 
  7.     jltfclick() { 
  8.         router.replace({ 
  9.             uri:'pages/jltfindex/jltfindex' 
  10.         }); 
  11.     } 
  12. } 
  13.  
  14.   

Jltfidnex.hml

  1. <div class="container"> 
  2.     <text class="jltftxt"> 
  3.         蛟龙腾飞 
  4.     </text> 
  5.     <image src="/common/index16.jpg" class="jltfimg"/> 
  6.     <text class="jltftxt1"> 
  7.         你好，欢迎来到鸿蒙时代！ 
  8.     </text> 
  9.     <text class="jltftxt2"> 
  10.         蛟龙腾飞，鸿蒙先行者，全心全 
  11.     </text> 
  12.     <text class="jltftxt3"> 
  13.         意为你提供鸿蒙各项服务！ 
  14.     </text> 
  15.  
  16. </div> 

Jltfindex.css


本文转载自网络，原文链接：https://harmonyos.51cto.com/#zz
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：Redis缓存总结：淘汰机制、缓存雪崩、数据不一致.... 下一篇：通过创建视频游戏来学习 Python

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐