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

玛卡巴卡的卡巴卡玛  论坛元老 | 2024-10-5 04:21:59 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1015|帖子 1015|积分 3045

项目代码gitee地址
     ( https://gitee.com/li-yangshui-and-jiaolong/HarmonyOS-Next-App/tree/master/MyApplication)
     开源协议使用：Apache License 2.0 ，代码包支持免费使用，可举行二次开辟后选择开源或闭源。
     一、创建项目
     1.创建项目，选择Application
     

     2.配置项目
     

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

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

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

     二、创建卡片widget
     1.创建微、小、中、大卡片
     

     

     

     2.依次创建卡片
     

     

     

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

     4.卡片代码如下：
     widget_wk代码：
                                   登录后复制                        
  1. @Entry
  2. @Component
  3. struct Widget_wkCard {
  4.   /*
  5.    * The title.
  6.    */
  7.   readonly TITLE: string = 'Hello World';
  9.   /*
  10.    * The action type.
  11.    */
  12.   readonly ACTION_TYPE: string = 'router';
  14.   /*
  15.    * The ability name.
  16.    */
  17.   readonly ABILITY_NAME: string = 'EntryAbility';
  19.   /*
  20.    * The message.
  21.    */
  22.   readonly MESSAGE: string = 'add detail';
  24.   /*
  25.    * The with percentage setting.
  26.    */
  27.   readonly FULL_WIDTH_PERCENT: string = '100%';
  29.   /*
  30.    * The height percentage setting.
  31.    */
  32.   readonly FULL_HEIGHT_PERCENT: string = '100%';
  34.   build() {
  35.     Row() {
  36.       Image($r("app.media.jltf")).width(28)
  37.       Text("你好，鸿蒙元服务！").fontSize(12).fontWeight(600)
  38.     }
  39.     .justifyContent(FlexAlign.Center)
  40.     .width(this.FULL_WIDTH_PERCENT)
  41.     .height(this.FULL_HEIGHT_PERCENT)
  42. .backgroundColor("#ff8fc7ff")//添加背景色
  43.     .onClick(() => {
  44.       postCardAction(this, {
  45.         "action": this.ACTION_TYPE,
  46.         "abilityName": this.ABILITY_NAME,
  47.         "params": {
  48.           "message": this.MESSAGE
  49.         }
  50.       });
  51.     })
  52.   }
  53. }
复制代码
      

  • 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代码
                                   登录后复制                        
  1. @Entry
  2. @Component
  3. struct WidgetCard {
  4.   /*
  5.    * The max lines.
  6.    */
  7.   readonly MAX_LINES: number = 1;
  9.   /*
  10.    * The action type.
  11.    */
  12.   readonly ACTION_TYPE: string = 'router';
  14.   /*
  15.    * The message.
  16.    */
  17.   readonly MESSAGE: string = 'add detail';
  19.   /*
  20.    * The ability name.
  21.    */
  22.   readonly ABILITY_NAME: string = 'EntryAbility';
  24.   /*
  25.    * The with percentage setting.
  26.    */
  27.   readonly FULL_WIDTH_PERCENT: string = '100%';
  29.   /*
  30.    * The height percentage setting.
  31.    */
  32.   readonly FULL_HEIGHT_PERCENT: string = '100%';
  34.   build() {
  35.     Column() {
  36.       Image($r("app.media.jltf")).width(80)
  37.       Text("你好，鸿蒙元服务！").fontSize(12).fontWeight(600)
  38.         .margin({top:10})
  39.     }
  40.     .width(this.FULL_WIDTH_PERCENT)
  41.     .height(this.FULL_HEIGHT_PERCENT)
  42.     .justifyContent(FlexAlign.Center)
  43.     .alignItems(HorizontalAlign.Center)
  44. .backgroundColor("#ff8fc7ff")//添加背景色
  45.     .onClick(() => {
  46.       postCardAction(this, {
  47.         "action": this.ACTION_TYPE,
  48.         "abilityName": this.ABILITY_NAME,
  49.         "params": {
  50.           "message": this.MESSAGE
  51.         }
  52.       });
  53.     })
  54.   }
  55. }
复制代码
      

  • 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代码
                                   登录后复制                        
  1. @Entry
  2. @Component
  3. struct Widget_zkCard {
  4.   /*
  5.    * The title.
  6.    */
  7.   readonly TITLE: string = 'Hello World';
  9.   /*
  10.    * The action type.
  11.    */
  12.   readonly ACTION_TYPE: string = 'router';
  14.   /*
  15.    * The ability name.
  16.    */
  17.   readonly ABILITY_NAME: string = 'EntryAbility';
  19.   /*
  20.    * The message.
  21.    */
  22.   readonly MESSAGE: string = 'add detail';
  24.   /*
  25.    * The with percentage setting.
  26.    */
  27.   readonly FULL_WIDTH_PERCENT: string = '100%';
  29.   /*
  30.    * The height percentage setting.
  31.    */
  32.   readonly FULL_HEIGHT_PERCENT: string = '100%';
  34.   build() {
  35.     Column() {
  36.       Image($r("app.media.jltf")).width(80)
  37.       Text("你好，鸿蒙元服务！").fontSize(16).fontWeight(600)
  38.         .margin({top:10})
  39.     }
  40.     .width(this.FULL_WIDTH_PERCENT)
  41.     .height(this.FULL_HEIGHT_PERCENT)
  42.     .justifyContent(FlexAlign.Center)
  43.     .alignItems(HorizontalAlign.Center)
  44. .backgroundColor("#ff8fc7ff")//添加背景色
  45.     .onClick(() => {
  46.       postCardAction(this, {
  47.         "action": this.ACTION_TYPE,
  48.         "abilityName": this.ABILITY_NAME,
  49.         "params": {
  50.           "message": this.MESSAGE
  51.         }
  52.       });
  53.     })
  54.   }
  55. }
复制代码
      

  • 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代码：
                                   登录后复制                        
  1. @Entry
  2. @Component
  3. struct Widget_dkCard {
  4.   /*
  5.    * The title.
  6.    */
  7.   readonly TITLE: string = 'Hello World';
  9.   /*
  10.    * The action type.
  11.    */
  12.   readonly ACTION_TYPE: string = 'router';
  14.   /*
  15.    * The ability name.
  16.    */
  17.   readonly ABILITY_NAME: string = 'EntryAbility';
  19.   /*
  20.    * The message.
  21.    */
  22.   readonly MESSAGE: string = 'add detail';
  24.   /*
  25.    * The with percentage setting.
  26.    */
  27.   readonly FULL_WIDTH_PERCENT: string = '100%';
  29.   /*
  30.    * The height percentage setting.
  31.    */
  32.   readonly FULL_HEIGHT_PERCENT: string = '100%';
  34.   build() {
  35.     Column() {
  36.       Image($r("app.media.jltf")).width(150)
  37.       Text("你好，鸿蒙元服务！").fontSize(20).fontWeight(600)
  38.         .margin({top:10})
  39.     }
  40.     .width(this.FULL_WIDTH_PERCENT)
  41.     .height(this.FULL_HEIGHT_PERCENT)
  42.     .justifyContent(FlexAlign.Center)
  43.     .alignItems(HorizontalAlign.Center)
  44. .backgroundColor("#ff8fc7ff")//添加背景色
  45.     .onClick(() => {
  46.       postCardAction(this, {
  47.         "action": this.ACTION_TYPE,
  48.         "abilityName": this.ABILITY_NAME,
  49.         "params": {
  50.           "message": this.MESSAGE
  51.         }
  52.       });
  53.     })
  54.   }
  55. }
复制代码
      

  • 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中的代码，代码如下：
                                   登录后复制                        
  1. import router from '@ohos.router'
  2. @Entry
  3. @Component
  4. struct Index {
  5.   @State title: string = '蛟龙腾飞欢迎您'
  7.   build() {
  8.     Row() {
  9.       Column() {
  10.         //Image组件，展示logo
  11.         Image($r("app.media.jltf")).width(150).borderRadius(12)
  12.         //Text组件，展示文字详情
  13.         Text(this.title)
  14.           .fontSize(24)
  15.           .fontWeight(FontWeight.Bold)
  16.           .margin(10)
  17.         //Button组件，跳转下一页
  18.         Button("下一步").type(ButtonType.Capsule)
  19.           .onClick(()=>{
  20.             router.pushUrl({
  21.               url:"pages/test"
  22.             })
  23.           })
  24.       }
  25.       .width('100%')
  26.     }
  27.     .height('100%')
  28.     .backgroundColor("#ff8fc7ff")//添加背景色
  29.   }
  30. }
复制代码
      

  • 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
     

     

     

     3.新的page写入代码如下：
                                   登录后复制                        
  1. import router from '@ohos.router'
  2. @Entry
  3. @Component
  4. struct Test {
  5.   @State text1: string = '鸿蒙原生应用'
  6.   @State text2: string = '快速上手练习'
  8.   build() {
  9.     Row() {
  10.       Column() {
  11.         Text(this.text1)
  12.           .fontSize(30)
  13.           .fontWeight(FontWeight.Bold)
  14.         Text(this.text2)
  15.           .fontSize(30)
  16.           .fontWeight(FontWeight.Bold)
  17.           .margin(10)
  18.         //Button组件，返回上一页
  19.         Button("返回").type(ButtonType.Capsule)
  20.           .onClick(()=>{
  21.             router.back()
  22.           })
  23.       }
  24.       .width('100%')
  25.     }
  26.     .height('100%')
  27.     .backgroundColor("#ff8fc7ff")//添加背景色
  28.   }
  29. }
复制代码
      

  • 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：
     

     

     !
     Page：
     

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

     


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

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

玛卡巴卡的卡巴卡玛

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表