黑马健康-一次开发，多段部署

 一.技术：媒体查询：

注：本人在创作过程中的疑难杂点，全以TODO Z-形式在代码中标注。设计所有页面的TODO会在结尾的注意事项中展示

---

当同样的代码运行在不同的设备上时需要呈现出一种不同的布局方式来适应设备变化下导致展示屏幕的长宽等样式，想要实现这一效果我们就要用到媒体查询技术

 

二.思路：

利用mediaQuery设置媒体的查询条件（屏幕宽度【不同范围-标记状态】）

给监听器设置回调函数---状态标记保存全局的currentBreakpoint

我们在首页中声明它

 private breakpointSystem: BreakpointSystem = new BreakpointSystem()

并且给它做一个初始化操作（函数注册）

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

---index页面设置其为prop获取屏幕状态的变更

---通过BreakpointType 类调用

3.--媒体查询（类）

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)
  /*回调函数的result=>{}*/
  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)
    }
  }
  /*result=>{}里的全局储存*/
  updateCurrentBreakpoint(breakpoint: string){
    //result=>{}里的全局储存('currentBreakpoint', 'SM')
    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))
  }
}

3.1--宽度范围和状态标记（类）

4.--getvalue动态类(类)

declare interface BreakpointTypeOptions<T>{
  //TODO Z1. 动态T:泛型-end/boolen
  sm?:T,
  md?:T,
  lg?:T
}

export default class BreakpointType<T>{
  options: BreakpointTypeOptions<T>

  constructor(options: BreakpointTypeOptions<T>) {
    this.options = options
  }
//TODO Z2. BreakpointType的getvalue方法可return sm[true]
  getValue(breakpoint: string): T{
    return this.options[breakpoint]
  }
}

5.--调整index的barposision

（BreakpointConstants里）

（index）

6.--调整statscard的滑动元素

#注意事项 

 

 

 

 #结果