鸿蒙开发者社区

背景项目中Tabs的使用可以说是特别的频繁，但是官方提供的Tabs使用起来，存在tab选项卡切换动画滞后的问题。0900086000300134184.20201216095126.86523331460016843504112994983392.png​原始动画无法满足产品的UI需求，因此，这篇文章将实现下面页面滑动，tab选项卡实时滑动的动画效果。0900086000300134184.20201216095126.86523331460016843504112994983392.png​实现逻辑需求讲解需要实现固定宽度下，放下6个选项卡。在没有...

背景由于原生的时间选择器（DatePicker）不能满足UI的设计要求，比如：会自带分割线；无法调节各选择项高度等限制，虽然也无法理解TextPicker已有的属性，DatePicker上竟然没有。因此，想着使用三个TextPicker组合成一个时间选择器，后期还可以做更多的设置，可以只选择月份和日期等。实现效果0900086000300134184.20201216095126.86523331460016843504112994983392.png​实现思路封装时间滑动组件，实现月份变化时，结合年份动...

背景封装一个选择图片和调用拍照相机的按钮，展示api13下选择图片和调用相机，可以使用不申请用户权限的方式，进行图片的选择和修改。但是，目前方案并未包含上传图片保存的功能，仅提供图片选择或者拍照后，图片展示的一种方案。项目架构Common：公共操作类存放文件夹PromptActionClass：全局弹窗操作类components：公共弹窗组件文件夹SelectImageDialog：选择图片弹窗组件pagesIndex：入口界面重要方法解析调用相机拍照添加ca...

背景在实现单机应用时，用户所有的操作数据都需要保存在本地。官方提供了关系型数据库基于SQLite组件，适用于包含复杂关系数据的场景。并且提供了大量的增删改查方法，不过在使用过程中还是会出现比较多的硬编码和不方便操作的情况，比如：创建数据表：需要手写SQL语句添加数据时，需要手写类型名称和数值查询数据获取比较麻烦因此，在kit.ArkData的基础上进行使用的封装，方便我们在调用关系型数据库进行增删改查。DBHelper架...

概述现阶段状态管理V2版本还在试用阶段，但是切实解决了很多在项目中使用V1导致的痛点问题，比如：同一数据被多视图代理时，无法同步数据修改。无法做到深度观测和深度监听。更新对象中某个数据时，会导致整个对象属性都刷新，导致程序运行缓慢。状态管理V2版装饰器总览ObservedV2：装饰class，使得装饰的class具有深度监听的能力。Trace：只能在ObservedV2装饰的class中使用，被装饰的属性具有深度观测的能力。ComponentV2：装...

背景在实际项目中，为了软件使用整体色调看起来统一，一般顶部和底部的颜色需要铺满整个手机屏幕。因此，这篇帖子是介绍设置的方法，也是应用沉浸式效果。如下图：底部的绿色延伸到上面的状态栏和下面的导航栏UI在鸿蒙应用中，全屏UI元素分为状态栏、应用界面和导航栏。一般实现应用沉浸式效果由两种方式：窗口全屏布局方案：调整布局系统为全屏布局，界面元素延伸到状态栏和导航条区域实现沉浸式效果。组件延伸方案：组件布局...

路由拦截器可以对指定或全局路由跳转时添加拦截器，作用是可以实现在页面切换前做判断是否有进入当前页面的权限。这篇文章将实现登录的全局路由拦截样式。新建拦截器类通过继承IHMInterceptor接口实现生命周期接口的方法重写。通过添加HMInterceptor装饰器，来定义拦截器类的名称，然后在页面中使用IHMInterceptor接口包含一个handle方法，接口拦截时，会执行当前方法。javascriptexportinterfaceIHMInterceptor{handle(info:HM...

生命周期（Lifecycle）使用HMRouter的页面跳转时，想实现和Navigation一样的生命周期时，需要通过新建生命周期类来实现对页面对某一个生命周期的监控。新建Lifecycle类通过继承IHMLifecycle接口实现生命周期接口的方法重写。通过添加HMLifecycle装饰器，来定义生命周期类的名称，然后在页面中使用IHMLifecyclejavascriptexportinterfaceIHMLifecycle{onPrepare(ctx:HMLifecycleContext):void;onAppear(ctx:HMLifecycleContext):...

路由跳转HMRouter中使用HMRouterMgr的静态方法push()和replace()来实现路由跳转。使用pop()方法来实现页面返回push：目标页面不会替换当前页，而是插入页面栈。可以使用pop实现页面的返回操作。replace：目标页面会替换当前页，并销毁当前页。这样可以释放当前页的资源，并且无法返回到当前页。pop：返回页面栈的上一个页面，skipedLayerNumber页面返回的层级数量，默认为0，表示返回上一级，1表示跳过一级页面返回javascriptst...

背景在项目中使用官方推荐的Navigation时，需要在所有的页面上都添加一层NavDestination，在代码阅读上会增加多个层级，而且还要在主页面设置对应名字的跳转等问题，配置起来比较繁琐。看到大佬开发的HMRouter使用起来方便简洁，因此，写下这篇文章记录HMRouter的使用。插件配置1.HMRouter安装在终端中运行下面命令进行第三方库的安装。javascriptohpminstallhadsshmrouter2.添加路由编译插件修改项目的hvigorhvigorconfig.json...

背景在项目中经常会使用要时间的格式转换，比如数据库返回一个Date数据，你需要转成2024102的格式，鸿蒙的原生SDK中是没有办法实现的，因此，在这里介绍第三方封装好并且成熟使用的库Dayjs。安装切换到Entry文件夹下安装dayjs库。javascriptcd.\entry\ohpminstalldayjs查看ohpackage.json5文件，可以查看是否安装成功dayjs使用格式化基本格式化使用javascriptlettime:DatenewDate();this.messagedayjs(time).format();默认是ISO...

背景在项目中，避免不了需要调用系统资源和系统能力，比如：日历读写、摄像头等。因此，需要了解对系统资源访问权限的申请方式方法。授权方式包括两种授权方式，分别是systemgrant(系统授权)和usergrant(用户授权)。systemgrant(系统授权)仅需要在module.json5文件中，标注需要的权限，应用打开时，系统会自动赋予需要的权限。usergrant(用户授权)需要在项目中向系统发送申请，然后由用户决定是否给应用提供需要的权限。应用的...

背景书接上回，实现了云侧和端侧的云数据库创建、更新、修改等操作。这篇文章实现调用云函数对云数据库进行增删改查。CloudProgram项目配置新建函数在cloudfunctions目录下点击右键，选择新建CloudFunction，输入querystudentfunction导入SDK在终端中切换到当前云函数的目录下安装SDKjavascriptnpminstallsavehwagconnectcloudserver导入云数据库类型选择云数据库需要导出的json文件，右键选择GenerateServerModel选择存放的目...

背景华为云服务提供了云数据库的云服务，支持用户快速定义数据库表和管理数据库，并且提供了免费使用的额度。可以使用端云一体化模板实现端侧通过SDK修改数据库等操作，这样子方便中小企业或者项目快速的开发工作。云数据库是一款基于对象模型的数据库，采用存储区、对象类型和对象三级结构。存储区（CloudDBZone）是一个独立的数据存储区域，可以理解为关系型数据库中数据库文件的概念。不同的点是可以通过新建存储区来区分数...

背景华为云服务提供了统一认证的云服务，支持手机、邮箱等自定义登录服务，并且提供了免费使用的额度，这样子方便中小企业或者项目快速的开发工作。下面是支持的认证方式：操作步骤1.AGC(AppGalleryConnect)创建项目在AGC界面创建自己的云服务项目（详细可看上篇文章[【HarmonyOS】端云一体化初始化项目](https:developer.huawei.comconsumercnforumtopic0212159191168776257fid0101271690375130218)），并开通认证服务，如下图...

简介端云一体化开发是HarmonyOS对云端开发的支持、实现端云联动。云开发服务提供了云函数、云数据库、云存储等服务，可以使开发者专注于应用的业务逻辑开发，无需关注基础设施，例如：服务器、操作系统等问题。因此，在开发过程中，开发人员无需重新学习后端开发语言，可以通过对云函数的访问来读写云数据库和云存储。访问路径如下图：云端收费明细官方提供了云函数、云数据库、云存储的免费配额，如果访问需求大时，可以升级为...

背景原生UI没有提供日历相关的组件，于是手撸了详细页面的日程。一开始打算使用list加tab的方式来实现切换的效果，但是list的切换是没有办法确定当前展示的索引的，所以没有办法实现日历内容动态添加等效果。在业内大佬的指导下，使用了两个swiper组件分别实现周和日的切换，实现了想要的效果，如下：代码DayViewPagetypescript周天数import{DateUtil}from'..UtilsDateUtil';constWEEKDAYNUMBER7;EntryComponentstructDayViewPa...

简介实现一个矩形块上下拖动，并且可以拖动边缘定位点改变矩形块高度。实现效果如下：代码typescriptEntryComponentstructRecPage{StatepenOffsetY:number0;StateoffsetX:number0StateoffsetY:number0StatepositionX:number0StatepositionY:number0StaterectHeight:number50;StateoriginHeight:number50;build(){Column(){Text('PanGestureoffset:\nX:'+this.offsetX+'\n'+'Y:'+this.offsetY).margin({bottom:20})Text('penOffs...

沙箱目录的理解访问和管理应用文件，对于每个应用，系统会在内部存储空间映射出一个专属的应用沙箱目录，是应用文件目录与一部分系统文件所在的目录组成的集合。也就是应用可见的目录范围即为“应用沙箱目录”。优点：隔离性：应用沙箱提供了一个完全隔离的环境，使用户可以安全地访问应用文件。安全性：应用沙箱限制了应用可见地数据地最小范围，保护了应用文件地安全。文件操作接口新建并读写一个文件typescriptimport{common...

简介实现某一天24小时的时间长度和当天事件的页面。实现如下的效果：代码代码架构ListPage：主界面NumberUtil：数字辅助类DateEvenModel：日程实体类ListPageViewModel：界面交互类ListPagetypescriptimport{DateEvenModel}from'..ModelsDateEvenModel';import{ListPageViewModel}from'..ViewModelsListPageViewModel';EntryComponentstructListPage{StateVM:ListPageViewModelnewListPageViewModel();aboutToAppear():void{thi...