HarmonyOS 封装自定义组件-沉浸式显示\axios网络请求

沉浸式显示

注意:

由于整个应用都开启了全屏显示，那些不需要全屏显示的页面也一并开启了，导致出现了问题：

问题：内容突破了整个安全区域，靠手机顶部显示了内容

解决：需要通过获取手机的安全高度来结合 padding(或其他空间间距)来适配顶部内容的正常显示

创建

//导入窗口模块
import { window } from '@kit.ArkUI'

export class WindowManager {
  // 开启全屏
  static async enableFullScreen() {
  // 1.0 利用了系统的window 这个api的getLastWindow方法获取到了当前的窗口
    const win = await window.getLastWindow(getContext())
  // 2.0 利用当前窗口的setWindowLayoutFullScreen方法设置全屏: true:设置全屏  false：取消全屏
    win.setWindowLayoutFullScreen(true)// 开启了当前页面的沉浸式模式（开启全屏模式）

    let area = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
    // 将topHeight保存到本地存储中
    AppStorage.setOrCreate('topHeight', px2vp(area.topRect.height))
  }

  // 关闭全屏
  static async disableFullScreen() {
    const win = await window.getLastWindow(getContext())
    win.setWindowLayoutFullScreen(false)

    // 将topHeight保存到本地存储中
    AppStorage.setOrCreate('topHeight', 0)

  }

  // 设置状态栏为亮色
  static async settingStatusBarLight() {
    const win = await window.getLastWindow(getContext())
    win.setWindowSystemBarProperties({
      // 状态栏的背景颜色
      // statusBarColor:'',
      // 状态栏文字颜色
      statusBarContentColor: '#ffffff'
    })
  }

  // 设置状态栏为暗色
  static async settingStatusBarDark() {
    const win = await window.getLastWindow(getContext())
    win.setWindowSystemBarProperties({
      // 状态栏的背景颜色
      // statusBarColor:'',
      // 状态栏文字颜色
      statusBarContentColor: '#000000'
    })
  }
}

调用

//导入自定义沉浸式模式
import { WindowManager } from '../common/utils/WindowManager'

async aboutToAppear() {
    // 使页面全屏
    WindowManager.enableFullScreen()
  }

async aboutToDisappear() {
    // 关闭全屏
    WindowManager.disableFullScreen()
  }

//开启页面状态栏文字颜色亮色
aboutToAppear(): void {
    WindowManager.settingStatusBarLight()
  }

//开启页面状态栏文字颜色暗色
  aboutToDisappear(): void {
    WindowManager.settingStatusBarDark()
  }

页面设置安全高度

// 获取AppStrorage中的数据
  @StorageProp("topHeight") topHeight:number = 0
   //(容器组件)
    .padding({top:this.topHeight})

index.ets中设置底部tab栏距离底部间隙

• index.ets中的tabs组件上通过 padding({bottom:15}) 来设置tab栏贴住底部被Home键盖住的问题

.padding({ bottom: 15 })

axios网络请求

创建

import axios, { AxiosError, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from '@ohos/axios'
import { iLoginUserModel } from '../../models/AccountModel';
import { promptAction, router } from '@kit.ArkUI';

export const instance = axios.create({
  baseURL: 'https://api-harmony-teach.itheima.net/'
})

export interface iRes<T> {
  /** 请求成功10000标志 */
  code: number;

  /** 返回数据 */
  data: T;

  /** 请求成功 */
  message: string;

  /** 请求成功标志 */
  success: boolean;
}

export function request<T = null, D = null>(config: AxiosRequestConfig<D>) {
  return instance<null, AxiosResponse<iRes<T>, D>, D>(config)
}

// 添加请求拦截器
instance.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    const user = AppStorage.get('user') as iLoginUserModel
    // console.log('user---', JSON.stringify(user))
    // console.log('user', JSON.stringify(config.url))
    if (user !== undefined) {
      config.headers.Authorization = `Bearer ${user.token}`
    }
    return config;
  },
  (error: AxiosError) => {
    return Promise.reject(error);
  });


// 添加响应拦截器
instance.interceptors.response.use(
  (res: AxiosResponse) => {
    //统一处理异常: 业务状态码不为10000的异常
    if (res.data.code !== 10000) {
      promptAction.showToast({ message: res.data.message })
      return Promise.reject(res);
    }
    //阻止后续代码执行
    return res;
  },
  (error: AxiosError) => {
    // 401逻辑处理
    if (error.response?.status === 401) {
      promptAction.showToast({ message: '登录过期,请重新登录' })
      setTimeout(() => {
        router.clear()
        AppStorage.delete('user')
        router.replaceUrl({
          url: 'pages/LoginPage'
        }, 500)
      })
      return
    }
    //开发时校验代码_业务逻辑处理
    AlertDialog.show({ message: '失败:' + JSON.stringify(error, null, 2), alignment: DialogAlignment.Center })
    return Promise.reject(error);
  });

调用

import { request } from '../utils/request';

const res = await request<ICockData>({
      url: 'hm/clockinInfo',
    })