重庆最便宜的网站建设,网络系统架构,网站内容 内链,郑州见效果付费优化公司开发流程
IDE下载
首先下载HUAWEI DevEco Studio#xff0c;介绍首次启动DevEco Studio的配置向导#xff1a;
运行已安装的DevEco Studio#xff0c;首次使用#xff0c;请选择Do not import settings#xff0c;单击OK。安装Node.js与ohpm。node.js 是基于 V8 引擎构…开发流程
IDE下载
首先下载HUAWEI DevEco Studio介绍首次启动DevEco Studio的配置向导
运行已安装的DevEco Studio首次使用请选择Do not import settings单击OK。安装Node.js与ohpm。node.js 是基于 V8 引擎构建的开源运行时环境用于运行JavaScript代码。 ohpm 是OpenHarmony的包管理器用于管理鸿蒙操作系统的软件包。可以指定本地已安装的Node.js或ohpmNode.js版本要求为v14.19.1及以上且低于v17.0.0对应的npm版本要求为6.14.16及以上路径位置我本地下载的node版本为v20.2.0所以要使用在线下载。即在安装时选择Install按钮选择下载源和存储路径后进行在线下载单击Next进入下一步。 然后一路next这个地方要同意协议 等待下载完成我这边下载的时候ohpm 下载异常这时候选择在线下载
配置环境变量
1- 打开终端工具执行以下命令根据输出结果分别执行不同命令。
echo $SHELL 如果输出结果为/bin/bash则执行以下命令打开.bash_profile文件。
vi ~/.bash_profile如果输出结果为/bin/zsh则执行以下命令打开.zshrc文件。
vi ~/.zshrc单击字母“i”进入Insert模式。配置环境变量添加HDC_SERVER_PORT端口信息、ohpm、node
export HDC_SERVER_PORT7035
export OHPM_HOME/Users/yangcong/Library/Huawei/ohpm //替换wield自己的ohpm地址
export PATH${OHPM_HOME}/bin:${PATH}export NODE_HOME/Users/yangcong/nodejs //替换为自己下载的地址
export PATH${NODE_HOME}/bin:${PATH}如果忘记自己把node或者ohpm下载到哪了可以到编辑器页面进行查看
编辑完成后单击Esc键退出编辑模式然后输入“:wq”单击Enter键保存。如果不习惯使用vi命令修改可以使用
open ~/.bash_profile
// zshrc 模式时使用下面命名
open ~/.zshrc这样可以直接以文本的形式打开文件添加到环境变量末尾后关闭即可
执行以下命令使配置的环境变量生效。 source ~/.bash_profile // zshrc 模式时使用下面命名 source ~/.zshrc 查看当前配置是否生效 环境变量配置完成后关闭并重启DevEco Studio。
诊断开发环境
在欢迎界面单击Help Diagnose Development Environment进行诊断。如果您已经打开了工程开发界面也可以在菜单栏单击Help Diagnostic Tools Diagnose Development Environment进行诊断。 DevEco Studio开发环境诊断项包括电脑的配置、网络的连通情况、依赖的工具或SDK等。如果检测结果为未通过请根据检查项的描述和修复建议进行处理。
工程介绍
APP包结构
应用/服务发布形态为APP PackApplication Package简称APP它是由一个或多个HAPHarmony Ability Package包以及描述APP Pack属性的pack.info文件组成。 一个HAP在工程目录中对应一个Module它是由代码、资源、第三方库及应用/服务配置文件组成HAP可以分为Entry和Feature两种类型。
Entry应用/服务的主模块可独立安装运行。一个APP中对于同一类型的设备可以包含一个或多个Entry类型的HAP如果同一类型的设备包含多个Entry模块需要配置distroFilter分发规则使得应用市场在做应用的云端分发时对该设备类型下不同规格的设备进行分发。Feature应用/服务的动态特性模块。一个APP可以包含零到多个Feature类型的HAP。只有包含Ability的HAP才能够独立运行。 基于Stage模型和FA模型开发的应用应用程序包结构并不相同
工程目录结构
应用/服务支持API Version 4~9。API Version 4~7和API Version 8~9的构建工具和构建插件不同。其中API Version 4~7构建体系是由Gradle构建工具和构建插件组成API Version 8~9构建体系是由Hvigor构建工具和构建插件组成。所以API Version 4~7和API Version 8~9的工程目录结构存在差异。下面按照不同开发语言分别介绍API Version 4~7和API Version 8~9的工程目录结构。 ArkTS工程目录结构Stage模型
AppScope app.json5应用的全局配置信息。entry应用/服务模块编译构建生成一个HAP。 src main ets用于存放ArkTS源码。src main ets entryability应用/服务的入口。src main ets pages应用/服务包含的页面。src main resources用于存放应用/服务所用到的资源文件如图形、多媒体、字符串、布局文件等。关于资源文件的详细说明请参考资源文件的分类。src main module.json5Stage模型模块配置文件主要包含HAP的配置信息、应用在具体设备上的配置信息以及应用的全局配置信息。oh_modules用于存放三方库依赖信息。关于原npm工程适配OHPM包管理器操作请参考OHPM包管理器。build-profile.json5当前的模块信息、编译信息配置项包括buildOption、targets配置等。hvigorfile.ts模块级编译构建任务脚本。oh-package.json5配置三方包声明文件的入口及包名。 其他工程目录例如FA模型Gradle旧版目录等可查看工程介绍
开发第一个程序
针对不同的应用场景及技术背景方舟开发框架提供了两种开发范式分别是基于ArkTS的声明式开发范式简称“声明式开发范式”和兼容JS的类Web开发范式简称“类Web开发范式”。
声明式开发范式采用基于TypeScript声明式UI语法扩展而来的ArkTS语言从组件、动画和状态管理三个维度提供UI绘制能力。类Web开发范式采用经典的HML、CSS、JavaScript三段式开发方式即使用HML标签文件搭建布局、使用CSS文件描述样式、使用JavaScript文件处理逻辑。该范式更符合于Web前端开发者的使用习惯便于快速将已有的Web应用改造成方舟开发框架应用。 在开发一款新应用时推荐采用声明式开发范式来构建UI主要基于以下几点考虑开发效率声明式开发范式更接近自然语义的编程方式开发者可以直观地描述UI无需关心如何实现UI绘制和渲染开发高效简洁。应用性能如下图所示两种开发范式的UI后端引擎和语言运行时是共用的但是相比类Web开发范式声明式开发范式无需JS框架进行页面DOM管理渲染更新链路更为精简占用内存更少应用性能更佳。发展趋势声明式开发范式后续会作为主推的开发范式持续演进为开发者提供更丰富、更强大的能力。 具体说明见 ArkUI框架 因此我们选择使用官方推荐的声明式开发规范。
Hello World
点击Create Project创建一个新工程选择Application — Empty Abilty 填写工程相关信息保持默认值即可单击Finish。
Project name工程的名称可以自定义由大小写字母、数字和下划线组成。 如果是创建的元服务则 调试、运行时在设备桌面上没有应用图标请使用DevEco Studio的调试和运行功能来启动元服务。编译构建APP时每个HAP大小不能超过10MB。 Bundle name标识应用的包名用于标识应用的唯一性。Save location工程文件本地存储路径由大小写字母、数字和下划线等组成不能包含中文字符。Compile SDK应用/服务的目标API Version在编译构建时DevEco Studio会根据指定的Compile API版本进行编译打包。Model应用支持的模式API Version 4~8只支持FA模式。Enable Super Visual支持低代码开发模式部分模板支持低代码开发可选择打开该开关。Language开发语言。Compatible SDK兼容的最低API Version。Device type该工程模板支持的设备类型。
创建模拟器
单击DevEco Studio Preferences SDK下拉框选择HarmonyOS勾选并下载Platforms下的System-image和Tools下的Emulator资源。虚拟机支持Phone、TV和Wearable设备下载System-image时请选择对应设备的System-image。
点击ok等待下载完成 5. 单击菜单栏的Tools Device Manager在Local Emulator页签可以单击Edit设置本地模拟器的存储路径Local emulator location点击New Emulator 创建一个本地模拟器。可以修改设备的名称、尺寸、分辨率、内存等参数。和Android Studio 非常相似。 回到项目中点击run,编译完成后 hello world 就能跑起来了 打开“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%)}
}构建第二个页面 在“Project”窗口打开“entry src main ets ”右键点击“pages”文件夹选择“New ArkTS File”命名为“Second”点击“Finish”。可以看到文件目录结构如下: 配置第二个页面的路由。在“Project”窗口打开“entry src main resources base profile”在main_pages.json文件中的“src”下配置第二个页面的路由“pages/Second”。示例如下
{src: [pages/Index,pages/Second]
}这一步也可以在右键点击“pages”文件夹时选择“New Page”则无需手动配置相关页面路由。 9. 添加文本及按钮。 参照第一个页面在第二个页面添加Text组件、Button组件等并设置其样式。“Second.ets”文件的示例如下
// Second.ets
Entry
Component
struct Second {State message: string 我是第二个页面build() {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.etsimport 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(() {console.info(按钮被点击了~~)//跳转router.pushUrl({url:pages/Second}).then(() {console.info(成功跳转到了新的页面)}).catch((err) {console.error(跳转失败错误码 ${err.code}, 错误信息 ${err.message})})})}.width(100%)}.height(100%)}
}第二个页面返回到第一个页面。 在第二个页面中返回按钮绑定onClick事件点击按钮时返回到第一页。“Second.ets”文件的示例如下
// Second.ets
import router from ohos.routerEntry
Component
struct Second {State message: string 我是第二个页面build() {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(() {console.info(返回按钮被点击了~~)try {// 返回第一页router.back()console.info(成功返回第一页~)} catch (err) {console.error(返回失败错误码 ${err.code}, 错误信息 ${err.message})}})}.width(100%)}.height(100%)}
}问题记录
当我创建完模拟器之后IDE并没有识别出来 解决方法重启IDE
UI开发 方舟开发框架简称ArkUI为HarmonyOS应用的UI开发提供了完整的基础设施包括简洁的UI语法、丰富的UI功能组件、布局、动画以及交互事件以及实时界面预览工具等可以支持开发者进行可视化界面开发。 基本概念
UI即用户界面。开发者可以将应用的用户界面设计为多个功能页面每个页面进行单独的文件管理并通过页面路由API完成页面间的调度管理如跳转、回退等操作以实现应用内的功能解耦。组件UI构建与显示的最小单位如列表、网格、按钮、单选框、进度条、文本等。开发者通过多种组件的组合构建出满足自身应用诉求的完整界面。 基于ArkTS的声明式开发范式的方舟开发框架是一套开发极简、高性能、支持跨设备的UI开发框架提供了构建HarmonyOS应用UI所必需的能力主要包括ArkTS ArkTS是UI开发语言基于TypeScript简称TS语言扩展而来是TS的超集。扩展能力包含各种装饰器、自定义组件、UI描述机制。状态数据管理作为基于ArkTS的声明式开发范式的特色通过功能不同的装饰器给开发者提供了清晰的页面更新渲染流程和管道。状态管理包括UI组件状态和应用程序状态两者协作可以使开发者完整地构建整个应用的数据更新和UI渲染。ArkTS语言的基础知识请参考学习ArkTS语言。 布局 布局是UI的必要元素它定义了组件在界面中的位置。ArkUI框架提供了多种布局方式除了基础的线性布局、层叠布局、弹性布局、相对布局、栅格布局外也提供了相对复杂的列表、宫格、轮播。 组件 组件是UI的必要元素形成了在界面中的样子由框架直接提供的称为系统组件由开发者定义的称为自定义组件。系统内置组件包括按钮、单选框、进度条、文本等。开发者可以通过链式调用的方式设置系统内置组件的渲染效果。开发者可以将系统内置组件组合为自定义组件通过这种方式将页面组件化为一个个独立的UI单元实现页面不同单元的独立创建、开发和复用具有更强的工程性。 页面路由和组件导航 应用可能包含多个页面可通过页面路由实现页面间的跳转。一个页面内可能存在组件间的导航如典型的分栏可通过导航组件实现组件间的导航。 图形 方舟开发框架提供了多种类型图片的显示能力和多种自定义绘制的能力以满足开发者的自定义绘图需求支持绘制形状、填充颜色、绘制文本、变形与裁剪、嵌入图片等。 动画 动画是UI的重要元素之一。优秀的动画设计能够极大地提升用户体验框架提供了丰富的动画能力除了组件内置动画效果外还包括属性动画、显式动画、自定义转场动画以及动画API等开发者可以通过封装的物理模型或者调用动画能力API来实现自定义动画轨迹。 交互事件 交互事件是UI和用户交互的必要元素。方舟开发框架提供了多种交互事件除了触摸事件、鼠标事件、键盘按键事件、焦点事件等通用事件外还包括基于通用事件进行进一步识别的手势事件。手势事件有单一手势如点击手势、长按手势、拖动手势、捏合手势、旋转手势、滑动手势以及通过单一手势事件进行组合的组合手势事件
