鸿蒙---应用开发初探

CTRL_CV
177 阅读2分钟

鸿蒙---应用开发初探

最近再看鸿蒙开发的相关知识，想着把了解学习到的东西，做一个记录。

开发环境的搭建就不说了，主要就是安装DevEco Studio 及 Harmony SDK。本文基于API 9！

第一篇就以登录注册的界面开始，主要是创建项目的时候，用了Login Ability模板了。 所以直接以此开始完善了解。

官方文档指南

Stage模型：该模型提供UIAbility组件开发界面，与用户进行交互。

ArkTs: 鸿蒙推荐的应用开发语言，基于TypeScript做了进一步扩展，包含声明式UI描述，状态管理等

项目文件

  1. 应用配置文件

    app_file.png

    • app.json5 应用全局配置信息，包含包名，版本号等基本信息
    • module.json5 module的基本信息及应用组件信息等

  2. UIAbility

    • 系统调度的基本单元，提供绘制界面的窗口WindowStage。
    • 生命周期 onCreate()\onDestroy()\onForeground()\onBackground()
    • WindowStage 在Create中加载UI界面

  3. 自定义组件

    • @Component装饰的struct结构 实现build()函数描述UI
    • @Entry装饰的组件作为UI页面的入口
    • 自定义组件内自定义构建函数 @Builder装饰
    • 生命周期 aboutToAppear()\aboutToDisappear()
UI开发

  1. UIAbility

    • module配置
      {
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ts",
        "label": "$string:ability_label",
        "startWindowIcon": "$media:icon",
        "startWindowBackground": "$color:start_window_background"
      }
    ]
  }
    • 在onWindowStageCreate()中加载页面入口
      windowStage.loadContent("page/LoginPage", (err, data) => {
  if (err.code) {
    hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
    return;
  }
  hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
});

  2. 页面入口

    • module配置
       {
      "pages": "$profile:main_pages"
   }
    • profile资源
      {
    "src":[
     "pages/LoginPage" 
    ]
  }
    • build函数实现
       build() {
Column() {
  this.Title()

  Scroll() {
    Column() {
      LoginComponent()

      Blank()

      PrivacyStatementComponent()
    }
    .height(CommonConstants.SCROLL_HEIGHT_PERCENT)
    .constraintSize({ minHeight: $r('app.float.scroll_min_height') })
    .alignItems(HorizontalAlign.Start)
    .padding($r('app.float.login_operation_area_padding'))
  }
  .layoutWeight(CommonConstants.LOGIN_SCROLL_LAYOUT_WEIGHT)
}
.width(CommonConstants.LOGIN_PAGE_WIDTH_PERCENT)
// .backgroundColor($r('app.color.login_page_background'))
.backgroundImage($r('app.media.login_background'))
.backgroundImageSize(ImageSize.Cover)
}

  3. 输入框实现

        TextInput({ placeholder: $r('app.string.password') })
        .width(CommonConstants.TEXT_INPUT_WIDTH_PERCENT)
        .height($r('app.float.text_input_height'))
        .placeholderColor($r('app.color.text_input_place_holder'))
        .placeholderFont({ size: $r('app.float.text_input_font_size') })
        .fontSize($r('app.float.text_input_font_size'))
        .backgroundColor($r('app.color.login_input_text_background'))
        .type(InputType.Password)
        .padding({ left: $r('app.float.password_padding_left') })
        .border({
          width: { bottom: $r('app.float.input_border_width') },
          color: $r('app.color.input_border_color'),
          radius: $r('app.float.input_border_radius')
        })
        .margin({ bottom: $r('app.float.input_margin_bottom') })
        .onChange((value: string) => {
          this.password = value;
        })

  4. 按钮实现

        Button($r('app.string.login'))
      .width(CommonConstants.BUTTON_WIDTH_PERCENT)
      .height($r('app.float.login_btn_height'))
      .borderRadius($r('app.float.login_btn_border_radius'))
      .fontSize($r('app.float.text_input_font_size'))
      .margin({ top: $r('app.float.register_btn_margin_top') })
      .fontWeight(CommonConstants.LOGIN_TEXT_FONT_WEIGHT)
      .enabled(isLoginButtonClickable(this.userName, this.password))
      .fontColor(isLoginButtonClickable(this.userName, this.password) ?
        Color.White : $r('app.color.login_font_normal'))
      .backgroundColor(isLoginButtonClickable(this.userName, this.password) ?
        $r('app.color.login_btn_enabled') : $r('app.color.login_btn_normal'))
      .onClick(() => {
        this.loginAccount()
      })

  5. resources 资源文件

resources.png

常用布局跟组件 以及 对应的属性，这个就不详细记录了，需要的时候查下文档就行。

U常用布局及组件

网络请求

  1. 网络权限配置

        {
      "requestPermissions": [
        {
            "name": "ohos.permission.INTERNET"
        }
     ]
    }

  2. http请求

           export function httpRequest(url: string,method: http.RequestMethod,params?: any,
                           token: string = "",
                           contentType: string = HttpConstants.JSON_TYPE) {
            Logger.debug(url,params)
            let request = http.createHttp();
            let responseResult = request.request(url, {
                method: method,
                readTimeout: HttpConstants.READ_TIMEOUT, // 默认60000ms
                connectTimeout: HttpConstants.CONNECT_TIMEOUT,
                header: {
                "Content-Type": contentType,
                "Accept": HttpConstants.JSON_TYPE,
                "Authorization": token
                },
                extraData: params
            })
            return responseResult.then(value => {
                Logger.debug(value.responseCode.toString(),value.result.toString())
                if (value.responseCode === 200) {
                  // 返回结果
                  return new BaseResponseBean(0,"",JSON.parse(value.result.toString()))
                } else {
                  let obj = JSON.parse(value.result.toString())
                  let errorMsg = obj.error
                
                   return new BaseResponseBean(value.responseCode,errorMsg)
                  }
                }).catch(err => {
                  return new BaseResponseBean(-1,err.message)
              })
      }

  3. base64编码

      function encodeToBase64(input: string) : string {
    const base64 = new util.Base64Helper()
    let text = new util.TextEncoder() // 默认utf-8
    let value = text.encodeInto(input)
    return base64.encodeToStringSync(value)
  }
持久化存储---用户首选项

  1. UIAbility中初始化 及 获取

        import data_preferences from '@ohos.data.preferences';
    
    data_preferences.getPreferences(this.context,"MyApp").then((value) => {
        appPreferences = value
    
        value.get("is_login",false).then(value => {
          console.log("is_login",value)
          this.loadPage(windowStage,value ? "pages/MainPage" : "pages/LoginPage")
        }).catch(err => {
          this.loadPage(windowStage,"pages/LoginPage")
        })
    })

  2. 保存

        async saveLoginResult(result: LoginResponse) {
       await appPreferences.put("is_login",result.isSuc.valueOf())
       await appPreferences.put("token",result.token)
       appPreferences.flush()
    }

  3. 允许存储的数据类型

    • number 及 Array<number>
    • string 及 Array<string>
    • boolean 及 Array<boolean>

以上有很多不完善的地方，很多介绍都只是浅尝辄止。

一是此次开发中，没有用到的东西没有进行介绍。

二是刚开始了解鸿蒙，文档看的也是一知半解，记录上来也没啥作用。

后续有使用，再进一步了解吧。

avatar
文章
阅读
粉丝