HarmonyOS应用一之登录页面案例

1、代码示例

实现效果：

1. /*
2. * Copyright (c) 2023 Huawei Device Co., Ltd.
3. * Licensed under the Apache License, Version 2.0 (the "License");
4. * you may not use this file except in compliance with the License.
5. * You may obtain a copy of the License at
6. *
7. *     http://www.apache.org/licenses/LICENSE-2.0
8. *
9. * Unless required by applicable law or agreed to in writing, software
10. * distributed under the License is distributed on an "AS IS" BASIS,
11. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12. * See the License for the specific language governing permissions and
13. * limitations under the License.
14. */
16. import { UIAbility, Want, AbilityConstant } from '@kit.AbilityKit';
17. import { window } from '@kit.ArkUI';
18. import { BusinessError, deviceInfo } from '@kit.BasicServicesKit';
19. import Logger from '../common/utils/Logger';
20. import CommonConstants from '../common/constants/CommonConstants';
21. import { GlobalContext } from '../common/utils/GlobalContext';
23. /**
24. * Lift cycle management of Ability.
25. */
26. export default class EntryAbility extends UIAbility {
27.   onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
28.     GlobalContext.getContext().setObject('abilityWant', want);
29.     GlobalContext.getContext().setObject('launchParam', launchParam);
30.     if (deviceInfo.deviceType !== CommonConstants.TABLET_DEVICE_TYPE) {
31.       window.getLastWindow(this.context, (err, data) => {
32.         if (err.code) {
33.           Logger.error('Failed to obtain the top window. Cause: ' + JSON.stringify(err));
34.           return;
35.         }
36.         let orientation = window.Orientation.PORTRAIT;
37.         data.setPreferredOrientation(orientation, (err) => {
38.           if (err.code) {
39.             Logger.error('Failed to set window orientation. Cause: ' + JSON.stringify(err));
40.             return;
41.           }
42.           Logger.info('Succeeded in setting window orientation.');
43.         });
44.       });
45.     }
46.   }
48.   onWindowStageCreate(windowStage: window.WindowStage) {
49.     // Main window is created, set main page for this ability.
50.     Logger.info(CommonConstants.TAG_ABILITY, 'Ability onWindowStageCreate');
51.     windowStage.loadContent('pages/LoginPage', (err: BusinessError<void>, data) => {
52.       if (err.code) {
53.         Logger.error(CommonConstants.TAG_ABILITY, 'Load the content to failed ' + JSON.stringify(err));
54.         return;
55.       }
56.       Logger.info(CommonConstants.TAG_ABILITY, 'Loading the content to succeeded ' + JSON.stringify(data));
57.     });
58.   }
59. }

复制代码

2、代码分析

2.1代码：

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

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

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

生命周期
2.3代码：

1. public register(): void {
2.     this.smListener = mediaquery.matchMediaSync(CommonConstants.WIDTH_CONDITION_SM);
3.     this.smListener.on('change', this.isDeviceSizeSM);
4.     this.mdListener = mediaquery.matchMediaSync(CommonConstants.WIDTH_CONDITION_MD);
5.     this.mdListener.on('change', this.isDeviceSizeMD);
6.     this.lgListener = mediaquery.matchMediaSync(CommonConstants.WIDTH_CONDITION_LG);
7.     this.lgListener.on('change', this.isDeviceSizeLG);
8.   }

复制代码

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

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

代码先容
2.5代码：

2.6代码：

直线绘制组件。
2.7代码：

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

页面跳转的router.pushUrl()方法。
3、注解分析

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

复制代码

• @StoragePropStorageProp(key) 和AppStorage中key对应的属性建立单向数据同步
  
• @StorageLinkStorageLink(key) 和AppStorage中key对应的属性建立双向数据同步
  

注解的作用
页面生命周期：
即被@Entry装饰的组件生命周期。提供以下生命周期接口:

• onPageShow: 页面每次体现时触发一次，包罗路由过程、应用进入前台等场景，仅@Entry装饰的自界说组件生效。
  
• onPageHide: 页面每次隐蔽时触发一次，包罗路由过程、应用进入前背景等场景，仅@Entry装饰的自界说组件生效。
  
• onBackPress:当用户点击返回按时触发，仅@Entry装饰的自界说组件生效。
  

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

复制代码

ArkTS应用/服务支持组件预览，要求compileSdkVersion为8或以上。组件预览支持实时预览，不支持动态图和动态预览。组件预览通过在组件前添加注解@Preview实现，在单个源文件中，最多可以使用10个@Preview装饰自界说组件。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。