做一个交易网站要花多少钱,西安网站建设xs029,义乌网页设计公司,把网站做app基本概念
UI框架
HarmonyOS提供了一套UI开发框架#xff0c;即方舟开发框架#xff08;ArkUI框架#xff09;。方舟开发框架可为开发者提供应用UI开发所必需的能力#xff0c;比如多种组件、布局计算、动画能力、UI交互、绘制等。
方舟开发框架针对不同目的和技术背景的…基本概念
UI框架
HarmonyOS提供了一套UI开发框架即方舟开发框架ArkUI框架。方舟开发框架可为开发者提供应用UI开发所必需的能力比如多种组件、布局计算、动画能力、UI交互、绘制等。
方舟开发框架针对不同目的和技术背景的开发者提供了两种开发范式分别是基于ArkTS的声明式开发范式简称“声明式开发范式”和兼容JS的类Web开发范式简称“类Web开发范式”。以下是两种开发范式的简单对比。
开发范式名称语言生态UI更新方式适用场景适用人群声明式开发范式ArkTS语言数据驱动更新复杂度较大、团队合作度较高的程序移动系统应用开发人员、系统应用开发人员类Web开发范式JS语言数据驱动更新界面较为简单的程序应用和卡片Web前端开发人员
应用模型
应用模型是HarmonyOS为开发者提供的应用程序所需能力的抽象提炼它提供了应用程序必备的组件和运行机制。有了应用模型开发者可以基于一套统一的模型进行应用开发使应用开发更简单、高效。
随着系统的演进发展HarmonyOS先后提供了两种应用模型
FAFeature Ability模型 HarmonyOS API 7开始支持的模型已经不再主推。Stage模型 HarmonyOS API 9开始新增的模型是目前主推且会长期演进的模型。在该模型中由于提供了AbilityStage、WindowStage等类作为应用组件和Window窗口的“舞台”因此称这种应用模型为Stage模型。
快速入门提供了一个含有两个页面的开发实例并使用了不同的开发语言或不同的应用模型进行开发以便开发者理解以上基本概念及应用开发流程。
工具准备
安装最新版DevEco Studio。请参考配置开发环境完成DevEco Studio的安装和开发环境配置。
构建第一个ArkTS应用Stage模型
创建ArkTS工程
若首次打开DevEco Studio请点击Create Project创建工程。如果已经打开了一个工程请在菜单栏选择File New Create Project来创建一个新工程。选择Application应用开发本文以应用开发为例Atomic Service对应为元服务开发选择模板“Empty Ability”点击Next进行下一步配置。 进入配置工程界面Compile SDK选择“3.1.0(API 9)”Model 选择“Stage”其他参数保持默认设置即可。 说明 支持使用ArkTS低代码开发方式。 低代码开发方式具有丰富的UI界面编辑功能通过可视化界面开发方式快速构建布局可有效降低开发者的上手成本并提升开发者构建UI界面的效率。 如需使用低代码开发方式请打开上图中的Enable Super Visual开关。
点击Finish工具会自动生成示例代码和相关资源等待工程创建完成。
ArkTS工程目录结构Stage模型 AppScope app.json5应用的全局配置信息。entryHarmonyOS工程模块编译构建生成一个HAP包。src main ets用于存放ArkTS源码。src main ets entryability应用/服务的入口。src main ets pages应用/服务包含的页面。src main resources用于存放应用/服务所用到的资源文件如图形、多媒体、字符串、布局文件等。src main module.json5Stage模型模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。build-profile.json5当前的模块信息、编译信息配置项包括buildOption、targets配置等。其中targets中可配置当前运行环境默认为HarmonyOS。hvigorfile.ts模块级编译构建任务脚本开发者可以自定义相关任务和代码实现。oh_modules用于存放三方库依赖信息。build-profile.json5应用级配置信息包括签名、产品配置等。hvigorfile.ts应用级编译构建任务脚本。
构建第一个页面
使用文本组件。 工程同步完成后在“Project”窗口点击“entry src main ets pages”打开“Index.ets”文件可以看到页面由Text组件组成。“Index.ets”文件的示例如下
// Index.ets
Entry
Component
struct Index {State message: string Hello Worldbuild() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width(100%)}.height(100%)}
}添加按钮。 在默认页面基础上我们添加一个Button组件作为按钮响应用户点击从而实现跳转到另一个页面。“Index.ets”文件的示例如下
// Index.ets
Entry
Component
struct Index {State message: string Hello Worldbuild() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)// 添加按钮以响应用户点击Button() {Text(Next).fontSize(30).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor(#0D9FFB).width(40%).height(5%)}.width(100%)}.height(100%)}
}在编辑窗口右上角的侧边工具栏点击Previewer打开预览器。第一个页面效果如下图所示 构建第二个页面
创建第二个页面。
新建第二个页面文件。在“Project”窗口打开“entry src main ets ”右键点击“pages”文件夹选择“New ArkTS File”命名为“Second”点击“Finish”。可以看到文件目录结构如下 说明 开发者也可以在右键点击“pages”文件夹时选择“New Page”则无需手动配置相关页面路由。
配置第二个页面的路由。在“Project”窗口打开“entry src main resources base profile”在main_pages.json文件中的“src”下配置第二个页面的路由“pages/Second”。示例如下
{src: [pages/Index,pages/Second]
}添加文本及按钮。 参照第一个页面在第二个页面添加Text组件、Button组件等并设置其样式。“Second.ets”文件的示例如下
// Second.ets
Entry
Component
struct Second {State message: string Hi therebuild() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Button() {Text(Back).fontSize(25).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor(#0D9FFB).width(40%).height(5%)}.width(100%)}.height(100%)}
}实现页面间的跳转
页面间的导航可以通过页面路由router来实现。页面路由router根据页面url找到目标页面从而实现跳转。使用页面路由请导入router模块。
第一个页面跳转到第二个页面。 在第一个页面中跳转按钮绑定onClick事件点击按钮时跳转到第二页。“Index.ets”文件的示例如下
// Index.ets
// 导入页面路由模块
import router from ohos.router;Entry
Component
struct Index {State message: string Hello Worldbuild() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)// 添加按钮以响应用户点击Button() {Text(Next).fontSize(30).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor(#0D9FFB).width(40%).height(5%)// 跳转按钮绑定onClick事件点击时跳转到第二页.onClick(() {console.info(Succeeded in clicking the Next button.)// 跳转到第二页router.pushUrl({ url: pages/Second }).then(() {console.info(Succeeded in jumping to the second page.)}).catch((err) {console.error(Failed to jump to the second page.Code is ${err.code}, message is ${err.message})})})}.width(100%)}.height(100%)}
}第二个页面返回到第一个页面。 在第二个页面中返回按钮绑定onClick事件点击按钮时返回到第一页。“Second.ets”文件的示例如下
// Second.ets
// 导入页面路由模块
import router from ohos.router;Entry
Component
struct Second {State message: string Hi therebuild() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Button() {Text(Back).fontSize(25).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor(#0D9FFB).width(40%).height(5%)// 返回按钮绑定onClick事件点击按钮时返回到第一页.onClick(() {console.info(Succeeded in clicking the Back button.)try {// 返回第一页router.back()console.info(Succeeded in returning to the first page.)} catch (err) {console.error(Failed to return to the first page.Code is ${err.code}, message is ${err.message})}})}.width(100%)}.height(100%)}
}打开“Index.ets”文件点击预览器中的按钮进行刷新。效果如下图所示 使用真机运行应用
运行HarmonyOS应用可以使用远程模拟器和物理真机设备区别在于使用远程模拟器运行应用不需要对应用进行签名。接下来将以物理真机设备为例介绍HarmonyOS应用的运行方法关于模拟器的使用请参考使用Remote Emulator运行应用/服务。
将搭载HarmonyOS系统的真机与电脑连接。具体指导及要求可查看使用本地真机运行应用/服务。点击File Project Structure… Project SigningConfigs界面勾选“Support HarmonyOS”和“Automatically generate signature”点击界面提示的“Sign In”使用华为帐号登录。等待自动签名完成后点击“OK”即可。如下图所示 在编辑窗口右上角的工具栏点击按钮运行。效果如下图所示 恭喜您已经使用ArkTS语言开发Stage模型完成了第一个HarmonyOS应用有更多的HarmonyOS功能可以参考《鸿蒙纯血开发全套文档》点击可获取全套学习路线图。 随着华为鸿蒙系统的推进和生态竞争的加剧互联网行业将迎来一场前所未有的变革。对于企业和从业者而言把握行业趋势、提升技能水平将是应对挑战的关键。我们作为程序员一定要抓住时代的红利——鸿蒙。
