鸿蒙基础入门与高频知识点梳理

介绍鸿蒙高频知识点，持续更新中
  一、鸿蒙代码结构

1. ├──entry/src/main/ets        // 代码区
2. │  ├──common
3. │  │  └──Constant.ets        // 常量类
4. │  ├──entryability            
5. │  │  └──EntryAbility.ts     // 程序入口类
6. │  ├──pages
7. │  │  ├──MainPage.ets        // 主页入口文件
8. │  │  └──WebPage.ets         // 抽奖页入口文件
9. │  └──viewmodel                          
10. │     └──NavigatorModel.ets  // 导航model
11. ├──entry/src/main/resources  
12. │  ├──base
13. │  │  ├──element             // 尺寸、颜色、文字等资源文件存放位置
14. │  │  ├──media               // 媒体资源存放位置
15. │  │  └──profile             // 页面配置文件存放位置
16. │  ├──en_US                  // 国际化英文
17. │  ├──rawfile                // 本地html代码存放位置
18. │  └──zh_CN                  // 国际化中文
19. └──HttpServerOfWeb           // 服务端代码

复制代码

二、设置文件

1、module.json5

用于设置UIAbility页面模块信息。
位置：/entry/src/main/module.json5

1. {
2.   "module": {
3.     "name": "entry",//当前Module的名称
4.     "type": "entry",//Module的类型(entry：应用的主模块, feature：应用的动态特性模块)
5.     "description": "$string:module_desc",
6.     "mainElement": "EntryAbility",//标识当前Module的入口UIAbility名称或者ExtensionAbility名称。
7.     "deviceTypes": [//运行设备
8.       "phone",
9.       "tablet"
10.     ],
11.     "deliveryWithInstall": true,//标识当前Module是否在用户主动安装的时候安装，表示该Module对应的HAP是否跟随应用一起安装。
12.     "installationFree": false,//是否支持免安装特性
13.     "pages": "$profile:main_pages",//页面配置文件json
14.     "abilities": [//UIAbility的配置信息
15.       {
16.         "name": "EntryAbility",//当前UIAbility组件的名称，该名称在整个应用要唯一
17.         "srcEntry": "./ets/entryability/EntryAbility.ts",//入口UIAbility的路径
18.         "description": "$string:EntryAbility_desc",
19.         "icon": "$media:icon",//app图标
20.         "label": "$string:EntryAbility_label",//app
21.         "startWindowIcon": "$media:icon",//当前UIAbility组件启动页面图标(暂时没发现有啥用，与上面保持一致即可)
22.         "startWindowBackground": "$color:start_window_background",
23.         "exported": true,//当前UIAbility组件是否可以被其他应用调用
24.         "skills": [//能够接收的Want的特征集
25.           {
26.             "entities": [
27.               "entity.system.home"
28.             ],
29.             "actions": [
30.               "action.system.home"
31.             ]
32.           }
33.         ]
34.       }
35.     ]
36.   }
37. }

复制代码

2、main_pages.json

页面列表json，对应上面module.json5的pages字段。
位置：/entry/src/main/resources/base/profile/main_pages.json

1. {
2.   "src": [
3.     "pages/SecondPage",
4.     "pages/SimpleVideoPlay",
5.     "pages/Index"
6.   ]
7. }

复制代码

3、build-profile.json5

定制HAP多目标构建产物。
位置：entry/build-profile.json5

1. {
2.   "apiType": 'stageMode',
3.   "buildOption": {
4.   },
5.   "targets": [
6.     {
7.       "name": "default",
8.       "runtimeOS": "HarmonyOS"
9.     },
10.     {
11.       "name": "ohosTest",
12.     }
13.   ]
14. }

复制代码

例如，以ArkTS Stage模型为例，界说一个免费版和付费版，示例如下。参考资料

1. {
2.   "apiType": 'stageMode',
3.   "buildOption": {
4.   },
5.   "targets": [
6.     {
7.       "name": "default"  //默认target名称default,未定义deviceType，默认支持config.json或module.json5中定义的设备类型
8.     },
9.     {
10.       "name": "free", //免费版target名称
11.       "config": {
12.         "deviceType": [  //定义free支持的设备类型为Tablet
13.           "tablet"
14.         ]
15.       }
16.     },
17.     {
18.       "name": "pay",//付费版target名称
19.       "config": {
20.         "deviceType": [  //定义pay支持的设备类型为Tablet
21.           "tablet"
22.         ]
23.       }
24.     }
25.   ]
26. }

复制代码

4、oh-package.json5

形貌项目基础信息
位置：entry/oh-package.json5

1. {
2.   "name": "entry",
3.   "version": "1.0.0",
4.   "description": "Please describe the basic information.",
5.   "main": "",
6.   "author": "",
7.   "license": "",
8.   "dependencies": {}
9. }

复制代码

三、组件

1、Image

• 网络图片
  

   需要在module.json5 文件中添加网络访问权限

1. "module": {
2.   "requestPermissions": [
3.     {"name": "ohos.permission.INTERNET"}
4.   ]
5. }

复制代码

1. Image('https://gitcode.net/liuxingyuzaixian/csdn_img/-/raw/main/pictures/2023/11/17_10_51_42_image-20230518181509168.png')
2.   .width(78)
3.   .height(78)
4.   .objectFit(ImageFit.Cover)//设置缩放类型

复制代码

• PixelMap 图片
  

   代码天生的色块图片，需要创建PixelMap对象

1. @State myPixelmap?: PixelMap = null
3. onPageShow() {
4.   // 创建PixelMap图片
5.   const color = new ArrayBuffer(56);
6.   let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } }
7.   image.createPixelMap(color, opts, (err, pixelmap) => {
8.     if (pixelmap != undefined) {
9.       this.myPixelmap = pixelmap;
10.     }
11.   })
12. }
14. // 使用
15. if (this.myPixelmap != null)
16.   Image(this.myPixelmap).width(78).height(78)

复制代码

• Resource 图片
  

   需要将图片添加到下面目录：/resources/base/media

1. // 使用
2. Image($r('app.media.icon')).width(78).height(78)

复制代码

2、Text

1. Text($r('app.string.module_desc'))
2.   .fontSize(50)
3.   .fontWeight(FontWeight.Bold)
4.   .fontColor(0xFF0000)
5.   .maxLines(1)
6.   .textOverflow({ overflow: TextOverflow.Ellipsis })//单行...
7.   .decoration({ type: TextDecorationType.Underline, color: Color.Black })//文本装饰线

复制代码

1、数字默认单位： vp
2、vp ：屏幕密度相关像素
3、sp：文本推荐
3、TextInput

   单行文本输入

1. TextInput({ placeholder: "账号" })
2.   .maxLength(11)
3.   .type(InputType.Number)
4.   .onChange((value: string) => {
6.   })

复制代码

4、Button

1. Button("登录", { type: ButtonType.Capsule })
2.   .onClick(() => {
4.   })

复制代码

5、Column、Row

   用法语 flutter 一样，仅仅多了space参数方便添加间距

1. Column({ space: 10 }) {
2.   Text("asdf")
3.   Text("asdf")
4. }.alignItems(HorizontalAlign.Start)

复制代码

6、List

   如果长度超过容器高度，就会滚动

1. private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
3. List({ space: 10 }) {
4.   ForEach(this.arr, (item: number) => {
5.     ListItem() {
6.       Text(`${item}`)
7.         .width('100%')
8.         .height(100)
9.         .fontSize(20)
10.         .fontColor(Color.White)
11.         .textAlign(TextAlign.Center)
12.         .borderRadius(10)
13.         .backgroundColor(0x007DFF)
14.     }
15.   }, item => item)
16. }
17. .height('100%')

复制代码

7、Grid

   构建如下不可滚动网格示例
  

1. Grid() {
2.   ForEach(this.arr, (item: string) => {
3.     GridItem() {
4.       Text(item)
5.         .fontSize(16)
6.         .fontColor(Color.White)
7.         .backgroundColor(0x007DFF)
8.         .width('100%')
9.         .height('100%')
10.         .textAlign(TextAlign.Center)
11.     }
12.   }, item => item)
13. }
14. .columnsTemplate('1fr 2fr 1fr 1fr') // 设置当前网格布局列的数量。
15. .rowsTemplate('1fr 2fr 1fr 1fr') // 设置当前网格布局行的数量。
16. .columnsGap(10) // 设置列与列的间距。
17. .rowsGap(10) // 设置行与行的间距。
18. .height(300)

复制代码

  如果需要垂直方向滚动，则关闭掉rowsTemplate即可，如下：

1. Grid() {
2.   ForEach(this.arr, (item: string) => {
3.     GridItem() {
4.       Text(item)
5.         .fontSize(16)
6.         .fontColor(Color.White)
7.         .backgroundColor(0x007DFF)
8.         .width(50)
9.         .height(50)
10.         .textAlign(TextAlign.Center)
11.     }
12.   }, item => item)
13. }
14. .direction(Direction.Ltr)
15. .columnsTemplate('1fr 2fr 1fr 1fr') // 设置当前网格布局列的数量。
16. // .rowsTemplate('1fr 2fr 1fr 1fr') // 设置当前网格布局行的数量。
17. .columnsGap(10) // 设置列与列的间距。
18. .rowsGap(10) // 设置行与行的间距。
19. .height(300)
20. .onScrollIndex((first: number) => {
21.   console.info('first:' + first)
22. })

复制代码

8、Tabs

   使用体系自带的样式：不带图片
  

1. private controller: TabsController = new TabsController()
3. Column() {
4.   Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
5.     TabContent() {
6.       Column().width('100%').height('100%').backgroundColor(Color.Green)
7.     }
8.     .tabBar('首页')
10.     TabContent() {
11.       Column().width('100%').height('100%').backgroundColor(Color.Blue)
12.     }
13.     .tabBar('我的')
14.   }
15.   .barMode(BarMode.Fixed)//页签比较多的时候，可以设置滑动页签Scrollable
16.   .barWidth('100%') // 设置TabBar宽度
17.   .barHeight(60) // 设置TabBar高度
18.   .width('100%') // 设置Tabs组件宽度
19.   .height('100%') // 设置Tabs组件高度
20.   .backgroundColor(0xF5F5F5) // 设置Tabs组件背景颜色
21.   .vertical(false)//注意：这个表示底部的 tab 排列方向（与页面与 tab 的排列方向刚好相反）
22. }
23. .width('100%')
24. .height('100%')

复制代码

  自界说样式：带图片。tabBar组件支持@Builder装饰器修饰的函数
  

1. struct Index {
2.   @State currentIndex: number = 0;
3.   private tabsController: TabsController = new TabsController();
5.   @Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
6.     Column() {
7.       Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
8.         .size({ width: 25, height: 25 })
9.       Text(title)
10.         .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
11.     }
12.     .width('100%')
13.     .height(50)
14.     .justifyContent(FlexAlign.Center)
15.     .onClick(() => {
16.       this.currentIndex = targetIndex;
17.       this.tabsController.changeIndex(this.currentIndex);
18.     })
19.   }
21.   build() {
22.     Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
23.       TabContent() {
24.         Column().width('100%').height('100%').backgroundColor('#00CB87')
25.       }
26.       .tabBar(this.TabBuilder('首页', 0, $r('app.media.icon'), $r('app.media.test')))
28.       TabContent() {
29.         Column().width('100%').height('100%').backgroundColor('#007DFF')
30.       }
31.       .c(this.TabBuilder('我的', 1, $r('app.media.icon'), $r('app.media.test')))
32.     }
33.     .barWidth('100%')
34.     .barHeight(50)
35.     .onChange((index: number) => {
36.       this.currentIndex = index;
37.     })
38.   }
39. }

复制代码

9、Swiper

1. Swiper() {
2.   Image($r('app.media.video_list0'))
3.     .borderRadius(12).objectFit(ImageFit.Contain)
4.   Image($r('app.media.video_list0'))
5.     .borderRadius(12).objectFit(ImageFit.Contain)
6.   Image($r('app.media.video_list0'))
7.     .borderRadius(12).objectFit(ImageFit.Contain)
8. }
9. .autoPlay(true)

复制代码

10、Slider进度条

1. @State slidingProgress: number = 0;
3. // 样式 1
4. Slider({
5.   value: this.slidingProgress,
6.   style: SliderStyle.InSet,
7. })
8.   .onChange((value: number, mode: SliderChangeMode) => {
9.     this.slidingProgress = Math.floor(value);
10.   })
11. // 样式 2
12. Slider({
13.   value: this.slidingProgress,
14.   style: SliderStyle.OutSet,
15. })
16.   .onChange((value: number, mode: SliderChangeMode) => {
17.     this.slidingProgress = Math.floor(value);
18.   })

复制代码

11、Video

1、加载本地
需要先在rawfile中添加videoTest.mp4文件

1. Video({
2.   src: $rawfile('videoTest.mp4'),
3.   previewUri: $r('app.media.icon'),
4. })

复制代码

效果图如下

2、加载网络视频
src换成网络视频即可，并且添加网络权限。
需要注意的是：
1、现在我使用鸿蒙模仿器对网络视频的加载体验并不好
2、网络加载器点击播放的时间需要一段下载时间，最好加上loading

1. Video({
2.   src: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",
3.   previewUri: $r('app.media.icon'),
4. })
5.   .objectFit(ImageFit.Contain)

复制代码

3、自界说Video

1. Button("dianji").onClick(()=>{
2.   router.pushUrl({
3.     url: 'pages/SimpleVideoPlay',
4.     params: { source: $rawfile('videoTest.mp4') }//添加视频资源
5.   });
6. })

复制代码

自界说Video页面SimpleVideoPlay.ets
   需要额外不上这些icon
ic_back.png
ic_pause.png
ic_play.png
ic_public_play.png

1. import router from '@ohos.router';
2. import { VideoPlayer } from './VideoPlayer';
4. /**
5. * 自定义Video页面
6. */
7. @Entry
8. @Component
9. struct Play {
10.   private source: string = (router.getParams() as Record<string, Object>).source as string;
11.   private startIconResource: Resource = $r('app.media.ic_public_play');
12.   private backIconResource: Resource = $r('app.media.ic_back');
13.   @Provide isPlay: boolean = false;
14.   @Provide isOpacity: boolean = false;
15.   controller: VideoController = new VideoController();
16.   @Provide isLoading: boolean = false;
17.   @Provide progressVal: number = 0;
18.   @Provide flag: boolean = false;
20.   aboutToAppear() {
21.     this.source;
22.   }
24.   onPageHide() {
25.     this.controller.pause();
26.   }
28.   build() {
29.     Column() {
30.       Row() {
31.         Image(this.backIconResource)
32.           .width(24)
33.           .height(24)
34.           .margin({ left: 24 })
35.           .onClick(() => {
36.             router.back();
37.           })
38.         Text('返回')
39.           .fontColor(Color.White)
40.           .fontSize(24)
41.           .fontWeight(500)
42.           .margin({ left: 12 })
43.       }
44.       .width('100%')
45.       .margin({
46.         left: 12,
47.         top: 12
48.       })
49.       .justifyContent(FlexAlign.Start)
51.       Stack() {
52.         if (!this.isPlay && !this.isLoading) {
53.           Image(this.startIconResource)
54.             .width(50)
55.             .height(50)
56.             .zIndex(2)
57.         }
58.         if (this.isLoading) {
59.           Progress({
60.             value: 0,
61.             total: 100,
62.             type: ProgressType.ScaleRing
63.           })
64.             .color(Color.Grey)
65.             .value(this.progressVal)
66.             .width(80)
67.             .style({
68.               strokeWidth: 15,
69.               scaleCount: 15,
70.               scaleWidth: 5
71.             })
72.             .zIndex(1)
73.         }
74.         VideoPlayer({
75.           source: this.source,
76.           controller: this.controller
77.         })
78.           .zIndex(0)
79.       }
80.     }
81.     .height('100%')
82.     .backgroundColor(Color.Black)
83.   }
84. }

复制代码

滑块VideoPlaySlider.ets

1. /**
2. * video slider component
3. */
4. @Component
5. export struct VideoSlider {
6.   @Consume isOpacity: boolean;
7.   private controller: VideoController = new VideoController();
8.   @Consume currentStringTime: string;
9.   @Consume currentTime: number;
10.   @Consume durationTime: number;
11.   @Consume durationStringTime: string;
12.   @Consume isPlay: boolean;
13.   @Consume flag: boolean;
14.   @Consume isLoading: boolean;
15.   @Consume progressVal: number;
17.   build() {
18.     Row({ space: 12 }) {
19.       Image(this.isPlay ? $r('app.media.ic_pause') : $r('app.media.ic_play'))
20.         .width(24)
21.         .height(24)
22.         .margin({ left: 12 })
23.         .onClick(() => {
24.           this.iconOnclick();
25.         })
26.       Text(this.currentStringTime)
27.         .fontSize(16)
28.         .fontColor(Color.White)
29.         .margin({ left: 12 })
30.       Slider({
31.         value: this.currentTime,
32.         min: 0,
33.         max: this.durationTime,
34.         step: 1,
35.         style: SliderStyle.OutSet
36.       })
37.         .blockColor("#FFFFFF")
38.         .width('46.7%')
39.         .trackColor(Color.Gray)
40.         .selectedColor("#FFFFFF")
41.         .showSteps(true)
42.         .showTips(true)
43.         .trackThickness(this.isOpacity ? 2 : 4)
44.         .onChange((value: number, mode: SliderChangeMode) => {
45.           this.sliderOnchange(value, mode);
46.         })
47.       Text(this.durationStringTime)
48.         .fontSize(16)
49.         .margin({ right: 12 })
50.         .fontColor(Color.White)
51.     }
52.     .opacity(this.isOpacity ? Number.parseFloat('0.2') : 1)
53.     .width('100%')
54.     .alignItems(VerticalAlign.Center)
55.     .justifyContent(FlexAlign.Center)
56.   }
58.   /**
59.    * icon onclick callback
60.    */
61.   iconOnclick() {
62.     if (this.isPlay === true) {
63.       this.controller.pause()
64.       this.isPlay = false;
65.       this.isOpacity = false;
66.       return;
67.     }
68.     if (this.flag === true) {
69.       this.controller.start();
70.       this.isPlay = true;
71.       this.isOpacity = true;
72.     } else {
73.       this.isLoading = true;
74.       // The video loading is not complete. The loading action is displayed.
75.       let intervalLoading = setInterval(() => {
76.         if (this.progressVal >= 100) {
77.           this.progressVal = 0;
78.         } else {
79.           this.progressVal += 10;
80.         }
81.       }, 100)
82.       // The scheduled task determines whether the video loading is complete.
83.       let intervalFlag = setInterval(() => {
84.         if (this.flag === true) {
85.           this.controller.start();
86.           this.isPlay = true;
87.           this.isOpacity = true;
88.           this.isLoading = false;
89.           clearInterval(intervalFlag);
90.           clearInterval(intervalLoading);
91.         }
92.       }, 100);
93.     }
94.   }
96.   /**
97.    * video slider component onchange callback
98.    */
99.   sliderOnchange(value: number, mode: SliderChangeMode) {
100.     this.currentTime = Number.parseInt(value.toString());
101.     this.controller.setCurrentTime(Number.parseInt(value.toString()), SeekMode.Accurate);
102.     if (mode === SliderChangeMode.Begin || mode === SliderChangeMode.Moving) {
103.       this.isOpacity = false;
104.     }
105.     if (mode === SliderChangeMode.End) {
106.       this.isOpacity = true;
107.     }
108.   }
109. }

复制代码

Video组件封装VideoPlayer.ets

1. import prompt from '@ohos.promptAction';
2. import { VideoSlider } from './VideoPlaySlider';
3. export function changeSliderTime(value: number): string {
4.   let second: number = value % 60;
5.   let min: number = Number.parseInt((value / 60).toString());
6.   let head = min < 10 ? `${'0'}${min}` : min;
7.   let end = second < 10 ? `${'0'}${second}` : second;
8.   let nowTime = `${head}${':'}${end}`;
9.   return nowTime;
10. }
12. /**
13. * video controller component
14. */
15. @Component
16. export struct VideoPlayer {
17.   private source: string | Resource = '';
18.   private controller: VideoController = new VideoController();
19.   private previewUris: Resource = $r('app.media.icon');
20.   @Provide currentTime: number = 0;
21.   @Provide durationTime: number = 0;
22.   @Provide durationStringTime: string = '00:00';
23.   @Provide currentStringTime: string = '00:00';
24.   @Consume isPlay: boolean;
25.   @Consume isOpacity: boolean;
26.   @Consume flag: boolean;
27.   @Consume isLoading: boolean;
28.   @Consume progressVal: number;
30.   build() {
31.     Column() {
32.       Video({
33.         src: this.source,
34.         previewUri: this.previewUris,
35.         controller: this.controller
36.       })
37.         .width('100%')
38.         .height('88%')
39.         .controls(false)
40.         .autoPlay(false)
41.         .objectFit(ImageFit.Contain)
42.         .loop(false)
43.         .onUpdate((event) => {
44.           if (event) {
45.             this.currentTime = event.time;
46.             this.currentStringTime = changeSliderTime(this.currentTime);
47.           }
48.         })
49.         .onPrepared((event) => {
50.           this.prepared(event?.duration);
51.         })
52.         .onFinish(() => {
53.           this.finish();
54.         })
55.         .onError(() => {
56.           prompt.showToast({
57.             duration: 5000,
58.             message: '请检查网络'
59.           });
60.         })
61.       VideoSlider({ controller: this.controller })
62.     }
63.   }
65.   /**
66.    * video component prepared callback
67.    */
68.   prepared(duration: number) {
69.     this.durationTime = duration;
70.     let second: number = duration % 60;
71.     let min: number = Number.parseInt((duration / 60).toString());
72.     let head = min < 10 ? `${'0'}${min}` : min;
73.     let end = second < 10 ? `${'0'}${second}` : second;
74.     this.durationStringTime = `${head}${':'}${end}`;
75.     this.flag = true;
76.   }
78.   /**
79.    * video component finish callback
80.    */
81.   finish() {
82.     this.isPlay = false;
83.     this.isOpacity = false;
84.   }
85. }

复制代码

12、Web

1、Web组件使用

1. struct Index {
2.   controller: WebController = new WebController();
4.   build() {
5.     Column() {
6.       // 加载网页
7.       Web({ src: 'https://developer.harmonyos.com/', controller: this.controller })
8.       // 加载本地html
9.       // Web({ src: $rawfile('index.html'), controller: this.controller })
10.     }
11.   }
12. }

复制代码

2、Web与js交互
下面示例中：
1、打开App，html回调confirm方法
2、点击按钮，app调用html的test方法

   鸿蒙页面使用如下

1. struct Index {
2.   controller: WebController = new WebController();
4.   build() {
5.     Column() {
6.       // 鸿蒙调用html的方法
7.       Button("鸿蒙按钮").onClick(() => {
8.         this.controller.runJavaScript({
9.           script: 'test()',
10.           callback: (result: string) => {
11.             prompt.showToast({
12.               duration: 5000,
13.               message: result
14.             });
15.           } });
16.       })
17.       Web({ src: $rawfile('index.html'), controller: this.controller })
18.         .javaScriptAccess(true)
19.         // 鸿蒙对外方法
20.         .onConfirm((event) => {
21.           AlertDialog.show({
22.             title: 'title',
23.             message: event.message,
24.             confirm: {
25.               value: 'onAlert',
26.               action: () => {
27.                 event.result.handleConfirm();
28.               }
29.             },
30.             cancel: () => {
31.               event.result.handleCancel();
32.             }
33.           })
34.           return true;
35.         })
36.         // 输出js的日志
37.         .onConsole((event) => {
38.           console.log('getMessage:' + event.message.getMessage());
39.           console.log('getMessageLevel:' + event.message.getMessageLevel());
40.           return false;
41.         })
42.     }
43.   }
44. }

复制代码

  html使用如下

1. <!DOCTYPE html>
2. <html>
3. <meta charset="utf-8">
4. <body>
5. </body>
6. <script type="text/javascript">
7.   <!--js回调鸿蒙的方法-->
8.   confirm("confirm message from html")
9.   <!--js对外方法-->
10.   function test() {
11.       return "This value is from index.html"
12.   }
14. </script>
15. </html>

复制代码

四、鸿蒙api

1、UIAbility启动模式

   UIAbility当前支持singleton(单实例模式)、multiton(多实例模式)和specified(指定实例模式)3种启动模式
  

• singleton（单实例模式）
  

   如果应用进程中该类型的UIAbility实例已经存在，则复用体系中的UIAbility实例.
  在module.json5设置文件中的"launchType"字段设置为"singleton"即可。

1. {
2.   "module": {
3.     // ...
4.     "abilities": [
5.       {
6.         "launchType": "singleton",
7.         // ...
8.       }
9.     ]
10.   }
11. }

复制代码

• standard（标准实例模式）
  

   每次调用startAbility()方法时，都会在应用进程中创建一个新的该类型UIAbility实例。即在最近任务列表中可以看到有多个该类型的UIAbility实例。

1. "launchType": "standard",

复制代码

• specified（指定实例模式）
  

针对一些特殊场景使用（例如文档应用中每次新建文档希望都能新建一个文档实例，重复打开一个已保存的文档希望打开的都是同一个文档实例）

1. "launchType": "specified",

复制代码

2、UIAbility组件生命周期

UIAbility的生命周期包罗Create、Foreground、Background、Destroy四个状态

需要注意的是：UIAbility没有WindowStageCreate、WindowStageDestroy，这两个是WindowStage的生命周期。
UIAbility实例创建完成之后，在进入Foreground之前，体系会创建一个WindowStage。WindowStage创建完成后会进入onWindowStageCreate()回调，可以在该回调中设置UI界面加载、设置WindowStage的变乱订阅。

3、toast

1. import prompt from '@ohos.promptAction';
3. Button("点击toast").onClick(() => {
4.   prompt.showToast({
5.     duration: 5000,
6.     message: '点击toast'
7.   });
8. })

复制代码

4、Preferences存储

   注意：初始化需要await，并且需要context参数，发起在EntryAbility的onCreate方法中

1. await sharePreferenceUtil.init(this.context);

复制代码

1. import dataPreferences from '@ohos.data.preferences';
3. const KEY_APP_FONT_SIZE = 'appFontSize';
4. /**
5. * SP工具类
6. */
7. export class SharePreferenceUtil {
8.   preferences: dataPreferences.Preferences;
10.   // 初始化(注意：初始化是异步方法，需要await)
11.   async init(context: Context) {
12.     this.preferences = await dataPreferences.getPreferences(context, 'myPreferences');
13.   }
15.   // 存储
16.   saveDefaultFontSize(fontSize: number) {
17.     this.preferences.has(KEY_APP_FONT_SIZE).then(async (isExist: boolean) => {
18.       if (!isExist) {
19.         await this.preferences.put(KEY_APP_FONT_SIZE, fontSize);
20.         this.preferences.flush();
21.       }
22.     }).catch((err: Error) => {
23.     });
24.   }
26.   // 更新
27.   async saveChangeFontSize(fontSize: number) {
28.     await this.preferences.put(KEY_APP_FONT_SIZE, fontSize);
29.     this.preferences.flush();
30.   }
32.   // 获取
33.   async getChangeFontSize() {
34.     let fontSize: number = 0;
35.     fontSize = await this.preferences.get(KEY_APP_FONT_SIZE, fontSize) as number;
36.     return fontSize;
37.   }
39.   // 删除
40.   async deleteChangeFontSize() {
41.     let deleteValue = this.preferences.delete(KEY_APP_FONT_SIZE);
42.     deleteValue.then(() => {
43.     }).catch((err: Error) => {
44.     });
45.   }
46. }
48. const sharePreferenceUtil = new SharePreferenceUtil();
50. export default sharePreferenceUtil;

复制代码

五、状态管理与数据同步

1、组件状态管理装饰器和@Builder装饰器：

组件状态管理装饰器用来管理组件中的状态，它们分别是：@State、@Prop、@Link。

• @State装饰的变量是组件内部的状态数据，当这些状态数据被修改时，将会调用所在组件的build方法举行UI革新。
  
• @Prop与@State有相同的语义，但初始化方式不同。@Prop装饰的变量必须使用其父组件提供的@State变量举行初始化，答应组件内部修改@Prop变量，但更改不会通知给父组件，即@Prop属于单向数据绑定。
  
• @Link装饰的变量可以和父组件的@State变量建立双向数据绑定，需要注意的是：@Link变量不能在组件内部举行初始化。
  
• @Builder装饰的方法用于界说组件的声明式UI形貌，在一个自界说组件内快速天生多个结构内容。
  

组件内的状态管理：@State
从父组件单向同步状态：@Prop
与父组件双向同步状态：@Link
监听状态变革：@Watch
跨组件层级双向同步状态：@Provide和@Consume
1、父页面同步数据给子页面：@Prop
2、子页面同步数据给父页面：@Link
下面示例中
1、父组件把clickIndex通过 Props 传递给子页面
2、点击子组件后，通过 Link 把修改后的clickIndex值传递给页面
3、其余子组件 Watch 了clickIndex，并同时修改组件中的isExpanded值

   页面Index.ets

1. import TestItem from './TestItem';
3. @Entry
4. @Component
5. struct Index {
6.   private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
7.   @State clickIndex: number = -1;
9.   build() {
10.     Column() {
11.       ForEach(this.arr, (item: number, index: number) => {
12.         TestItem({
13.           index: this.arr[index], //@Prop传递给子组件数据
14.           clickIndex: $clickIndex, //@Link双向绑定数据
15.         })
16.       }, item => item)
17.     }
18.     .width('100%')
19.     .height('100%')
20.   }
21. }

复制代码

  组件TestItem.ets

1. @Component
2. export default struct TestItem {
3.   @Prop index: number; //当前 item 序号
4.   @State isExpanded: boolean = false; //当前是否展开
5.   // @Link修饰是为了同步数据到父组件，@Watch是为了监听回调给onClickIndexChanged
6.   @Link @Watch('onClickIndexChanged') clickIndex: number; //点击的序号
8.   onClickIndexChanged() {
9.     this.isExpanded = this.clickIndex == this.index;
10.   }
12.   build() {
13.     Button(this.index + '、是否展开:' + this.isExpanded)
14.       .width('100%')
15.       .height(this.isExpanded ? 80 : 40)
16.       .fontSize(20)
17.       .fontColor(Color.White)
18.       .borderRadius(10)
19.       .backgroundColor(0x007DFF)
20.       .margin({ top: 10 })
21.       .onClick(() => {
22.         this.clickIndex = this.index;
23.       })
24.   }
25. }

复制代码

2、子组件callback 回调父页面

   子组件声明callback 方法

1. // 组件
2. @Component
3. export default struct TestItem {
4.   callback?: (index: number) => void;
6.   build() {
7.     Button('子组件')
8.       .width('100%')
9.       .height(40)
10.       .fontSize(20)
11.       .fontColor(Color.White)
12.       .borderRadius(10)
13.       .backgroundColor(0x007DFF)
14.       .onClick(() => {
15.         // this.clickIndex = this.index;
16.         if (this.callback !== undefined) {
17.           this.callback(123)
18.         }
19.       })
20.   }
21. }

复制代码

  父页面传入callback方法

1. TestItem({
2.   callback: (index:number): void => {
3.     console.warn("index:",index)
4.   }
5. })

复制代码

六、弹窗

1、告诫弹窗AlertDialog

1. AlertDialog.show(
2.   {
3.     title: '删除联系人', // 标题
4.     message: '是否需要删除所选联系人?', // 内容
5.     autoCancel: false, // 点击遮障层时，是否关闭弹窗。
6.     alignment: DialogAlignment.Bottom, // 弹窗在竖直方向的对齐方式
7.     offset: { dx: 0, dy: -20 }, // 弹窗相对alignment位置的偏移量
8.     primaryButton: {
9.       value: '取消',
10.       action: () => {
11.       }
12.     },
13.     secondaryButton: {
14.       value: '删除',
15.       fontColor: '#D94838',
16.       action: () => {
17.       }
18.     },
19.     cancel: () => { // 点击遮障层关闭dialog时的回调
20.     }
21.   }
22. )

复制代码

2、文本选择弹窗TextPickerDialog

1. @State select: number = 2;
2. private fruits: string[] = ['苹果', '橘子', '香蕉', '猕猴桃', '西瓜'];
4. TextPickerDialog.show({
5.   range: this.fruits, // 设置文本选择器的选择范围
6.   selected: this.select, // 设置初始选中项的索引值。
7.   onAccept: (value: TextPickerResult) => { // 点击弹窗中的“确定”按钮时触发该回调。
8.     // 设置select为按下确定按钮时候的选中项index，这样当弹窗再次弹出时显示选中的是上一次确定的选项
9.     this.select = value.index;
10.     console.info("TextPickerDialog:onAccept()" + JSON.stringify(value));
11.   },
12.   onCancel: () => { // 点击弹窗中的“取消”按钮时触发该回调。
13.     console.info("TextPickerDialog:onCancel()");
14.   },
15.   onChange: (value: TextPickerResult) => { // 滑动弹窗中的选择器使当前选中项改变时触发该回调。
16.     console.info("TextPickerDialog:onChange()" + JSON.stringify(value));
17.   }
18. })

复制代码

3、日期滑动选择弹窗DatePickerDialog

1. selectedDate: Date = new Date("2010-1-1")
3. DatePickerDialog.show({
4.   start: new Date("1900-1-1"), // 设置选择器的起始日期
5.   end: new Date("2023-12-31"), // 设置选择器的结束日期
6.   selected: this.selectedDate, // 设置当前选中的日期
7.   lunar: false,
8.   onAccept: (value: DatePickerResult) => { // 点击弹窗中的“确定”按钮时触发该回调
9.     // 通过Date的setFullYear方法设置按下确定按钮时的日期，这样当弹窗再次弹出时显示选中的是上一次确定的日期
10.     this.selectedDate.setFullYear(value.year, value.month, value.day)
11.     console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
12.   },
13.   onCancel: () => { // 点击弹窗中的“取消”按钮时触发该回调
14.     console.info("DatePickerDialog:onCancel()")
15.   },
16.   onChange: (value: DatePickerResult) => { // 滑动弹窗中的滑动选择器使当前选中项改变时触发该回调
17.     console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
18.   }
19. })

复制代码

4、自界说弹窗

   通过装饰器@CustomDialog界说的组件来实现，然后结合CustomDialogController来控制自界说弹窗的表现和隐蔽。
  

弹窗组件AddTargetDialog.ets绘制

1. @CustomDialog
2. export default struct AddTargetDialog {
3.   @State subtaskName: string = '';
4.   private controller?: CustomDialogController;
5.   onClickOk?: (value: string) => void;
7.   build() {
8.     Column() {
9.       Text('添加子目标')
10.         .width('100%')
11.         .fontSize('20fp')
12.         .fontWeight(500)
13.         .fontColor('#182431')
14.         .textAlign(TextAlign.Start)
15.       TextInput({ placeholder: '请输入子目标名称'})
16.         .placeholderColor(Color.Grey)
17.         .placeholderFont({ size: '16fp'})
18.         .caretColor(Color.Blue)
19.         .backgroundColor('#0D182431')
20.         .width('100%')
21.         .height('40%')
22.         .margin({ top: '6%' })
23.         .fontSize('16fp')
24.         .fontColor("#182431")
25.         .onChange((value: string) => {
26.           this.subtaskName = value;
27.         })
28.       Blank()
29.       Row() {
30.         Button('取消')
31.           .dialogButtonStyle()
32.           .onClick(() => {
33.             this.controller?.close();
34.           })
35.         Divider()
36.           .vertical(true)
37.         Button('确定')
38.           .dialogButtonStyle()
39.           .onClick(() => {
40.             if (this.onClickOk !== undefined) {
41.               this.onClickOk(this.subtaskName);
42.             }
43.           })
44.       }
45.       .width('70%')
46.       .height('10%')
47.       .justifyContent(FlexAlign.SpaceBetween)
48.     }
49.     .padding('24vp')
50.     .height('168vp')
51.     .width('90.3%')
52.     .borderRadius(32)
53.     .backgroundColor(Color.White)
54.   }
55. }
57. /**
58. * Custom button style.
59. */
60. @Extend(Button) function dialogButtonStyle() {
61.   .fontSize('16fp')
62.   .height('32vp')
63.   .width('96vp')
64.   .backgroundColor(Color.White)
65.   .fontColor('#007DFF')
66. }

复制代码

页面使用

1. @Entry
2. @Component
3. struct Index {
4.   dialogController: CustomDialogController = new CustomDialogController({
5.     builder: AddTargetDialog({
6.       onClickOk: (value: string): void => {
7.         console.warn("value:",value)
8.         this.dialogController.close();// 关闭
9.       }
10.     }),
11.     alignment: DialogAlignment.Bottom,
12.     offset: {
13.       dx: 0,
14.       dy: '-16vp'
15.     },
16.     customStyle: true,
17.     autoCancel: false
18.   });
20.   build() {
21.     Button("点击打开弹窗").onClick(()=>{
22.       this.dialogController.open()// 打开
23.     })
24.   }
25. }

复制代码

七、动画

添加animation属性就好，由State驱动。

1. struct Index {
2.   @State iconWidth: number = 30;
4.   onPageShow() {
5.     this.iconWidth = 90;
6.   }
8.   build() {
9.     Column() {
10.       Image($r('app.media.icon'))
11.         .width(this.iconWidth)
12.         .margin(10)
13.         .objectFit(ImageFit.Contain)
14.         .animation({
15.           duration: 2000,
16.           tempo: 3.0, //动画的播放速度
17.           delay: 0,
18.           curve: Curve.Linear,
19.           playMode: PlayMode.Normal,
20.           iterations: -1, //播放次数，默认一次，设置为-1时表示无限次播放。
21.         })
22.     }
23.   }
24. }

复制代码

八、网络请求

   注意：多个请求可以使用同一个httpRequest对象，httpRequest对象不能复用，由于它支持request、destroy、on和off方法，例如取消网络请求httpRequest.destroy();

1. import http from '@ohos.net.http';
3. let httpRequest = http.createHttp();
4. let promise = httpRequest.request(
5.   "http://www.baidu.com",
6.   {
7.     // 请求方式
8.     method: http.RequestMethod.POST,
9.     // 请求的额外数据。
10.     extraData: {
11.       "param1": "value1",
12.       "param2": "value2",
13.     },
14.     // 可选，默认为60s
15.     connectTimeout: 60000,
16.     // 可选，默认为60s
17.     readTimeout: 60000,
18.     // 开发者根据自身业务需要添加header字段
19.     header: {
20.       'Content-Type': 'application/json'
21.     }
22.   });
23. promise.then((data) => {
24.   if (data.responseCode === http.ResponseCode.OK) {
25.     console.info('Result:' + data.result);
26.     console.info('code:' + data.responseCode);
27.   }
28. }).catch((err) => {
29.   console.info('error:' + JSON.stringify(err));
30. });

复制代码

九、路由

在如下目录下注册页面

1. /entry/src/main/resources/base/profile/main_pages.json

复制代码

  跳转代码

1. import router from '@ohos.router';
3. router.pushUrl({
4.   url: 'pages/SecondPage',
5.   params: {
6.     src: 'Index页面传来的数据',
7.   }
8. }, router.RouterMode.Single)

复制代码

鸿蒙参考资料

鸿蒙第一课视频，对应代码Codelabs
完整版的功能demo
官方文档
HarmonyOS点石成金
鸿蒙体系系列教程6-鸿蒙体系项目结构分析
鸿蒙开辟者学习笔记

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