HarmonyOS应用一之登录页面案例

news2024/11/26 3:46:47

1、代码示例

实现效果：

在这里插入图片描述

/*
 * Copyright (c) 2023 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { UIAbility, Want, AbilityConstant } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';
import { BusinessError, deviceInfo } from '@kit.BasicServicesKit';
import Logger from '../common/utils/Logger';
import CommonConstants from '../common/constants/CommonConstants';
import { GlobalContext } from '../common/utils/GlobalContext';

/**
 * Lift cycle management of Ability.
 */
export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
    GlobalContext.getContext().setObject('abilityWant', want);
    GlobalContext.getContext().setObject('launchParam', launchParam);
    if (deviceInfo.deviceType !== CommonConstants.TABLET_DEVICE_TYPE) {
      window.getLastWindow(this.context, (err, data) => {
        if (err.code) {
          Logger.error('Failed to obtain the top window. Cause: ' + JSON.stringify(err));
          return;
        }
        let orientation = window.Orientation.PORTRAIT;
        data.setPreferredOrientation(orientation, (err) => {
          if (err.code) {
            Logger.error('Failed to set window orientation. Cause: ' + JSON.stringify(err));
            return;
          }
          Logger.info('Succeeded in setting window orientation.');
        });
      });
    }
  }

  onWindowStageCreate(windowStage: window.WindowStage) {
    // Main window is created, set main page for this ability.
    Logger.info(CommonConstants.TAG_ABILITY, 'Ability onWindowStageCreate');
    windowStage.loadContent('pages/LoginPage', (err: BusinessError<void>, data) => {
      if (err.code) {
        Logger.error(CommonConstants.TAG_ABILITY, 'Load the content to failed ' + JSON.stringify(err));
        return;
      }
      Logger.info(CommonConstants.TAG_ABILITY, 'Loading the content to succeeded ' + JSON.stringify(data));
    });
  }
}

2、代码分析

2.1代码：
在这里插入图片描述

通过module.json5文件红框处查看入口代码文件。运行就跳入到登录页。

2.2代码：
在这里插入图片描述

程序执行onCreate函数先执行，其次onWindowStageCreate函数后执行。

onCreate：在 Ability 创建时被调用，用于执行初始化和设置业务逻辑。
onDestroy：在 Ability 销毁时触发，用于执行资源清理和其他清理操作。
onWindowStageCreate：在 WindowStage 创建完成后触发。
onWindowStageDestroy：在 WindowStage 销毁后触发。
onForeground：Ability 的生命周期回调，当应用从后台切换到前台时调用。
onBackground：Ability 的生命周期回调，当应用从前台切换到后台时调用。

生命周期

2.3代码：
在这里插入图片描述

 public register(): void {
    this.smListener = mediaquery.matchMediaSync(CommonConstants.WIDTH_CONDITION_SM);
    this.smListener.on('change', this.isDeviceSizeSM);
    this.mdListener = mediaquery.matchMediaSync(CommonConstants.WIDTH_CONDITION_MD);
    this.mdListener.on('change', this.isDeviceSizeMD);
    this.lgListener = mediaquery.matchMediaSync(CommonConstants.WIDTH_CONDITION_LG);
    this.lgListener.on('change', this.isDeviceSizeLG);
  }

在这里插入图片描述

在页面初始化时执行注册方法时里面使用监听器来监听屏幕的尺寸变化，并改变AppStorage里面的设备尺寸值。

2.4代码：
在这里插入图片描述

GridRow 为栅格容器组件，需与栅格子组件 GridCol 联合使用。
设置一个GridCol占栅格布局的列数

代码介绍

2.5代码：
在这里插入图片描述

2.6代码：

直线绘制组件。

2.7代码：
在这里插入图片描述

oh-package-lock.json5文件中可以去引入包的依赖。

2.8代码：
在这里插入图片描述

页面跳转的router.pushUrl()方法。

3、注解分析

 @StorageProp('currentDeviceSize') currentDeviceSize: string = CommonConstants.SM;

@StorageProp:@StorageProp(key) 和AppStorage中key对应的属性建立单向数据同步
@StorageLink:@StorageLink(key) 和AppStorage中key对应的属性建立双向数据同步

注解的作用

页面生命周期：

即被@Entry装饰的组件生命周期。提供以下生命周期接口:

onPageShow: 页面每次显示时触发一次，包括路由过程、应用进入前台等场景，仅@Entry装饰的自定义组件生效。
onPageHide: 页面每次隐藏时触发一次，包括路由过程、应用进入前后台等场景，仅@Entry装饰的自定义组件生效。
onBackPress:当用户点击返回按时触发，仅@Entry装饰的自定义组件生效。

在这里插入图片描述

@Preview({
  title: 'Component',  //预览组件的名称
  deviceType: 'phone',  //指定当前组件预览渲染的设备类型，默认为Phone
  width: 1080,  //预览设备的宽度，单位：px
  height: 2340,  //预览设备的长度，单位：px
  colorMode: 'light',  //显示的亮暗模式，当前支持取值为light
  dpi: 480,  //预览设备的屏幕DPI值
  locale: 'zh_CN',  //预览设备的语言，如zh_CN、en_US等
  orientation: 'portrait',  //预览设备的横竖屏状态，取值为portrait或landscape
  roundScreen: false  //设备的屏幕形状是否为圆形
})