文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-12-03 12:54

关注

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

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

https://harmonyos.51cto.com/

Tablet 模拟器上的代码案例

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


显示效果：


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


代码如下

第一个页面的布局

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

 第二个页面的布局

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

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

  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 jltftabletSlice(),new Intent()); 
  8.     } 
  9.  
  10.  
  11. }); 

 Lite wearable模拟器上的代码案例

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


显示效果：


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


代码如下：

Index.hml

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

 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. .jltfimg { 
  18.     width: 138px; 
  19.     height:103px; 
  20.     margin-left: 5px; 
  21. } 
  22. .jltfbtn { 
  23.     width: 200px; 
  24.     margin-bottom: -70px; 
  25. } 

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

 Jltfindex.hml

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

 Jltfindex.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. .jltfimg { 
  18.     width: 413px; 
  19.     height:103px; 
  20.     margin-left: 8px; 
  21. } 
  22. .jltfbtn { 
  23.     width: 200px; 
  24.     margin-bottom: -70px; 
  25. } 

 Jltfindex.js

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

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

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

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

 2. 练习题二

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

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

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

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


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

©著作权归作者和HarmonyOS技术社区共同所有，如需转载，请注明出处，否则将追究法律责任

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

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

https://harmonyos.51cto.com/

 

来源：鸿蒙社区内容投诉

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 2024年上半年信息系统项目管理师第二批次真题及答案解析（完整版）

    难度     813人已做
    查看

  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看

  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看

  • 2024年上半年软考高项第一、二批次真题考点汇总（完整版）

    难度     435人已做
    查看

  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机

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

后端开发鸿蒙HarmonyOS2024-12-03

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

后端开发鸿蒙HarmonyOS2024-12-03

鸿蒙HarmonyOS北向应用开发者极速入门教程（一）-注册、安装篇

后端开发鸿蒙HarmonyOS2024-12-03
位置：首页-资讯-后端开发
咦！没有更多了？去看看其它编程学习网 内容吧
首页课程
资料下载问答资讯