鸿蒙开发入门 | 开发第一个鸿蒙应用+页面跳转
CSDN话题挑战赛第2期
参赛话题:学习笔记
准备好鸿蒙开发环境后,接下来就需要创建鸿蒙项目,掌握项目的创建过程以及配置。项目创建好后,需要把项目运行在模拟器上,鸿蒙的模拟和安卓模拟器有些不同,鸿蒙提供远程模拟器和本地模拟器,通过登录华为账号登录在线模拟器,使用DevEco Studio可将项目部署到远程模拟器中。
分析
使用DevEco Studio集成工具开发第一个鸿蒙应用,完成鸿蒙应用创建、鸿蒙模拟器创建、部署应用到模拟器。
1、开发第一个鸿蒙应用
1●创建鸿蒙应用
打开DevEco Studio,在欢迎页单击Create HarmonyOS Project,创建一个新工程,如图1所示。
■ 图1 Create HarmonyOS Project
根据工程创建向导,选择需要的Ability工程模板,然后单击Next按钮。关于工程模板的介绍和支持的设备类型,请参考支持的设备模板和编程语言,如图2所示。
■ 图2工程创建向导
填写工程相关信息,Device Type选择Phone,其他保持默认值即可,单击Finish按钮,如图3所示。关于各个参数的详细介绍,请参考创建一个新的工程。
■ 图3 填写工程相关信息
工程创建完成后,DevEco Studio会自动进行工程的同步,同步成功如图4所示。
■图4 工程自动同步
2●部署鸿蒙应用到模拟器
DevEco Studio提供远程模拟器和本地模拟器,我们以远程模拟器为例进行说明。在DevEco Studio菜单栏,单击Tools→Device Manager,如图5所示。
■ 图5 打开设备管理器
在Remote Emulator页中单击Login按钮,在浏览器中弹出华为开发者联盟账号登录界面,请输入已实名认证的华为开发者联盟账号的用户名和密码进行登录(查看远程模拟器登录常见问题),如图6所示。
■ 图6 登录华为开发者联盟账号
说明: 推荐使用Chrome浏览器,如果使用Safari、360等其他浏览器,要取消阻止跨站跟踪和阻止所有Cookie功能。
登录后,请单击界面上的“允许”按钮进行授权,如图7所示。
■ 图7 华为账号授权
在设备列表中,选择设备P40,并单击按钮
,运行模拟器,如图8所示。
■ 图8 运行模拟器
单击DevEco Studio工具栏中的按钮
运行工程,或使用默认快捷键Shift+F10运行工程,如图9所示。
■ 图9 运行工程到模拟器
DevEco Studio会启动应用的编译构建,完成后应用即可运行在模拟器上,如图10所示。
■ 图10 工程运行成功页面
2、实战演练——页面跳转
鸿蒙操作系统提供了两种FA(Feature Ability)的UI开发框架: Java UI框架和JS UI框架,如表1所示。
Java UI框架提供了细粒度的UI编程接口,UI元素更丰富,使应用开发更加灵活。
JS UI框架提供了相对高层的UI描述,使应用开发更加简单。
■ 表1Java UI框架和JS UI框架的对比
已成功运行了第一个鸿蒙操作系统应用,接下来通过Java UI方式和 JS UI方式分别实现页面跳转,来了解鸿蒙操作系统应用的开发过程。
1●Java UI方式实现页面跳转
1. 编写第一个页面
在Java UI框架中,提供了两种编写布局的方式: 在XML中声明UI布局和在代码中创建布局。这两种方式创建出的布局没有本质差别,为了熟悉两种方式,将通过XML的方式编写第一个页面,通过代码的方式编写第二个页面。
在Project窗口中单击entry→src→main→resources→base→layout,打开ability_main.xml文件,如图11所示。
■ 图11 打开ability_main.xml文件
在Project窗口中单击entry→src→main→resources→base→element,打开string.json文件,可在此文件内声明所需引用的资源内容。关于取值为string类型的文本属性,可以直接设置文本字符串,也可以引用string资源(推荐使用)。string.json的示例代码如下。
程序清单1: chart10\HMDemoJava\entry\src\main\resources\base\element\string.json
第一个页面内有一个文本和一个按钮,使用DependentLayout布局,通过Text和Button组件来实现,其中,vp和fp分别表示虚拟像素和字体像素。本次示例展示两个组件的显示文本分别采用直接设置文本字符串、引用string资源(推荐使用)的方式。ability_main.xml的示例代码如下。
程序清单2: chart10\HMDemoJava\entry\src\main\resources\base\layout\ability_main.xml
按钮的背景是蓝色胶囊样式,可以通过graphic目录下的XML文件来设置。
右击graphic文件夹,选择New→File,命名为“background_button.xml”,按Enter键,生成文件如图12所示。
■ 图12 创建background_button.xml文件
程序清单3: chart10\HMDemoJava\entry\src\main\
在layout目录下的ability_main.xml文件中,使用background_element="$graphic: background_button"的方式引用background_button.xml文件,如图13所示。
■ 图13 引用background_button.xml文件
在XML文件中添加组件后,需要在Java代码中加载XML布局。
在Project窗口中选择entry→src→main→java→com.example.myapplication→slice,打开MainAbilitySlice.java文件,使用setUIContent()方法加载ability_main.xml布局。此外,运行代码前需采用import(可使用Alt+Enter快捷键)引入对应类,否则会产生报错提示。
说明: 鸿蒙操作系统提供了Ability和AbilitySlice两个基础类,一个有界面的Ability可以由一个或多个AbilitySlice构成,AbilitySlice主要用于承载单个页面的具体逻辑实现和界面UI,是应用显示、运行和跳转的最小单元。
程序清单4: chart10\HMDemoJava\entry\src\main\resources\base\
使用预览器或模拟器运行项目,效果如图14所示。
■ 图14 运行项目效果(一)
2. 创建另一个页面
前面用XML的方式编写了一个包含文本和按钮的页面。为了帮助开发者熟悉在代码中创建布局的方式,接下来使用代码的方式编写第二个页面。
在Project窗口中打开entry→src→main→java→com.example.myapplication,右击slice文件夹,选择New→Java Class,命名为SecondAbilitySlice,按Enter键。
第二个页面上有一个文本。打开SecondAbilitySlice.java文件,添加一个Text,示例代码如下。
程序清单5: chart10\HMDemoJava\entry\src\main\java\com\example\
3. 实现页面跳转
打开第一个页面的MainAbilitySlice.java文件,添加按钮的响应逻辑,实现单击按钮跳转到下一页,示例代码如下。
程序清单6: chart10\HMDemoJava\entry\src\main\java\com\example\
再次运行项目,效果如图15所示。
■ 图15 运行项目效果(二)
2●JS UI方式实现页面跳转
1. 编写第一个页面
第一个页面内有一个文本和一个按钮,通过Text和Button组件来实现。
在Project窗口中选择entry→src→main→js→default→pages.index,打开index.hml文件,添加一个文本和一个按钮,示例代码如下。
程序清单7: chart10\HMDemoJS\entry\src\main\js\default\pages\index\index.hml
打开index.css文件,设置文本和按钮的样式,示例代码如下。
程序清单8: chart10\HMDemoJS\entry\src\main\js\default\pages\index\index.css
使用预览器或模拟器运行项目,效果如图16所示。
■ 图16 运行项目效果(三)
2. 创建另一个页面
在Project窗口中打开entry→src→main→js→default,右击pages.index文件夹,选择New→JS Page,命名为details,按Enter键。
创建完成后,可以看到pages.index文件夹下的文件目录结构如图17所示。
■ 图17 pages.index目录结构
打开details.hml文件,添加一个文本,示例代码如下。
程序清单9: chart10\HMDemoJS\entry\src\main\js\default\
打开details.css文件,设置文本的样式,示例代码如下。
程序清单10: chart10\HMDemoJS\entry\src\main\js\default\pages\index\details\details.hml
3. 实现页面跳转
打开第一个页面的index.js文件,导入router模块,页面路由router根据页面的uri来找到目标页面,从而实现跳转。示例代码如下。
程序清单11: chart10HMDemoJS\entry\src\main\js\default\pages\index\index.js
再次运行项目,效果如图18所示。
■ 图18运行项目效果(四)
鸿蒙开发入门 | 开发第一个鸿蒙应用+页面跳转相关推荐
- 微信公众号开发入门教程第一篇
微信公众号开发入门教程第一篇 关键字:微信公众平台开发 作者:方倍工作室 在这篇微信公众平台开发教程中,我们假定你已经有了PHP语言程序.MySQL数据库.计算机网络通讯.及HTTP/XML/CSS/ ...
- 鸿蒙系统入门开发(入门篇)
文章目录 鸿蒙开发 开发基础知识 app Ability 库文件 资源文件 配置文件 pack,info HAR 搭建开发环境 软件安装 配置开发环境 下载HarmonyOS SDK 运行hello ...
- h华为鸿蒙5G手机,华为第一款鸿蒙手机确认!不是P50系列,也不支持5G
原标题:华为第一款鸿蒙手机确认!不是P50系列,也不支持5G 华为第一款鸿蒙手机确认!不是P50系列,也不支持5G 由于芯片受阻,华为手机业务不断萎缩,不仅丢掉了国内市场老大哥的位置,在全球市场排名中 ...
- 鸿蒙os第四次培训(菜单 页面跳转)
运用到了和vue部分相似的内容 同为前端开发 我认为鸿蒙os的开发更为分散式且在华为系列工具上的适配性更高 config.json中: "module": { "reqP ...
- 鸿蒙APP开发入门到进阶 | 聊聊鸿蒙项目结构和使用方法
大家好,我是 码工,一个有十年工作经验的码农,一心追求技术. 来啦来啦,最近经常有小伙伴问我有关鸿蒙的项目目录结构,让我讲一下鸿蒙开发的目录结构. 今天终于有时间了,给大家详细讲解一下. 主要从两方面 ...
- 鸿蒙tv系统安装,运行第一个鸿蒙tv应用
1.首先进入网页 https://hmxt.org/deveco-studio 选择开大工具下载 再点击官方下载 下载完成后双击安装 注意不要安装在c盘中,中间一路accept. 2.新建一个tv应用 ...
- 以太坊开发入门-开发环境准备
开发合约语言使用Solidity,在开始之前先学习一下该语言,有编程基础的人很快就能上手. 开发环境有很多,平时我们常用的IDE,安装上Solidity插件后基本都能使用,为了快速上手开发,今天主要是 ...
- Spring Web Flow 入门demo(一)简单页面跳转 附源码
转载地址 http://blog.csdn.net/hejingyuan6/article/details/46508821 spring Web Flow (SWF)是Spring Framewor ...
- Android入门小案例,制作登陆页面跳转
这个案例,主要目的是带着大家理解Android开发的基础知识,与UI布局以及点击事件,方便大家能更好的入门.至于如何创建一个Android项目这里就不在过多阐述.笔者这里使用的开发工具是IDEA,语言 ...
最新文章
- ASP.NET 3.5技术专题发布
- 注解方式使用 Redis 缓存
- CVPR 2020 Oral | 旷视提出目前最好的密集场景目标检测算法:一个候选框,多个预测结果...
- let的解构赋值_前端开发es6知识 模块化、解构赋值、字符串模板
- MySQL binlog相关分析
- dns修复工具一键修复_ps污点修复画笔工具怎么用?修复工具组(一)
- 声卡loopback有什么用_sam机架宿主软件无法获取声卡ASIO问题解析
- MATLAB高斯平顶化,一种高斯光束变换为平顶光束整形透镜的粒子群设计方法与流程...
- matlab 双y轴画图
- root cause java.lang.LinkageError: loader constraint violation: loader (instanc
- 火车头采集,wordpress特色图如何设置?
- “This probably means that you are not using fork to start your child processes and you hav报错
- 19杭电计算机考研科目,2019杭电计算机考研初试科目、参考书目、报录比汇总
- Java EE的几个常用框架简介
- 一些开源书籍下载地址汇总
- 使用idea将dev分支合并到master分支
- 【Windows问题解决】 Win10无法打开Wlan,但是驱动正常的解决方案
- 如何选择MySQL中除一列外的所有列
- 不会有人运营独立站还不知道聊天机器人吧?五分钟带你深入了解AI聊天机器人!
- 确定sw1开关信号输入端口_射频开关构型选择
热门文章
- GDUT——1169: Krito的讨伐(优先队列BFS)
- python小案例程序安徽工程大学专用百词斩(刚接触python不喜勿喷)
- 【敏捷压测】快速进行压测
- js层级轮播图兼容IE8及以上浏览器
- Promise 基本使用详解
- 漫谈阿里那些大数据技术,大数据学习者必看
- 三峡大学c语言上机考试题库,[专题]三峡大学计算机基础考试题库.doc
- matlab 色彩布局描述符(Color layout descriptor)
- 异常处理·EF·准备命令定义时发生错误。有关详细信息,请参阅内部异常
- 统计200~1000之间能被7整除数的个数。