关于鸿蒙开发

146 阅读4分钟

关于学习鸿蒙

鸿蒙(stage 模型)开发是一项充满创新与潜力的工作。

鸿蒙是一款面向万物互联时代的全场景分布式操作系统。在鸿蒙开发中,开发者能够利用其先进的技术特性来构建各种类型的应用。

它的分布式架构允许应用在不同设备间实现无缝流转和协同工作,开发者可以充分挖掘这种能力,打造出极具特色的跨设备体验。同时,鸿蒙提供了丰富且易用的开发工具和 API,助力开发者高效地进行代码编写、调试和部署。

image.png

开发者可以针对不同的设备形态和场景需求,开发出多样化的应用。无论是智能手机应用,还是适用于智能穿戴、智能家居等设备的应用,都能在鸿蒙平台上找到合适的发展空间。

通过鸿蒙开发,开发者有机会参与到智能生态的构建中,为用户带来更加智能、便捷和流畅的交互体验。例如,开发一个能同时在手机和智能手表上运行且交互联动的健身应用,或者打造一个可以在多个智能家电上统一控制和管理的智能家居系统应用。

鸿蒙开发正引领着行业的发展趋势,为开发者开启了一扇通往未来智能世界的大门,为科技的进步和人们生活的改善贡献力量。

希望这份简述能让你对鸿蒙开发有一个初步的了解!

  1. git的基本使用

1,git init 初始化
2,git add . 添加数据到暂存区
3,git commit -m 注释 添加数据到版本库
4,git push 仓库地址名 master 上传git仓库这样更安全
4.1,git remote add origin 地址名 一般我们会修改我们自己的地址名,方便使用
4.2,git push origin master 这样就是直接用地址名上传数据
5,git clone 仓库git地址 这个是克隆谋一份地址拷贝代码
6,git status 红色 ,绿色,无色。分别对应电脑文件夹,add .暂存区,commit版本库
7,git ignore 文件名 这就是无视隐藏文件
8,git log 查看所有版本记录
9,git log -oneline 简介查看版本记录
10,git reflog 查看所有版本记录
11,git reset --hard 版本号 强制切换版本号

2.当我们进入页面时进入沉浸式模式

进入全屏模式

window.getLastWindow(getContext()).then((windowStage: window.Window) => {
  windowStage.setWindowLayoutFullScreen(true)  // true:设置全屏
})

设置状态栏的文字

window.getLastWindow(getContext()).then((windowStage: window.Window) => {
    windowStage.setWindowSystemBarProperties({statusBarContentColor:'#FFFFFF'}) // 白色
  })

获取安全栏的安全高度


window.getLastWindow(getContext()).then((windowStage: window.Window) => {
  const area = windowStage.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
  const height = px2vp(area.topRect.height)
  AppStorage.setOrCreate('topHeight',height)
  })

3. http模块的封装

类型

// 所有接口返回数据的类型
export interface iResponseModel<T> {
  /**
   * 请求成功10000标志
   */
  code: number;
  /**
   * 返回数据
   */
  data: T;
  /**
   * 请求成功
   */
  message: string;
  /**
   * 请求成功标志
   */
  success: boolean;
}

封装

import { http } from '@kit.NetworkKit'
import { iLoginDataModel, iResponseModel } from '../../models/AccountModel'
import { promptAction, router } from '@kit.ArkUI'

const baseUrl: string = 'https://api-harmony-teach.itheima.net/hm/' // url的基地址

export class HdHttp {
  //   静态的 get泛型方法
  // get<t>('getclock')  带参数调用:get<t>('clockinInfo?year=2024&month=4')
  static async get<T>(url: string) {
    try {
      // 2.0 发请求
      const httpRequest = http.createHttp()

      url = baseUrl + url

      // 获取token
      // 获取token,判断如果有token,则传,否则不传
      let user = AppStorage.get('user') as iLoginDataModel
      let token = user?.token // 可选 【可空]类型

      let res = await httpRequest.request(url, {
        method: http.RequestMethod.GET,
        header: {
          'Authorization': `Bearer ${token}`
        },
        expectDataType: http.HttpDataType.OBJECT
      })

      //  响应
      // 判断如果响应code为401则提示用户token失效,直接跳转到登录页面让用户重新登录
      let resData = res.result as iResponseModel<T>
      if(resData.code === 401){
        promptAction.showToast({ message: '登录超时,请重新登录' })
        router.pushUrl({url:'pages/LoginPage'})
      }
      return resData
    } catch (err) {
      promptAction.showToast({ message: 'get网络错误' })
      return Promise.reject(err) // 如果报错则将错误返回
    }
  }


  //   静态的post泛型方法
  // url: 请求url地址
  // extraData:post请求体的参数,因为不是每个url都要求传递,所以定义为可选参数
  /* 封装思路:
      固定代码写死,可变的地方提炼成参数供外部调用的时候传入
   * */
  static async post<T>(url: string, extraData?: Object) {
    try {

      // 创建http对象
      const httpRequest = http.createHttp()

      // 完整拼接url地址
      url = baseUrl + url

      // 设置请求参数
      let options: http.HttpRequestOptions = {
        method: http.RequestMethod.POST,
        header: {
          "Content-Type": 'application/json'
        },
        expectDataType: http.HttpDataType.OBJECT   // http模块底层将服务器响应回来的json字符串自动调用JSON.parse转成对象
      }
      // 判断如果extraData有值,则向options对象增加一个extraData的属性
      if (extraData) {
        options.extraData = extraData
      }
      // 获取token,判断如果有token,则传,否则不传
      let user = AppStorage.get('user') as iLoginDataModel
      let token = user?.token // 可选 【可空]类型
      if (token && options.header) {
        options.header['Authorization'] = `Bearer ${token}`
      }
      // 调用reqeust方法并且指定相应的参数
      let res = await httpRequest.request(url, options)

      //  响应服务器的数据
      //  由于不同的接口返回的数据类型不一样,所以此方法应该用一个泛型来替代,将来实际运行的时候是什么类型就返回什么类型
      // 判断如果响应code为401则提示用户token失效,直接跳转到登录页面让用户重新登录
      let resData = res.result as iResponseModel<T>
      if(resData.code === 401){
        promptAction.showToast({ message: '登录超时,请重新登录' })
        router.pushUrl({url:'pages/LoginPage'})
      }
      return resData
    } catch (err) {
      promptAction.showToast({ message: 'post网络错误' })
      return Promise.reject(err) // 如果报错则将错误返回
    }
  }
}
image.png

我已经累了 !!!!!!!!!

4. 下面是关于人体骨架的代码

image.png

搞错了!!!!!!

骨架屏

@Component
export struct IvSkeleton {
  widthValue: number | string = 100
  heightValue: number | string = 20
  @State translateValue: string = "-100%"

  build() {
    Stack() {
      Text()
        .backgroundColor($r('app.color.common_gray_bg'))
        .height('100%')
        .width('100%')

      Text()
        .height('100%')
        .width('100%')
        .translate({ x: this.translateValue })
        .linearGradient({
          angle: 45,
          colors: [
            ['rgba(255,255,255,0)', 0],
            ['rgba(255,255,255,1)', 0.5],
            ['rgba(255,255,255,0)', 0]
          ]
        })
        .animation({duration:1500,iterations:-1})
        .onAppear(()=>{
          this.translateValue = '100%'
        })

    }
    .height(this.heightValue)
    .width(this.widthValue)
  }
}
image.png

累了 困了

image.png