作者:钟娟前言最近刚接触基于openHarmony开源框架的应用开发,特别是基于TS扩展的声明式开发。本文主要结合Harmony官网上的ETS相关组件及API实现日常开发中常见的故障循播效果,以此熟悉ETS下的一些基础组件的应用。UI开发模式效果演示实现步骤1.新建项目2.页面布局创建弹性Flex布局,使用Swiper容器组件,Text、Image基础组件。jsbuild(){Flex(){弹性布局Swiper(){滑动容器,提供切换子组件显示的能力Flex(){Image($r('app.me...
2022-08-31 10:46:44 1.2w浏览 8点赞 6回复 4收藏
作者:炒栗子前言前段时间HarmonyOS3发布了,吸引了不少的眼球,为了体验鸿蒙应用开发,决定动手实现一个案例——通过css动画实现吹灭蜡烛动画,看了一下鸿蒙应用开发文档,有js和ets两种开发方式,综合考量了一下,决定采用js方式实现。效果展示实现思路1.通过变换translate()的X轴位置,实现最右边蜡烛眼睛移动效果;2.通过改变height、width和left属性实现最右边蜡烛的嘴巴吹起动画;3.通过scale()和translate()动画函数实现...
2022-08-29 10:13:28 1.1w浏览 8点赞 8回复 4收藏
作者:何贝前言鸿蒙3.0推出了一种新的开发方式ETS,本文通过采用ETS实现我们项目开发中比较常见的下拉选择菜单组件来初步了解和体验下ETS的开发规范和方法,主要用到的TS知识点有Flex布局、文本展示、样式绑定、图片引入、父子组件变量共享、参数传递、ForEach循环遍历、事件绑定。实现效果用到的装饰器装饰器装饰内容说明Componentstruct结构体在装饰后具有基于组件的能力,需要实现build方法来更新UI。Entrystruct组件被装饰...
2022-08-23 15:38:45 1.6w浏览 13点赞 10回复 8收藏
作者:梁青松项目介绍本项目基于[OpenHarmony](https:docs.openharmony.cnpagesv3.1zhcnOpenHarmonyOverviewzh.md)的ArkUI框架:TS扩展的声明式开发范式,关于语法和概念直接看官网官方文档地址:[基于TS扩展的声明式开发范式](https:docs.openharmony.cnpagesv3.1zhcnapplicationdevuiuitsoverview.md),因为OpenHarmony的API相对于HarmonyOS的API,功能上比较完善和成熟的,有些新的技术也早早接触到,所以本项目直接使用Open...
2022-07-28 10:31:13 1.2w浏览 7点赞 5回复 4收藏
作者:范颖[本文正在参加星光计划3.0–夏日挑战赛](https:ost.51cto.composts13641)前言我刚接触HarmonyOS不久,接触到了很多不一样的东西。虽然遇到了很多问题,但学习本来就不是一蹴而就的,所以我决定从简单到复杂,所以这次我分享一个用canvas实现的签字效果。效果展示实现功能签字效果的实现,以及签字相关的预览、撤销、清空等功能,目前还在学习HarmonyOS中,更多的功能还没有完善出来,后续我会对这个功能不断地完善。...
2022-07-26 10:19:04 9016浏览 7点赞 2回复 2收藏
作者:陈甜甜[本文正在参加星光计划3.0–夏日挑战赛](https:ost.51cto.composts13641)前言随着气温越来越高,相信很多小伙伴已经没有心思工作了,作为前端的开发人员,决定自己搞个风扇降将温。刚好最近在学习HarmonyOS开发相关知识,发现动画属性使用比较多并且学起来比较有意思,因此利用HarmonyOS的动画效果实现了一个变速小风扇。项目说明工具版本:DevEcoStudio3.0Beta3SDK版本;3.1.5.5主要用到知识:animate官方API链接...
2022-07-25 09:10:16 1.0w浏览 6点赞 4回复 3收藏
作者:张明伟[本文正在参加星光计划3.0–夏日挑战赛](https:ost.51cto.composts13641)前言在一些应用中,需要通过时间设置提醒用户操作,如闹钟,象棋步数倒计时等。设计思路:将对时间的获取与响应的结果拆分开,时间的获取可以有倒计时与直接设计时间。响应结果可以是:震动,闪烁,通知栏,铃声。项目涵盖了IntetAgent,通知,以及JSFA调用PA等知识点,项目应用到了前面同事编写的计时器组件[夏日挑战赛HarmonyOS自定义组件...
2022-07-12 09:40:52 1.1w浏览 7点赞 6回复 2收藏
作者:张凯[本文正在参加星光计划3.0–夏日挑战赛](https:ost.51cto.composts13641)前言刚刚开始接触HarmonyOS,对于FA项目的开发还比较陌生,简单熟悉了一下ArkUI文档,了解了一些基本语法和自定义组件部分的内容,自己尝试编写一个比较实用的组件Stepper步进器,这个组件在项目中也算常见,这里尽量编写完善一点,努力适用大部分项目。组件描述组件支持:步长、最大值、最小值、标题、当前值、精度,功能支持:增大、减小、禁...
2022-07-11 09:52:57 8161浏览 12点赞 5回复 3收藏
作者:汤志威[本文正在参加星光计划3.0–夏日挑战赛](https:ost.51cto.composts13641)前言最近看到很多按钮加边流动效果,今天我们用HarmonyOS来实现一下。实现效果对自定义的按钮添加动态样式,实现动态效果,并且通过这种实现的思路还可以更改div的样式,来实现更多的按钮效果。实现原理在两个div中间画一个长一点并且矮一点的div并添加旋转和嵌入效果,而且最上面的div要比最下面的div要下一些,这样就能够看到中间旋转的div...
2022-06-24 09:39:38 1.0w浏览 8点赞 4回复 3收藏
作者:张悦[本文正在参加星光计划3.0–夏日挑战赛](https:ost.51cto.composts13641)前言前段时间项目中遇到了计时器的功能,项目中的计时器其实只是显示功能,数据全是由设备上报的。完成项目后,自己做了一个小的计时器组件,在这个过程中也发现了一些问题。效果展示组件直接传入以秒为单位的数据,最终显示如下效果:实现原理1.用setTimeout模拟setInterval的行为正常情况下,说到计时器首先想到的是使用setInterval,对比set...
2022-06-22 09:42:02 1.0w浏览 10点赞 2回复 3收藏
作者:李勇前言最近在学习OpenHarmony开发相关知识,而动画是使用比较多的一个属性并且学起来比较有意思,并且在前端这方面,使用动画能在效果展示时候给人眼前一亮的感觉。项目说明工具版本:DevEcoStudio3.0Beta3SDK版本;3.1.5.5主要用到知识:animation,keyframes官方API链接:[动画效果](https:developer.harmonyos.comcndocsdocumentationdocreferencesjscomponentscommonanimation0000000000611472)效果展示实现原理基...
2022-05-30 14:24:06 9542浏览 13点赞 1回复 2收藏
作者:杨尚晓前言之前在web中实现过该功能,想着直接搬过来修改一下,也能在OpenHarmony上跑起来。其实360度全景展示功能的用途还是挺多的,比如一些购物平台用于全面展示一件商品,这样可以更全面直观的了解这件商品;还有一些售楼平台,可以去展示一些全景户型等等。项目说明工具版本:DevEcoStudio3.0Beta2SDK版本:3.0.5.2(APIVersion7Beta2)主要组件:canvas效果展示实现原理基于canvas画布,通过绘制一个360°的序列帧...
2022-05-25 17:38:39 1.4w浏览 12点赞 6回复 9收藏
作者:王国菊前言日常开发中,经常会遇到一些图片查看的需求,此时有的用户习惯放大图片来看,那么在ets中如何实现呢?今日分享的组件由subsamplingscaleimageview+swiper来实现深度缩放视图、图像显示、手势平移缩放双击等。项目说明本组件界面搭建基于ArkUI中TS扩展的声明式开发范式,官网官方文档地址:[基于TS扩展的声明式开发范式1](https:developer.harmonyos.comcndocsdocumentationdocguidesuitsoverview00000011927057...
2022-05-23 14:31:33 1.6w浏览 12点赞 5回复 8收藏
[春节不停更,此文正在参加「星光计划春节更帖活动」](https:harmonyos.51cto.composts9923)作者:陈龙佳前言一直在学习关于鸿蒙官方文档,主要是学习基于JS扩展的类web开发范式,而随着开发文档的不断更新,SDK也更新到了8,随着TS的不断广泛应用,于是我就接触了基于TS扩展的类web开发范式,也就是ArkUI。本文主要是基于ArkUI实现的一个小项目,也可以说是一个demo,主要是通过ETS的语法完成一些关于界面相关的、简单的数据通信以...
2022-02-16 10:08:41 1.2w浏览 5点赞 1回复 2收藏
作者:王国菊[【本文正在参与51CTOHarmonyOS技术社区创作者激励计划星光计划2.0】](https:harmonyos.51cto.composts9422)前言在声明式UI编程范式中,UI是应用程序状态的函数,开发人员通过修改当前应用程序状态来更新相应的UI界面。开发框架提供了多种应用程序状态管理的能力。状态变量装饰器State:组件拥有的状态属性。每当State装饰的变量更改时,组件会重新渲染更新UI。Link:组件依赖于其父组件拥有的某些状态属性。每当任...
2021-12-27 11:07:44 1.5w浏览 2点赞 1回复 2收藏
作者:梁青松[【本文正在参与51CTOHarmonyOS技术社区创作者激励计划星光计划2.0】](https:harmonyos.51cto.composts9422)简介本来计划要做一个本地数据库存储相关的项目,但是官方的小伙伴给我说,ArkUI数据库目前不支持最新的模拟器。所以只能另想其他的,想了大概一周,期间也在调研技术能否实现,最终定了这个项目,真正的敲代码开发大概就用了一天,最难的就是想法和界面设计。不得不感慨新框架真的方便、真的好用!期待下...
2021-12-15 09:12:30 1.3w浏览 9点赞 2回复 8收藏
作者:梁青松[【本文正在参与51CTOHarmonyOS技术社区创作者激励计划星光计划2.0】](https:harmonyos.51cto.composts9422)简介前段时间一直研究ArkUI中的声明式开发,开发了一些demo,但都是界面相关的,相对来说比较基础,也比较简单。所以研究一下其他的,现在成熟的APP都会有网络交互,所以记录一篇网络请求相关的。本项目界面搭建基于ArkUI中TS扩展的声明式开发范式,关于语法和概念直接看官网官方文档地址:[基于TS扩展的声...
2021-12-01 11:09:12 1.8w浏览 10点赞 3回复 9收藏
作者:梁青松简介本项目界面搭建基于ArkUI中TS扩展的声明式开发范式,关于语法和概念直接看官网官方文档地址:[基于TS扩展的声明式开发范式1](https:developer.harmonyos.comcndocsdocumentationdocguidesuitsoverview0000001192705715)、[基于TS扩展的声明式开发范式2](https:developer.harmonyos.comcndocsdocumentationdocreferencestsframeworkdirectory0000001111581264)本文介绍列表刷新:下拉刷新上拉加载更多ArKUI系列文...
2021-11-29 10:11:52 2.2w浏览 11点赞 2回复 9收藏
作者:梁青松简介本项目基于ArkUI中TS扩展的声明式开发范式,关于语法和概念直接看官网官方文档地址:[基于TS扩展的声明式开发范式1](https:developer.harmonyos.comcndocsdocumentationdocguidesuitsoverview0000001192705715)、[基于TS扩展的声明式开发范式2](https:developer.harmonyos.comcndocsdocumentationdocreferencestsframeworkdirectory0000001111581264)本文介绍列表滑动删除:列表中只允许滑出其中一项如果有打开...
2021-11-25 14:14:46 1.9w浏览 9点赞 4回复 9收藏
作者:梁青松前言鸿蒙这次API7更新除了新增TS声明式开发之外,还有JS开发也增加了很多API,JS开发自定义组件越来越方便了。本项目基于ArkUI中JS扩展的类Web开发范式,关于语法和概念直接看官网官方文档地址:[基于JS扩展的类Web开发范式1](https:developer.harmonyos.comcndocsdocumentationdocguidesuijsoverview0000000000500376)[基于JS扩展的类Web开发范式2](https:developer.harmonyos.comcndocsdocumentationdocreference...
2021-11-23 10:05:15 1.8w浏览 13点赞 5回复 13收藏