鸿蒙开发者社区

目录​​1>一体化工程迁移​​​​1.1>自动迁移​​​​1.2>手动迁移​​​​1.2.1>API10及以上历史工程迁移​​​​1.2.2>API9历史工程迁移​​1>一体化工程迁移DevEcoStudio从NEXTDeveloperBeta1版本开始，提供开箱即用的开发体验，将SDK、Node.js、Hvigor、OHPM等工具链进行合一打包，简化DevEcoStudio安装配置流程；并提供一体化的历史工程迁移能力，帮助开发者快速完成工程转换。注意为了避免数据丢失，迁移前请对工程进行...

目录​​1>工程模板介绍​​​​2>创建一个新的工程​​​​2.1>创建和配置新工程​​​​2.1.1>创建HarmonyOS工程​​​​2.2.2>创建OpenHarmony工程​​1>工程模板介绍DevEcoStudio支持多种品类的应用元服务开发，预置丰富的工程模板，可以根据工程向导轻松创建适应于各类设备的工程，并自动生成对应的代码和资源模板。同时，DevEcoStudio还提供了多种编程语言供开发者进行应用元服务开发，包括ArkTS、JS和CC++。工程模板支持...

目录​​1>工具简介​​​​1.1>概述​​​​1.2>HarmonyOS应用服务开发流程​​​​1.2.1>开发准备​​​​1.2.2>开发应用服务​​​​1.2.3>运行、调试和测试应用服务​​​​1.2.4>发布应用服务​​​​2>工程介绍​​​​2.1>APP包结构​​​​2.2>切换工程视图​​​​3>工程目录结构​​​​3.1>ArkTS工程目录结构(Stage模型)​​​​3.2>C++工程目录结构(Stage模型)​​​​3.3>JS工程目录结构(FA模型)​​1>工具简介1.1...

目录​​1>动画动效​​​​1.1>创建动画对象​​​​1.2>添加动画事件和调用接口​​​​2>动画帧​​​​2.1>请求动画帧​​​​2.2>取消动画帧​​​​3>自定义组件​​1>动画动效1.1>创建动画对象通过createAnimator创建一个动画对象，通过设置参数options来设置动画的属性。<!test.hml><divclass"container"><divstyle"width:300px;height:300px;margintop:100px;background:lineargradient(pink,purple);transform:transl...

目录​​1>动画动效​​​​1.1>创建动画对象​​​​1.2>添加动画事件和调用接口​​​​2>动画帧​​​​2.1>请求动画帧​​​​2.2>取消动画帧​​1>动画动效通过设置插值器来实现动画效果。说明从APIVersion6开始支持。1.1>创建动画对象通过createAnimator创建一个动画对象，通过设置参数options来设置动画的属性。<!test.hml><divclass"container"><divstyle"width:300px;height:300px;margintop:100px;background:linearg...

目录​​1>获取动画对象​​​​2>设置动画参数​​​​3>添加事件和调用方法​​1>获取动画对象通过调用animate方法获得animation对象，animation对象支持动画属性、动画方法和动画事件。<!test.hml><divclass"container"><divid"content"class"box"onclick"Show"><div><div>test.css.container{flexdirection:column;justifycontent:center;alignitems:center;width:100%;}.box{width:200px;height:200px;backgroundcolor:ff0...

目录​​1>属性样式动画​​​​2>transform样式动画​​​​2.1>设置静态动画​​​​2.2>设置平移动画​​​​2.3>设置旋转动画​​​​2.4>设置缩放动画​​​​2.5>设置matrix属性​​​​2.6>整合transform属性​​​​3>backgroundposition样式动画​​​​4>svg动画​​​​4.1>属性样式动画​​​​4.2>路径动画​​​​4.3>animateTransform动画​​1>属性样式动画在关键帧(Keyframes)中动态设置父组件的width和height...

目录​​1>基础知识​​​​1.1>创建Svg组件​​​​1.2>设置属性​​​​2>绘制图形​​​​3>绘制路径​​​​4>绘制文本​​​​4.1>文本​​​​4.2>沿路径绘制文本​​1>基础知识Svg组件主要作为svg画布的根节点使用，也可以在svg中嵌套使用。说明从APIversion7开始支持。svg父组件或者svg组件需要定义宽高值，否则不进行绘制。1.1>创建Svg组件在pagesindex目录下的hml文件中创建一个Svg组件。<!test.hml><divclass"contai...

目录​​1>创建Swiper组件​​​​2>添加属性​​​​3>设置样式​​​​4>绑定事件​​​​5>场景示例​​1>创建Swiper组件在pagesindex目录下的hml文件中创建一个Swiper组件。<!test.hml><divclass"container"><swiper><divclass"item"style"backgroundcolor:bf45ea;"><text>item1<text><div><divclass"item"style"backgroundcolor:088684;"><text>item2<text><div><divclass"item"style"backgroundcolor:7786ee;"><text>item...

目录​​1>创建Tabs​​​​2>设置Tabs方向​​​​3>设置样式​​​​4>显示页签索引​​​​5>场景示例​​1>创建Tabs在pagesindex目录下的hml文件中创建一个Tabs组件。<!index.hml><divclass"container"<tabs><tabbar><text>item1<text><text>item2<text><tabbar><tabcontentclass"tabContent"><divclass"text"><text>content1<text><div><divclass"text"><text>content2<text><div><tabcontent><tabs><div>test.css.contain...

目录​​1>创建Stepper组件​​​​2>设置index属性​​​​3>设置样式​​​​4>添加事件​​​​5>场景示例​​1>创建Stepper组件在pagesindex目录下的hml文件中创建一个Stepper组件。<!index.hml><divclass"container"><stepper><stepperitem><text>Step1<text><stepperitem><stepperitem><text>Step2<text><stepperitem><stepper><div>test.css.container{width:100%;height:100%;flexdirection:column;justifycontent:cent...

目录​​1>List​​​​1.1>创建List组件​​​​1.2>添加滚动条​​​​1.3>添加侧边索引栏​​​​1.4>实现列表折叠和展开​​​​1.5>场景示例​​​​2>dialog​​​​2.1>创建Dialog组件​​​​2.2>设置弹窗响应​​​​2.3>场景示例​​​​3>form​​​​3.1>创建Form组件​​​​3.2>实现表单缩放​​​​3.3>设置Form样式​​​​3.4>添加响应事件​​​​3.5>场景示例​​1>ListList是用来显示列表的组件，包含一系...

目录​​1>添加交互​​​​2>动画​​​​2.1>静态动画​​​​2.2>连续动画​​​​3>手势事件​​​​4>页面路由​​​​4.1>构建页面布局​​​​4.2>构建页面样式​​​​4.3>实现跳转​​1>添加交互添加交互可以通过在组件上关联事件实现。本节将介绍如何用div、text、image组件关联click事件，构建一个如下图所示的点赞按钮。点赞按钮通过一个div组件关联click事件实现。div组件包含一个image组件和一个text组件：image...

目录​​1>组件介绍​​​​1.1>组件分类​​​​2>布局说明​​​​3>添加标题行和文本区域​​​​4>添加图片区域​​​​5>添加留言区域​​​​6>添加组件​​​​6.1>List组件​​​​6.2>Tabs组件​​1>组件介绍组件(Component)是构建页面的核心，每个组件通过对数据和方法的简单封装，实现独立的可视、可交互功能单元。组件之间相互独立，随取随用，也可以在需求相同的地方重复使用。1.1>组件分类根据组件的功能，可以分...

目录​​1>生命周期​​​​1.1>应用生命周期​​​​1.2>页面生命周期​​​​2>资源限定与访问​​​​2.1>资源限定词​​​​2.2>资源限定词的命名要求​​​​2.3>限定词与设备状态的匹配规则​​​​2.4>引用JS模块内resources资源​​​​3>多语言支持​​​​3.1>定义资源文件​​​​3.2>引用资源​​1>生命周期1.1>应用生命周期在app.js中可以定义如下应用生命周期函数：属性类型描述触发时机onCreate()>void应用创建...

目录​​1>HML语法​​​​1.1>页面结构​​​​1.2>数据绑定​​​​1.3>普通事件绑定​​​​1.4>冒泡事件绑定5+​​​​1.5>捕获事件绑定5+​​​​1.6>列表渲染​​​​1.7>条件渲染​​​​1.8>逻辑控制块​​​​1.9>模板引用​​​​2>CSS语法​​​​2.1>尺寸单位​​​​2.2>样式导入​​​​2.3>声明样式​​​​2.4>选择器​​​​2.5>选择器优先级​​​​2.6>伪类​​​​2.7>样式预编译​​​​2.8>CSS样式继承6+...

​目录​​1>概述​​​​1.1>整体架构​​​​2>文件组织​​​​2.1>目录结构​​​​2.2>文件访问规则​​​​2.3>媒体文件格式​​​​3>js标签配置​​​​3.1>pages​​​​3.2>window​​​​3.3>示例​​​​4>app.js​​​​4.1>应用生命周期​​​​4.2>应用对象6+​​​1>概述兼容JS的类Web开发范式的方舟开发框架，采用经典的HML、CSS、JavaScript三段式开发方式。使用HML标签文件进行布局搭建，使用CSS文件进行样...

​目录​​1>Web组件开发​​​​1.1>创建组件​​​​1.2>设置样式和属性​​​​1.3>添加事件和方法​​​​1.4>场景示例​​​​2>性能提升的推荐方法​​​​2.1>推荐使用数据懒加载​​​​2.2>使用条件渲染替代显隐控制​​​​2.3>使用ColumnRow替代Flex​​​​2.4>设置List组件的宽高​​​​2.5>减少应用滑动白块​​1>Web组件开发1.1>创建组件在pages目录下创建一个Web组件。在Web组件中通过src指定引用的网页路径，...

​目录​​1>自适应布局​​​​1.1>线性布局​​​​1.1.1>线性布局的排列​​​​1.1.2>自适应拉伸​​​​1.1.3>自适应缩放​​​​1.1.4>定位能力​​​​1.1.5>自适应延伸​​​​1.2>层叠布局​​​​1.2.1>对齐方式​​​​1.2.2>Z序控制​​​​1.3>弹性布局​​​​1.3.1>弹性布局方向​​​​1.3.2>弹性布局换行​​​​1.3.3>弹性布局对齐方式​​​​1.3.4>弹性布局的自适应拉伸​​​​1.3.5>场景示例​​​​1.4>...

目录​​1>绘制图形​​​​1.1>绘制基本几何图形​​​​1.2>绘制自定义几何图形​​​​2>添加动画效果​​​​2.1>animateTo实现闪屏动画​​​​2.2>页面转场动画​​​​3>常见组件说明​​1>绘制图形绘制能力主要是通过框架提供的绘制组件来支撑，支持svg标准绘制命令。1.1>绘制基本几何图形绘制组件封装了一些常见的基本几何图形，比如矩形Rect、圆形Circle、椭圆形Ellipse等，为开发者省去了路线计算的过程。FoodDetail...