HarmonyOS学习第四、五周（实践篇）（逻辑部分）

本文内容是承接前一篇文章，请大家结合观看。

欢迎页的逻辑较为简单，主要就是弹窗点击后的进入主页或跳出APP的功能，上篇中以及基本上完成了讲述。所以此篇着重讲记录页与详情页的逻辑。

日期选择后保存

在我们选择好日期后，需要将这个日期进行存储，因为我们在存储的时候每日饮食时需要用到这个时间，所以我们需要将这个日期进行全局存储，方便我们后续的存取使用。

Button('确定')
          .width(120)
          .backgroundColor($r('app.color.primary_color'))
          .onClick(() => {
            // 1.保存日期到全局存储（转成毫秒值，方便后期监控）
            AppStorage.SetOrCreate('selectedDate', this.selectedDate.getTime())
            // 2.关闭窗口
            this.controller.close()
          })

点击确定后，触发点击事件，调用AppStorage，AppStorage是应用全局的UI状态存储，是和应用的进程绑定的，由UI框架在应用程序启动时创建，为应用程序UI状态属性提供中央存储。

由编译器的提示我们可以看到，setorcreate应该传入一个键值对形式，前面为名字，后面是值，传入后会进行set修改或者create创建操作，如果传入的propname存在的话，他就会修改值，若不存在，则会创建一个实例。

页面跳转

页面跳转在本案例中有着大量的运用

在欢迎页，主页，详情页中，我们都会涉及到点击跳转的一个逻辑运用。需要使用到路由router的使用，详见第二周的文章。

.onClick(()=>{
              router.pushUrl({
                url:'pages/ItemIndex',
                params:{type:group.type}
              })
            })

用router.pushUrl便可以实现页面的跳转。

详情页数量控制逻辑

为了避免出现输入时出现2.或2.3.4或其他不正确的输入形式，我们需要一些逻辑来进行判断。

首先先定义两个变量amount（number）和value（string），amount用来存储最后我们要展示的值，value用来拼接用户的输入，为什么要用string类型呢。这是因为我们点击2然后点击3，键盘给我们传过来的数字是2然后3，我们需要的效果是23，如果用number类型，拼接将会很麻烦，而且后续还会有小数点，增加的拼接难度，因此选用string类型便可轻松解决这些问题。

数值点击逻辑

clickNumber(num:string){
    let val = this.value+num
    let firstIndex = val.indexOf('.')
    let lastIndex = val.lastIndexOf('.')
    if(firstIndex!==lastIndex||(lastIndex!=-1 && lastIndex<val.length-2)){
      return
    }
    let amount = this.parseFloat(val)
    if(amount>=999.9){
      this.amount=999.0
      this.value='999'
    }else{
      this.amount=amount
      this.value=val
    }
  }

首先将输入的数字或者小数点进行拼接，然后利用indexof和lastindexof，分别从前和从后开始查询读到的小数点在字符串的哪个角标下，若角标不相同，说明至少有两个小数点，不符合规范，直接返回，不进行赋值。若角标小于字符串长度减二，则说明小数点后有两位或以上，不太符合常识（因为我们一般不说0.05块面包或者紫薯这样子的），因此也去除。反之通过parseFloat转换为float型然后赋值给amount。再判断amount是否过大，过大则赋值为设定的最大值。

删除逻辑

clickDelete(){
    if(this.value.length<=0){
      this.value=''
      this.amount=0
      return
    }
    this.value=this.value.substring(0,this.value.length-1)
    this.amount=this.parseFloat(this.value)
  }

删除逻辑就很简单了，先判断是否小于等于0，若不小于则进行删除，删除后进行赋值即可。

多端部署逻辑

先对不同大小的屏幕进行定义

监听屏幕属性并回调

import mediaQuery from '@ohos.mediaquery'
import BreakpointConstants from '../constants/BreakpointConstants'

export default class BreakpointSystem{

  private smListener: mediaQuery.MediaQueryListener = mediaQuery.matchMediaSync(BreakpointConstants.RANGE_SM)
  private mdListener: mediaQuery.MediaQueryListener = mediaQuery.matchMediaSync(BreakpointConstants.RANGE_MD)
  private lgListener: mediaQuery.MediaQueryListener = mediaQuery.matchMediaSync(BreakpointConstants.RANGE_LG)

  smListenerCallback(result: mediaQuery.MediaQueryResult){
    if(result.matches){
      this.updateCurrentBreakpoint(BreakpointConstants.BREAKPOINT_SM)
    }
  }

  mdListenerCallback(result: mediaQuery.MediaQueryResult){
    if(result.matches){
      this.updateCurrentBreakpoint(BreakpointConstants.BREAKPOINT_MD)
    }
  }

  lgListenerCallback(result: mediaQuery.MediaQueryResult){
    if(result.matches){
      this.updateCurrentBreakpoint(BreakpointConstants.BREAKPOINT_LG)
    }
  }

  updateCurrentBreakpoint(breakpoint: string){
    AppStorage.SetOrCreate(BreakpointConstants.CURRENT_BREAKPOINT, breakpoint)
  }

  register(){
    this.smListener.on('change', this.smListenerCallback.bind(this))
    this.mdListener.on('change', this.mdListenerCallback.bind(this))
    this.lgListener.on('change', this.lgListenerCallback.bind(this))
  }

  unregister(){
    this.smListener.off('change', this.smListenerCallback.bind(this))
    this.mdListener.off('change', this.mdListenerCallback.bind(this))
    this.lgListener.off('change', this.lgListenerCallback.bind(this))
  }
}

监听屏幕需要用到媒体查询，

媒体查询作为响应式设计的核心，在移动设备上应用十分广泛。媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。媒体查询常用于下面两种场景：

1. 针对设备和应用的属性信息（比如显示区域、深浅色、分辨率），设计出相匹配的布局。
2. 当屏幕发生动态改变时（比如分屏、横竖屏切换），同步更新应用的页面布局

每当我们监听到屏幕大小变化时，就会存储到AppStorage中，不过想要启用监听，需要先进行注册。

  private breakpointSystem:BreakpointSystem =new BreakpointSystem()

 我们可以选择在主页，也就是index页中进行初始化，然后在生命周期钩子中进行注册：

aboutToAppear(){
    this.breakpointSystem.register()
  }

  aboutToDisappear(){
    this.breakpointSystem.unregister()
  }

当屏幕状态发生变化时进行获取

  @StorageProp('currentBreakpoint') currentBreakpoint:string = BreakpointConstants.BREAKPOINT_SM

因为我们只需要获取，而不需要更改AppStorage中的屏幕信息，所以我们用StorageProp即可不需要用StorageLink。

在完成上述注册监听后，我们就可以对不同设备进行个性化的变更，如：

chooseBarPosition(){
    return new BreakpointType({
      sm:BarPosition.End,
      md:BarPosition.Start,
      lg:BarPosition.Start
    }).getValue(this.currentBreakpoint)
  }

Tabs({barPosition:this.chooseBarPosition()})

.vertical(new BreakpointType({
      sm: false,
      md: true,
      lg:true
    }).getValue(this.currentBreakpoint))

 这样就可以动态修改tabbar的位置，当是小屏幕时在下方，中屏幕大屏幕时在左侧。barposition和vertical和搭配使用详见官方文档。

完整项目见：HealthyApp · GaR./HarmonyOS - 码云 - 开源中国 (gitee.com)