鸿蒙HarmonyOS Next 应用开辟快速入门案例

玛卡巴卡的卡巴卡玛 发表于 2024-10-5 04:21:59

HarmonyOS Next 应用开辟快速入门案例

项目代码gitee地址
( https://gitee.com/li-yangshui-and-jiaolong/HarmonyOS-Next-App/tree/master/MyApplication)
开源协议使用：Apache License 2.0 ，代码包支持免费使用，可举行二次开辟后选择开源或闭源。
一、创建项目
1.创建项目，选择Application
https://img-blog.csdnimg.cn/img_convert/c0e8d4b6fc616de46dc2031c375d1828.png
2.配置项目
https://img-blog.csdnimg.cn/img_convert/24483e5e679c3a6f4fe8ac784198477a.png
3.在AppScope文件下修改自定义项目配置
https://img-blog.csdnimg.cn/img_convert/638b293875320c9b274d30367cfcdab8.png
在resources>base>element>string.json中修改“app_name”值，该值表现“应用名称”。
https://img-blog.csdnimg.cn/img_convert/b85732fc81fb27a254ffd6744b72a8d5.png
在app.json5中修改“vender”值，该值表现“应用程序供应商”。
4.在项目下的resource>base>media下添加图片
https://img-blog.csdnimg.cn/img_convert/1a76b1090b37555a561400d3365f110c.png
二、创建卡片widget
1.创建微、小、中、大卡片
https://img-blog.csdnimg.cn/img_convert/b8046c514095880ba0da281467973ea2.png
https://img-blog.csdnimg.cn/img_convert/1fd62d8b08d8ae956f42a57842288445.png
https://img-blog.csdnimg.cn/img_convert/685b055bc568088179d86b7d7f9b364a.png
2.依次创建卡片
https://img-blog.csdnimg.cn/img_convert/686c5febd108620246a9c5d68cc5f7d6.png
https://img-blog.csdnimg.cn/img_convert/ed826b56d64c0de03c99cfcd00b646b0.png
https://img-blog.csdnimg.cn/img_convert/5b1bdabfdb3f4e5c2cd9aaa841c28715.png
3.卡片创建完成，修改卡片配置代码
https://img-blog.csdnimg.cn/img_convert/49d5e3170d2d990cd2ce760ef715a368.png
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.
                  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.
                  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.
                  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.
                  三、创建应用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.
                  2.创建新的page
https://img-blog.csdnimg.cn/img_convert/11c0d28216118778f4ebd7f84142e0a1.png
https://img-blog.csdnimg.cn/img_convert/ffd570329a746d7b3b675a4cea232603.png
https://img-blog.csdnimg.cn/img_convert/b33222347fcc403d83fcd33afb2b8b29.png
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.
                  四、项目结果
1.预览器结果
Widget：
https://img-blog.csdnimg.cn/img_convert/aac6282d3019d786a4c823a070cbb87e.png
https://img-blog.csdnimg.cn/img_convert/c2eef6d132bf71734e35d6c7b12debc1.png
!
Page：
https://img-blog.csdnimg.cn/img_convert/5e0e57703cd653da25c5681cbfae4e0a.png
五、更换为OpenHarmony应用
打开entry下的build-profile.json5文件，更换“targets”字段中的“runtimeOS”属性值，点击右上方的Sync Now同步就。
https://img-blog.csdnimg.cn/img_convert/d360e28bf3f696562ce0bbc61c1b1228.png
https://img-blog.csdnimg.cn/img_convert/26878e89aa05b0b71288a17882e0ed34.png

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

页: [1]

IT评测·应用市场-qidao123.com技术社区's Archiver

HarmonyOS Next 应用开辟快速入门案例