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

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

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

https://harmonyos./#zz

Tablet 模拟器上的代码案例

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

显示效果：

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

代码如下

第一个页面的布局 

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

 第二个页面的布局 

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.   
  
  
  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    4.   
  
  
  
  4.     ohos:height="match_parent" 
    5.   
  
  
  
  5.     ohos:width="match_parent" 
    6.   
  
  
  
  6.     ohos:orientation="vertical"> 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.       
  
  
  
  9.         ohos:width="match_parent" 
    10.   
  
  
  
  10.        ohos:weight="1" 
    11.   
  
  
  
  11.         > 
    12.   
  
  
  
  12.           
  
  
  
  13.             ohos:width="match_content" 
    14.   
  
  
  
  14.             ohos:height="match_content" 
    15.   
  
  
  
  15.             ohos:text="蛟龙腾飞" 
    16.   
  
  
  
  16.             ohos:text_size="40fp" 
    17.   
  
  
  
  17.             ohos:top_margin="180px" 
    18.   
  
  
  
  18.             ohos:left_margin="80px"/> 
    19.   
  
  
  
  19.  
    20.   
  
  
  
  20.      
    21.   
  
  
  
  21.       
  
  
  
  22.         ohos:width="match_parent" 
    23.   
  
  
  
  23.         ohos:weight="4" 
    24.   
  
  
  
  24.         ohos:orientation="horizontal"> 
    25.   
  
  
  
  25.           
  
  
  
  26.             ohos:height="match_parent" 
    27.   
  
  
  
  27.             ohos:weight="1"> 
    28.   
  
  
  
  28.               
  
  
  
  29.                 ohos:width="600px" 
    30.   
  
  
  
  30.                 ohos:height="600px" 
    31.   
  
  
  
  31.                 ohos:top_margin="60px" 
    32.   
  
  
  
  32.                 ohos:left_margin="100px" 
    33.   
  
  
  
  33.                 ohos:image_src="$media:index7"/> 
    34.   
  
  
  
  34.          
    35.   
  
  
  
  35.           
  
  
  
  36.             ohos:height="match_parent" 
    37.   
  
  
  
  37.             ohos:weight="2"> 
    38.   
  
  
  
  38.               
  
  
  
  39.                 ohos:width="match_content" 
    40.   
  
  
  
  40.                 ohos:height="match_content" 
    41.   
  
  
  
  41.                 ohos:multiple_lines="true" 
    42.   
  
  
  
  42.                 ohos:text="你好，欢迎来到鸿蒙时代！ 
    43.   
  
  
  
  43.                                     蛟龙腾飞，鸿蒙先行者，全心全意为你提供鸿蒙各项服务!" 
    44.   
  
  
  
  44.                 ohos:text_size="35fp" 
    45.   
  
  
  
  45.                 ohos:top_margin="240px" 
    46.   
  
  
  
  46.                 ohos:left_margin="10px"/> 
    47.   
  
  
  
  47.          
    48.   
  
  
  
  48.  
    49.   
  
  
  
  49.      
    50.   
  
  
  
  50.  
    51.   
  
  
  
  51.  
    52.

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

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

 Lite wearable模拟器上的代码案例

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

显示效果：

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

代码如下：

Index.hml

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.      
    3.   
  
  
  
  3.        蛟龙腾飞 
    4.   
  
  
  
  4.      
    5.   
  
  
  
  5.      
    6.   
  
  
  
  6.      
    7.   
  
  
  
  7.         带你从传统的互联网、移动互 
    8.   
  
  
  
  8.      
    9.   
  
  
  
  9.      
    10.   
  
  
  
  10.         联网时代. 跳转到万物互联的智 
    11.   
  
  
  
  11.      
    12.   
  
  
  
  12.      
    13.   
  
  
  
  13.          能世界!。马上创建体验个人、 
    14.   
  
  
  
  14.      
    15.   
  
  
  
  15.      
    16.   
  
  
  
  16.         公司或组织的鸿蒙应用吧！ 
    17.   
  
  
  
  17.      
    18.   
  
  
  
  18.      
    19.
 

 Index.css

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

 Index.js

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

 Jltfindex.hml

  
 
 
 
    
   
  
  
  
  1.  
    2.    
  
  
  
  2.      
    3.    
  
  
  
  3.         蛟龙腾飞 
    4.    
  
  
  
  4.      
    5.    
  
  
  
  5.      
    6.    
  
  
  
  6.      
    7.    
  
  
  
  7.         你好，欢迎来到鸿蒙时代！ 
    8.    
  
  
  
  8.      
    9.    
  
  
  
  9.      
    10.    
  
  
  
  10.         蛟龙腾飞，鸿蒙先行者，全心全 
    11.    
  
  
  
  11.      
    12.    
  
  
  
  12.      
    13.    
  
  
  
  13.         意为你提供鸿蒙各项服务！        
    14.    
  
  
  
  14.  
    15.
 

 Jltfindex.css

 
 
 
 
    
  
  
  
  
  1. .container { 
    2.   
  
  
  
  2.     flex-direction: column; 
    3.   
  
  
  
  3.     width: 454px; 
    4.   
  
  
  
  4.     height: 454px; 
    5.   
  
  
  
  5.     justify-content: center; 
    6.   
  
  
  
  6.     align-items: center; 
    7.   
  
  
  
  7. } 
    8.   
  
  
  
  8. .jltftxt { 
    9.   
  
  
  
  9.     margin-left: -180px; 
    10.   
  
  
  
  10.     margin-bottom: 10px; 
    11.   
  
  
  
  11. } 
    12.   
  
  
  
  12. .jltftxt1 { 
    13.   
  
  
  
  13.     width: 400px; 
    14.   
  
  
  
  14.     font-size: 30px; 
    15.   
  
  
  
  15.  
    16.   
  
  
  
  16. } 
    17.   
  
  
  
  17. .jltfimg { 
    18.   
  
  
  
  18.     width: 413px; 
    19.   
  
  
  
  19.     height:103px; 
    20.   
  
  
  
  20.     margin-left: 8px; 
    21.   
  
  
  
  21. } 
    22.   
  
  
  
  22. .jltfbtn { 
    23.   
  
  
  
  23.     width: 200px; 
    24.   
  
  
  
  24.     margin-bottom: -70px; 
    25.   
  
  
  
  25. } 
    26.

 Jltfindex.js

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

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

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

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

 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./#zz

网站题目：鸿蒙HarmonyOS北向应用开发者极速入门教程（一）续-实战练习篇2
文章分享：http://www.csdahua.cn/qtweb/news35/454835.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

成都快上网为您推荐相关内容

网页设计公司知识

各行业网站

达州网站设计　　 　邛崃柴油发电机维修保养公司　　 　仿古建筑设计　　 　网站制作　　 　整合营销　　 　网站搜索引擎优化　　 　成都定制网站建设　　 　德阳电信服务器托管　　 　成都广告设计　　 　手机网站制作　　 　兴宏源活动板房　　 　成都网络推广　　 　zzfdjwx.com　　 　广元双南建站　　 　成都西信机房托管　　 　自适应网站设计　　 　定制网站　　 　做网站公司　　 　眉山服务器租用　　 　邛崃网站建设