一、介绍
基于鸿蒙Next模拟一个排行帮单 二、场景需求
1.目标用户
社交平台用户,尤其是热衷于获取和分享信息的年轻人和用户群体。
- 功能描述
用户可以通过“排行帮单”功能查看某个主题或领域的热门内容,并能够向朋友或群体推荐特定的项目。
- 需求功能模块
主题选择:用户可以选择不同的主题(如“电影”、“音乐”、“书籍”等)。
排行榜展示:
显示每个主题下的排行榜(如TOP 10电影、TOP 5推荐书籍)。
- 互动设计
点赞和评论:用户可以对排行榜中的项目进行点赞或评论。
投票机制:用户可以参与投票,影响排行榜的排名。
- 潜在价值
提升用户的参与感和互动性。
增强社交平台的内容活跃度,提高用户留存率。
帮助用户快速获取他人推荐的热门内容,减少选择困难。
三、业务步骤
第一步:在页面初始化的时候获取云数据库数据
第二部:将获取的数据展示到页面 四、效果展示
![#HarmonyOS NEXT 体验官#调用云数据库更新排行榜单-鸿蒙开发者社区 #HarmonyOS NEXT 体验官#调用云数据库更新排行榜单-鸿蒙开发者社区](//file1.elecfans.com/web2/M00/06/03/wKgaombWwmKAM68eAAQr6x9KeVc037.jpg) 五:代码展示:
import { promptAction, router } from '@kit.ArkUI';
import cloud from '@hw-agconnect/cloud';
import { PointsList } from '../PointsList';
import schema from '../idiom-schema.json';
import { Logger } from '@hw-agconnect/hmcore';
import { TAG } from '@ohos/hypium/src/main/Constant';
import { CommonConstants, FooterTabType } from '../common/CommonConstants';
import { HomePage } from '../pages/HomePage'
import { IdiomPage } from '../pages/IdiomPage'
import { PointsListPage } from '../pages/PointsListPage'
import { MinePage } from '../pages/MinePage'
AppStorage.setOrCreate('isLogin', true)
AppStorage.setOrCreate('Phone', 'admin')
AppStorage.setOrCreate('Password', '123456')
@Entry
@Component
struct Index {
@State currentIndex: number = 0;
@State fontColor: string = '#182431'
@State selectedFontColor: string = '#007DFF'
private controller: TabsController = new TabsController()
@Provide pointsList: PointsList[] = []
@Builder
tabBuilder(tabList: FooterTabType[], index: number) {
Column() {
Image(this.currentIndex === index ? tabList[index].icon_select : tabList[index].icon_normal)
.width(28)
.height(28)
.objectFit(ImageFit.Contain)
Text(tabList[index].title)
.fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
.fontSize(12)
.fontWeight(500)
.lineHeight(20)
}.width('100%')
}
async pointsListQuery() {
try {
let resultData:PointsList[] = await cloud.database({ objectTypeInfo: schema, zoneName: "idiomData" })
.collection(PointsList).query().get();
this.pointsList = resultData.sort((a,b)=> b.UserPoints - a.UserPoints)
Logger.info(TAG, "query success : " + JSON.stringify(this.pointsList));
} catch (err) {
Logger.error(TAG, "query err------------" + JSON.stringify(err));
}
}
onPageShow(): void {
if (router.getParams() as number != null && router.getParams() as number != undefined) {
this.currentIndex = router.getParams() as number
} else {
this.currentIndex = 0
}
this.isSilentLogin()
this.pointsListQuery()
}
isSilentLogin() {
cloud.auth().getCurrentUser().then(user => {
if (user) {
AppStorage.set('isLogin', false)
return
}
AppStorage.set('isLogin', true)
});
}
build() {
Stack() {
Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
TabContent() {
Column() {
HomePage()
}.height('100%')
.width('100%')
.backgroundColor(0xeeeeee)
}.tabBar(this.tabBuilder(CommonConstants.FOOTER_TAB_TITLE, 0))
TabContent() {
Column() {
IdiomPage()
}.height('100%')
.width('100%')
.backgroundColor(0xeeeeee)
}.tabBar(this.tabBuilder(CommonConstants.FOOTER_TAB_TITLE, 1))
TabContent() {
Column() {
PointsListPage()
}.height('100%')
.width('100%')
.backgroundColor(0xeeeeee)
}.tabBar(this.tabBuilder(CommonConstants.FOOTER_TAB_TITLE, 2))
TabContent() {
Column() {
MinePage()
}.height('100%')
.width('100%')
.backgroundColor(0xeeeeee)
}.tabBar(this.tabBuilder(CommonConstants.FOOTER_TAB_TITLE, 3))
}
.scrollable(false)
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
.height("100%")
.width("100%")
.onChange((idx: number) => {
this.currentIndex = idx
})
}
.height('100%')
.width('100%')
}
}
PointsListPage .ets
import { PointsList } from '../PointsList'
@Component
export struct PointsListPage {
@Consume pointsList:PointsList[]
build() {
Column(){
Scroll(){
Column(){
Row(){
Text('用户').fontSize(18).fontWeight(600)
Text('分数').fontSize(18).fontWeight(600)
Text('排名').fontSize(18).fontWeight(600)
}.width('90%')
.height(50)
.justifyContent(FlexAlign.SpaceAround)
ForEach(this.pointsList,(item:PointsList,idx:number)=>{
Row(){
Text(item.UserName).fontSize(16)
Text(""+item.UserPoints).fontSize(16)
Text(idx.toString()).fontSize(16)
}.width('90%')
.height(30)
.justifyContent(FlexAlign.SpaceAround)
},(item:string)=>item)
}
.backgroundColor(0xFFFFFF)
.borderRadius(8)
.width("90%")
.height("94%")
}
}.width("100%")
.height("100%")
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
.backgroundImage($r('app.media.idiomBackground'))
.backgroundImageSize(ImageSize.Cover)
}
}
六、代码结构及原理:
这两端段代码展示了如何使用ArkTS和ArkUI框架创建一个交互式的ui页面。它利用了声明式UI、响应式编程和组件化的概念,创建自定组件,更加便捷的组合。
|