0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

HarmonyOS基于 ArkUI 中 TS 扩展声明式开发范式

OpenHarmony技术社区 来源:HarmonyOS技术社区 作者:HarmonyOS技术社区 2022-01-04 14:19 次阅读

本来计划要做一个本地数据库存储相关的项目,但是官方的小伙伴给我说,ArkUI 数据库目前不支持最新模拟器,所以只能另想其他的。

想了大概一周,期间也在调研技术能否实现,最终定了这个项目,真正的敲代码开发大概就用了一天,最难的就是想法和界面设计。

不得不感慨新框架真的方便、真的好用!期待下个版本能完善组件和 API 的细节。也希望 HarmonyOS 越来越好。

界面搭建基于 ArkUI 中 TS 扩展的声明式开发范式,关于语法和概念直接看官网官方文档地址。

基于 TS 扩展的声明式开发范式 1:

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-ts-overview-0000001192705715
基于 TS 扩展的声明式开发范式 2:
https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-framework-directory-0000001111581264

项目说明

使用系统自带的网络请求框架,根据 Tab 的类型切换请求对应的数据。列表支持下拉刷新、上拉加载更多。

模拟登录效果,根据输入框来确定按钮是否启用,登录成功后,显示登录头像和用户信息

①数据请求:聚合免费 API-新闻头条

https://www.juhe.cn/docs/api/id/235
②网络请求:1-官方文档、2-ArkUI 开发基础:网络请求
https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-net-http-0000001168304341
https://developer.huawei.com/consumer/cn/forum/topic/0203723866728880326?fid=0101591351254000314
③列表刷新:ArkUI(TS)声明式开发:列表下拉刷新、上拉加载更多
https://developer.huawei.com/consumer/cn/forum/topic/0203729154661360497?fid=0101591351254000314

效果演示

在远程模拟器录制的,效果不佳:

功能解析

①首页

首页从上至下分为三个部分:

标题栏

Tab 标签

数据列表

标题栏:布局很简单,使用 Row 布局包裹:Image 和 Swiper(搜索框中文字上下切换)。

部分代码:

......
//标题栏
@BuilderCustomTitleBar(){
Row(){
//头像
Image(this.isLogin?$r('app.media.ic_ldd_headpic'):$r('app.media.ic_default_headpic'))
.width(30)
.height(30)
.borderRadius(15)
.margin({right:10})
.onClick(()=>{
this.openSideMenu()
})

//搜索框
Row(){
//搜索图标
Image($r('app.media.ic_search'))
.width(15).height(15)
.margin({left:10})

//视图上下切换
Swiper(){
ForEach(this.listSearch,item=>{
Text(item)
.height('100%')
.fontSize(12)
.fontColor('#505050')
.margin({left:10})
},item=>item)
}
.vertical(true)//方向:纵向
.autoPlay(true)//自动播放
.indicator(false)//隐藏指示器
.interval(3000)//切换间隔时间3秒
}
.layoutWeight(1)
.height('100%')
.backgroundColor('#F1F1F1')
.borderRadius(15)
}
.width('100%')
.height(50)
.backgroundColor(Color.White)
.padding({top:10,bottom:10,left:15,right:15})
}
......

Tab 标签:这个也比较简单,根据屏幕宽度、tab 标签的总数量,就能得出 tabItem 的宽度。

底部设置的指示器,点击 tab 根据 index(当前索引) * itemWithd(每个 tab 的宽度)设置属性动画,切换效果就可以了。

import{TabModel,getTabList}from'../../model/tabModel.ets';
importdisplayfrom'@ohos.display';
@Component
exportstructHomeTabs{
//Tab数据
privatelistTab=getTabList()
//tabItem平均宽度
@StatetabIndicatorWidth:number=152
//指示器
@StatetabIndex:number=0
//对外暴露的方法
privatetabClick:(item:TabModel)=>void

privateaboutToAppear(){
display.getDefaultDisplay((err,data)=>{
if(!err){
//获取tabItem平均宽度
this.tabIndicatorWidth=data.width/this.listTab.length
}
})
}

build(){
Column(){
Stack({alignContent:Alignment.Bottom}){
//tab内容
Row(){
ForEach(this.listTab,item=>{
Button(){
Text(item.name)
.fontSize(this.tabIndex==item.id?15:13)//根据当前选中改变字体大小
.fontColor(this.tabIndex==item.id?$r('app.color.app_theme'):'#000000')//根据当前选中改变字体颜色
}
.layoutWeight(1)
.height(35)
.type(ButtonType.Normal)
.backgroundColor(Color.White)
.onClick(()=>{
this.tabIndex=item.id//更新索引
this.tabClick(item)//提供给外部调用
})
},item=>item.tabType)
}.height(35)

//指示器
Row(){
Divider()
.width(`${this.tabIndicatorWidth}px`)//平均宽度
.strokeWidth(3)
.color($r('app.color.app_theme'))
.lineCap(LineCapStyle.Round)//圆角
.padding({left:10,right:10})
.offset({x:`${this.tabIndex*this.tabIndicatorWidth}px`,y:0})//改变偏移量
.animation({duration:300})//属性动画
}.width('100%')
}.backgroundColor(Color.White)
Divider().color('#e8e8e8')
}
}
}

数据列表:根据数据的不同,展示的 item 的布局样式也不同,分为两种情况:单张图片和多张图片,下拉刷新和加载更多功能看我之前的写的帖子。

部分代码:

......
List(){
ForEach(this.listNews,(item:NewsData)=>{
ListItem(){
Column(){
//根据数据,展示不同的布局样式
if(item.thumbnail_pic_s02==undefined){
//单张图片样式
this.ItemSinglePic(item)
}else{
//多张图片样式
this.ItemMorePic(item)
}
}.width('100%')
}.padding(10)
},item=>item.uniquekey)
}
.divider({strokeWidth:1,color:'#f5f5f5'})
......

②侧边栏

侧边栏没有加入手势控制,只是简单的点击头像动画打开、点击阴影部分动画关闭,默认关闭状态。

从以下代码看下,只需要设置值,设置属性动画之后,侧边栏动画效果就出来了,也是很方便的。

@Entry
@Component
structMainPage{
//屏幕宽度
privatescreenWidth=0
//侧边栏的x位置
@StatesideBarX:number=-2000
//侧边栏背景的透明度
@StatesideBarBgopacity:number=0
//侧边栏背景显示值
@StatesideBarBgVisibility:Visibility=Visibility.Hidden

privateaboutToAppear(){
display.getDefaultDisplay((err,data)=>{
if(!err){
//获取屏幕宽度
this.screenWidth=data.width
//设置侧边栏偏移量:负屏幕宽度
this.sideBarX=-this.screenWidth
}
})
}

//打开侧边栏
privateopenSideMenu(){
this.sideBarX=0
this.sideBarBgopacity=1
this.sideBarBgVisibility=Visibility.Visible
}

//关闭侧边栏
privatecloseSideMenu(){
this.sideBarX=-this.screenWidth
this.sideBarBgopacity=0
}

build(){
Stack(){
Column(){
//主页界面
}

//半透明背景
Stack()
.width('100%')
.height('100%')
.backgroundColor('#80000000')
.opacity(this.sideBarBgopacity)
.animation({//属性动画,当透明度为0,隐藏背景
duration:300,
onFinish:()=>{
if(this.sideBarBgopacity==0){
this.sideBarBgVisibility=Visibility.Hidden
}
}
})
.visibility(this.sideBarBgVisibility)

//侧边栏
Row(){
Column(){
SideMenu({isLogin:$isLogin,closeMenu:()=>{
this.closeSideMenu()//侧边栏布局
}})
}
.width('70%')
.height('100%')
.backgroundColor(Color.White)

Blank().onClick(()=>{
this.closeSideMenu()
})
}
.width('100%')
.height('100%')
.position({x:`${this.sideBarX}px`,y:0})//动态改变位置
.animation({duration:300})//属性动画
}
.width('100%')
.height('100%')
}
}

③登录

登录也比较简单,只不过目前官网没有输入框的文档资料,这个输入框还是我从Codelabs:流式布局(eTS)上面看到的。根据输入框是否有内容判断按钮的启用状态。

虽然粘贴到编辑器中代码提示有错,但是可以正常运行和预览。密码框的类型还是我猜的!哈哈,就猜对了。

e99f038e-630c-11ec-b2e9-dac502259ad0.png

④保存登录状态

根据官网资料:轻量级存储、官网示例还是有问题。

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-data-storage-0000001117163542

我是问了华为的小伙伴,他给我说这个路径需要在 /data/data/,但是目前模拟器对这块功能还兼容的不完善,不能持久化,如果把程序后台杀死,数据就没了。

importdataStoragefrom'@ohos.data.storage';
//设置存储的路径,路径必须在/data/data/下
constSTORAGE_PATH='/data/data/info'

exportclassInfoStorage{
//保存用户ID
setUserId(userId:string){
letstore=dataStorage.getStorageSync(STORAGE_PATH)
store.putSync('userId',userId)
}

//获取用户ID
getUserId(){
letstore=dataStorage.getStorageSync(STORAGE_PATH)
returnstore.getSync('userId','').toString()
}

}

项目地址如下(需要登录才能看到演示图):

https://gitee.com/liangdidi/NewsDemo.git

作者:梁青松

原文标题:HarmonyOS版“新闻头条”APP开发实战

文章出处:【微信公众号:HarmonyOS技术社区】欢迎添加关注!文章转载请注明出处。

审核编辑:彭菁

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 数据库
    +关注

    关注

    7

    文章

    3761

    浏览量

    64272
  • 代码
    +关注

    关注

    30

    文章

    4742

    浏览量

    68336
  • HarmonyOS
    +关注

    关注

    79

    文章

    1967

    浏览量

    30006

原文标题:HarmonyOS版“新闻头条”APP开发实战

文章出处:【微信号:gh_834c4b3d87fe,微信公众号:OpenHarmony技术社区】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    HarmonyOS开发ArkUI案例:【常用布局容器对齐方式】

    基于ArkTS扩展声明开发范式,实现Flex、Column、Row和Stack四种常用布局容器对齐方式。
    的头像 发表于 05-08 16:47 1520次阅读
    <b class='flag-5'>HarmonyOS</b><b class='flag-5'>开发</b><b class='flag-5'>ArkUI</b>案例:【常用布局容器对齐方式】

    HarmonyOS应用开发-关于TS语言的整体理解

    基于TS扩展声明开发范式的方舟开发框架是为
    发表于 11-30 11:03

    HarmonyOS应用开发-ArkUI声明UI工程体验与分享

    2.组件和装饰器@Component在自定义组件之前,需要先了解什么是组件和装饰器,并进行初始化组件。然后通过修改组件属性和构造参数,实现一个自定义组件。在声明UI,所有的页面都是由组件构成。组件
    发表于 12-08 10:22

    课程预告丨12月15日官方直播带你领略ArkUI声明开发范式之美

    HarmonyOS系列课程的第五期“Hello Codelabs:分布新闻客户端实战(eTS)”线上直播来啦!华为软件开发工程师Jacky将带你领略ArkUI
    发表于 12-10 17:52

    HarmonyOS快速入门资料分享

    Studio官方安装指导地址2.文档预览相关组件指导openharmony基于TS扩展声明开发范式
    发表于 03-11 17:16

    Hello HarmonyOS学习笔记:分布新闻客户端实战(JS、eTS)

    开发框架(ArkUI),其中JAVA UI框架是基于Java拓展的命令开发,方舟开发框架是基于JS拓展的类Web
    发表于 06-23 20:08

    HDD杭州站•ArkUI开发更灵活

    应用UI开发时所必须的能力,帮助提升HarmonyOS应用界面开发效率。随着HarmonyOS的版本更新迭代,ArkUI的能力也在不断
    发表于 08-05 11:33

    4天带你上手HarmonyOS ArkUI开发

    本次HarmonyOS ArkUI入门训练营课程--健康生活实战篇,手把手教大家如何制作一个合理膳食的APP前端Demo!课程实战样例通过ArkUI声明
    发表于 09-09 14:44

    4天带你上手HarmonyOS ArkUI开发——《HarmonyOS ArkUI入门训练营之健康生活实战》

    框架实现。ArkUI采用极简的声明UI描述界面语法,只需用几行简单直观的声明代码,即可完成界面功能,内置了丰富而精美
    发表于 01-05 11:49

    HarmonyOS/OpenHarmony应用开发-ArkTS的声明开发范式

    语法的解析能力、跨语言调用支持的能力和TS语言高性能运行环境。声明UI后端引擎****后端引擎提供了兼容不同开发范式的UI渲染管线,提供多
    发表于 01-17 15:09

    HarmonyOS/OpenHarmony应用开发-声明开发范式组件汇总

    组件是构建页面的核心,每个组件通过对数据和方法的简单封装,实现独立的可视、可交互功能单元。组件之间相互独立,随取随用,也可以在需求相同的地方重复使用。声明开发范式目前可供选择的组件如
    发表于 01-19 11:14

    OpenHarmony应用开发-ArkUI方舟开发框架简析

    声明UI语法扩展而来的ArkTS语言,从组件、动画和状态管理三个维度提供UI绘制能力。 类Web开发范式:采用经典的HML、CSS、Jav
    发表于 04-23 09:35

    HarmonyOS优选主力应用开发语言-ArkTS概述

    之前,建议开发者具备TS语言开发能力。 当前,ArkTS在TS的基础上主要扩展了如下能力: 基本语法:ArkTS定义了
    发表于 06-09 10:52

    如何在鸿蒙上实现聊天列表滑动删除功能

       本项目基于 ArkUI TS 扩展声明开发
    的头像 发表于 12-03 10:55 3076次阅读

    ETS是否适合金融界面的开发

    HarmonyOS 在去年年底已经更新了 API7,最大的更新就是基于 TS 扩展声明开发
    的头像 发表于 04-21 07:48 1249次阅读