鸿蒙开发者社区

上一篇都是对首页的介绍和展示，接下来介绍记步详情页面。详情页面首页的核心是使用位置服务LocationKit和AbilityKit、SensorServiceKit、LocalizationKit。AbilityKitrequestPermissions():void{letatManagerabilityAccessCtrl.createAtManager();try{atManager.requestPermissionsFromUser(this.context,CommonConstants.REQUESTPERMISSIONS).then((data){if(data.authResults[0]!0data.authResults[1]!0){return;}constthatt...

接上一篇文章，本文将继续补充剩余部分。首页源码已经贴过，下面介绍其他组件的封装。TargetInformation展示一言内容的组件，源码如下。Copyright(c)2023HuaweiDeviceCo.,Ltd.LicensedundertheApacheLicense,Version2.0(the"License");youmaynotusethisfileexceptincompliancewiththeLicense.YoumayobtainacopyoftheLicenseathttp:www.apache.orglicensesLICENSE2.0Unlessrequiredbyapplicablelaworagreedtoinwriting,softwared...

首先介绍一下要开发的app整体内容。随行记步首页顶部调用一言的接口，随机输出几句话，app封装了一个公共接口方法，方便接口的调用。中间是一个类似代办事项的todo列表。可以通过增删改的方式进行变更。底部是一个添加目标按钮。整体如图所示。点击其中某一项，进入记步详情页。顶部是一个环形进度条，可以单独设置目标步数。底部是当前步行的数据，起始位置和当前位置。下方是一个开始、暂停的按钮。效果如图所示。DB数据库在...

接上一篇文章，首页完成后，接着是文章的详情页和分类的相册页面。文章详情页相对简单，先介绍一下文章详情。文章详情首页瀑布流的布局代码如下WaterFlow({footer:():voidthis.itemFoot()}){ForEach(this.ArrData,(item:ESObject){FlowItem(){FlowItemComponent({item:item}).clickEffect({level:ClickEffectLevel.MIDDLE,scale:0.8}).onClick((){router.pushUrl({url:'pagesArtDetail',params:{id:item.id''}})})}},(item:Prod...

上一篇文章构建了一个登录页面，包含基本的登录流程。点击登录之后成功登录进入到首页中。创建tabbar切换页面在开发首页之前，需要先规划一下app底部的tab栏，本次开发只涉及两个tab，分别是首页和我的页面。在pages目录下创建MainPage页面，UI结构代码如下。build(){Tabs({barPosition:BarPosition.End,controller:this.tabsController}){TabContent(){Home()}.padding({left:$r('app.float.mainPagepadding'),right:$r('app.f...

登录页面设计一个简单的登录页面，包含logo、文字名称、手机输入框、验证码输入框、发送验证码按钮、登录按钮。这是一个页面包含的元素。要实现的效果如图片所示。以下是UI层的布局。可以看到app.media还有app.float等变量，这些是定义在float.json文件的公共变量。可以写死也可以使用变量来进行定义使用。如下在第一个Image和第一个Text组件没有使用变量定义属性，可以作为参考使用。$r('app.media.huihua')为图片的路径，这里...