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

本来计划要做一个本地数据库存储相关的项目，但是官方的小伙伴给我说，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-0000001168304341https://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';@ComponentexportstructHomeTabs{//Tab数据privatelistTab=getTabList()//tabItem平均宽度@StatetabIndicatorWidth:number=152//指示器@StatetabIndex:number=0//对外暴露的方法privatetabClick:(item:TabModel)=>voidprivateaboutToAppear(){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@ComponentstructMainPage{//屏幕宽度privatescreenWidth=0//侧边栏的x位置@StatesideBarX:number=-2000//侧边栏背景的透明度@StatesideBarBgopacity:number=0//侧边栏背景显示值@StatesideBarBgVisibility:Visibility=Visibility.HiddenprivateaboutToAppear(){display.getDefaultDisplay((err,data)=>{if(!err){//获取屏幕宽度this.screenWidth=data.width//设置侧边栏偏移量：负屏幕宽度this.sideBarX=-this.screenWidth}})}//打开侧边栏privateopenSideMenu(){this.sideBarX=0this.sideBarBgopacity=1this.sideBarBgVisibility=Visibility.Visible}//关闭侧边栏privatecloseSideMenu(){this.sideBarX=-this.screenWidththis.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）上面看到的。根据输入框是否有内容判断按钮的启用状态。

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

④保存登录状态

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

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{//保存用户IDsetUserId(userId:string){letstore=dataStorage.getStorageSync(STORAGE_PATH)store.putSync('userId',userId)}//获取用户IDgetUserId(){letstore=dataStorage.getStorageSync(STORAGE_PATH)returnstore.getSync('userId','').toString()}}

项目地址如下（需要登录才能看到演示图）：

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

作者：梁青松

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

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

审核编辑：彭菁

数据库范式声明计划

免责声明：本网信息来自于互联网，目的在于传递更多信息，并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益，请及时联系我们，本站将会在24小时内处理完毕。