HarmonyOS Next 应用开发快速入门案例原创

鸿蒙时代

发布于 2024-9-27 09:54

浏览

0收藏

项目代码gitee地址
(https://gitee.com/li-yangshui-and-jiaolong/HarmonyOS-Next-App/tree/master/MyApplication)
开源协议使用：Apache License 2.0 ，代码包支持免费使用，可进行二次开发后选择开源或闭源。
一、创建项目
1.创建项目，选择Application
HarmonyOS Next 应用开发快速入门案例-鸿蒙开发者社区
2.配置项目

3.在AppScope文件下修改自定义项目配置

在resources>base>element>string.json中修改“app_name”值，该值表示“应用名称”。

在app.json5中修改“vender”值，该值表示“应用程序供应商”。
4.在项目下的resource>base>media下添加图片

HarmonyOS Next 应用开发快速入门案例-鸿蒙开发者社区

二、创建卡片widget
1.创建微、小、中、大卡片
HarmonyOS Next 应用开发快速入门案例-鸿蒙开发者社区

2.依次创建卡片

HarmonyOS Next 应用开发快速入门案例-鸿蒙开发者社区

3.卡片创建完成，修改卡片配置代码

HarmonyOS Next 应用开发快速入门案例-鸿蒙开发者社区
4.卡片代码如下：
widget_wk代码：

@Entry
@Component
struct Widget_wkCard {
  /*
   * The title.
   */
  readonly TITLE: string = 'Hello World';

  /*
   * The action type.
   */
  readonly ACTION_TYPE: string = 'router';

  /*
   * The ability name.
   */
  readonly ABILITY_NAME: string = 'EntryAbility';

  /*
   * The message.
   */
  readonly MESSAGE: string = 'add detail';

  /*
   * The with percentage setting.
   */
  readonly FULL_WIDTH_PERCENT: string = '100%';

  /*
   * The height percentage setting.
   */
  readonly FULL_HEIGHT_PERCENT: string = '100%';

  build() {
    Row() {
      Image($r("app.media.jltf")).width(28)
      Text("你好，鸿蒙元服务！").fontSize(12).fontWeight(600)
    }
    .justifyContent(FlexAlign.Center)
    .width(this.FULL_WIDTH_PERCENT)
    .height(this.FULL_HEIGHT_PERCENT)
.backgroundColor("#ff8fc7ff")//添加背景色
    .onClick(() => {
      postCardAction(this, {
        "action": this.ACTION_TYPE,
        "abilityName": this.ABILITY_NAME,
        "params": {
          "message": this.MESSAGE
        }
      });
    })
  }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.

widget代码

@Entry
@Component
struct WidgetCard {
  /*
   * The max lines.
   */
  readonly MAX_LINES: number = 1;

  /*
   * The action type.
   */
  readonly ACTION_TYPE: string = 'router';

  /*
   * The message.
   */
  readonly MESSAGE: string = 'add detail';

  /*
   * The ability name.
   */
  readonly ABILITY_NAME: string = 'EntryAbility';

  /*
   * The with percentage setting.
   */
  readonly FULL_WIDTH_PERCENT: string = '100%';

  /*
   * The height percentage setting.
   */
  readonly FULL_HEIGHT_PERCENT: string = '100%';

  build() {
    Column() {
      Image($r("app.media.jltf")).width(80)
      Text("你好，鸿蒙元服务！").fontSize(12).fontWeight(600)
        .margin({top:10})
    }
    .width(this.FULL_WIDTH_PERCENT)
    .height(this.FULL_HEIGHT_PERCENT)
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
.backgroundColor("#ff8fc7ff")//添加背景色
    .onClick(() => {
      postCardAction(this, {
        "action": this.ACTION_TYPE,
        "abilityName": this.ABILITY_NAME,
        "params": {
          "message": this.MESSAGE
        }
      });
    })
  }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.

widget_zk代码

@Entry
@Component
struct Widget_zkCard {
  /*
   * The title.
   */
  readonly TITLE: string = 'Hello World';

  /*
   * The action type.
   */
  readonly ACTION_TYPE: string = 'router';

  /*
   * The ability name.
   */
  readonly ABILITY_NAME: string = 'EntryAbility';

  /*
   * The message.
   */
  readonly MESSAGE: string = 'add detail';

  /*
   * The with percentage setting.
   */
  readonly FULL_WIDTH_PERCENT: string = '100%';

  /*
   * The height percentage setting.
   */
  readonly FULL_HEIGHT_PERCENT: string = '100%';

  build() {
    Column() {
      Image($r("app.media.jltf")).width(80)
      Text("你好，鸿蒙元服务！").fontSize(16).fontWeight(600)
        .margin({top:10})
    }
    .width(this.FULL_WIDTH_PERCENT)
    .height(this.FULL_HEIGHT_PERCENT)
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
.backgroundColor("#ff8fc7ff")//添加背景色
    .onClick(() => {
      postCardAction(this, {
        "action": this.ACTION_TYPE,
        "abilityName": this.ABILITY_NAME,
        "params": {
          "message": this.MESSAGE
        }
      });
    })
  }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.

widget_dk代码：

@Entry
@Component
struct Widget_dkCard {
  /*
   * The title.
   */
  readonly TITLE: string = 'Hello World';

  /*
   * The action type.
   */
  readonly ACTION_TYPE: string = 'router';

  /*
   * The ability name.
   */
  readonly ABILITY_NAME: string = 'EntryAbility';

  /*
   * The message.
   */
  readonly MESSAGE: string = 'add detail';

  /*
   * The with percentage setting.
   */
  readonly FULL_WIDTH_PERCENT: string = '100%';

  /*
   * The height percentage setting.
   */
  readonly FULL_HEIGHT_PERCENT: string = '100%';

  build() {
    Column() {
      Image($r("app.media.jltf")).width(150)
      Text("你好，鸿蒙元服务！").fontSize(20).fontWeight(600)
        .margin({top:10})
    }
    .width(this.FULL_WIDTH_PERCENT)
    .height(this.FULL_HEIGHT_PERCENT)
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
.backgroundColor("#ff8fc7ff")//添加背景色
    .onClick(() => {
      postCardAction(this, {
        "action": this.ACTION_TYPE,
        "abilityName": this.ABILITY_NAME,
        "params": {
          "message": this.MESSAGE
        }
      });
    })
  }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.

三、创建应用page
1.修改pages/Index.ets中的代码，代码如下：

import router from '@ohos.router'
@Entry
@Component
struct Index {
  @State title: string = '蛟龙腾飞欢迎您'

  build() {
    Row() {
      Column() {
        //Image组件，展示logo
        Image($r("app.media.jltf")).width(150).borderRadius(12)
        //Text组件，展示文字详情
        Text(this.title)
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
          .margin(10)
        //Button组件，跳转下一页
        Button("下一步").type(ButtonType.Capsule)
          .onClick(()=>{
            router.pushUrl({
              url:"pages/test"
            })
          })
      }
      .width('100%')
    }
    .height('100%')
    .backgroundColor("#ff8fc7ff")//添加背景色
  }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.

2.创建新的page
HarmonyOS Next 应用开发快速入门案例-鸿蒙开发者社区

3.新的page写入代码如下：

import router from '@ohos.router'
@Entry
@Component
struct Test {
  @State text1: string = '鸿蒙原生应用'
  @State text2: string = '快速上手练习'

  build() {
    Row() {
      Column() {
        Text(this.text1)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
        Text(this.text2)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .margin(10)
        //Button组件，返回上一页
        Button("返回").type(ButtonType.Capsule)
          .onClick(()=>{
            router.back()
          })
      }
      .width('100%')
    }
    .height('100%')
    .backgroundColor("#ff8fc7ff")//添加背景色
  }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.

四、项目效果
1.预览器效果
Widget：
HarmonyOS Next 应用开发快速入门案例-鸿蒙开发者社区 !
Page：

五、更换为OpenHarmony应用
打开entry下的build-profile.json5文件，更换“targets”字段中的“runtimeOS”属性值，点击右上方的Sync Now同步就。