返回发烧友论坛
发 帖  

[文章]HarmonyOS应用开发-HelloWorld应用开发E2E体验

emitter
2020-09-24 11:10:22
阅读量0
应用开发HarmonyOS鸿蒙系统鸿蒙OS
0
0
1. 介绍

智慧屏是首个搭载HarmonyOS的终端产品，通过HarmonyOS智慧屏多页签应用开发模板，让开发者了解HarmonyOS应用开发的全流程，20分钟快速上手，实现从工程创建到应用运行全过程。

您将建立什么
在这个CodeLab中，您将使用HUAWEIDevEco Studio开发HarmonyOS智慧屏多页签应用，完成工程创建、编译构建，并实现HarmonyOS智慧屏部署和运行。
您将学到什么

  • 如何创建一个HarmonyOS     Project
  • 编译构建hap包
  • 将hap包部署到智慧屏远程模拟器上，并运行
硬件要求

  • 操作系统：Windows10     64位
  • 内存：8G及以上
  • 硬盘：100G及以上
  • 分辨率：1280*800及以上
软件要求

  • 安装DevEco     Studio和Node.js，详情请参考下载和安装软件
  • 设置DevEco     Studio开发环境，DevEco     Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境
         1.如果可以直接访问Internet，只需进行下载HarmonyOS SDK操作
         2.如果网络不能直接访问Internet，需要通过代理服务器才可以访问，请参考配置开发环境
技能要求

  • Java基础开发能力
  • JavaScript/HML(HarmonyOS Markup Language)     /CSS 基础开发能力

2. 代码开发1. 工程创建在File > New > New Project来创建一个新工程，选择Tab Feature Ability(JS)模板：
工程创建.png

填写工程基本信息，如命名工程名和包名：
工程创建.png

工程创建完成后，目录结构如下：
工2.png

目录结构中文件分类及作用：

  • .hml 文件布局结构描述文件
  • .css页面样式描述文件
  • .js页面显示和用户交互文件
  • app.js 用于全局应用生命周期管理
  • pages 用于存放组件页面
  • common 用于存放公共资源文件。如：媒体资源、自定义组件和JS文件
  • resources 用于存放资源配置文件。如：全局样式、多分辨率加载等配置文件
  • i18n用于存放全球化资源

2. 编码本次CodeLab需要编写布局文件、添加图片资源以及修改模块配置。
2.1 开发多页签界面布局及全球化资源
1、编辑布局文件entry/src/main/js/default/pages/index/index.hml
  1. <div class="container">
  2.     <div class="tv_box">
  3.         <div class="title_box">
  4.             <text class="title">{{$t('Strings.title')}}
  5.             </text>
  6.             <button type="circle" icon="{{icon_src}}" class="setting_box" onfocus="iconFocusFunc"
  7.                 onblur="iconBlurFunc"></button>
  8.         </div>
  9.         <tabs class="tab_box">
  10.             <tab-bar mode="scrollable" class="bar_box">
  11.                 <block for="{{item in $t('Strings.tab')}}">
  12.                     <text class="tab_text">{{item}}
  13.                     </text>
  14.                 </block>
  15.             </tab-bar>
  16.             <tab-content>
  17.                 <block for="[1,2,3,4,5,6,7,8,9]">
  18.                     <div class="content_box">
  19.                         <list class="content_img">
  20.                             <block for="{{imgIndex in $t('Strings.images')}}">
  21.                                 <list-item type="listItem" class="list_img">
  22.                                     <image focusable="true" class="tab_img" src="{{imgIndex}}"></image>
  23.                                 </list-item>
  24.                             </block>
  25.                         </list>
  26.                         <div class="subtitle_box">
  27.                             <text class="subtitle">{{$t('Strings.subtitle')}}
  28.                             </text>
  29.                         </div>
  30.                         <list class="img_list">
  31.                             <block for="{{detailItem in $t('Strings.details')}}">
  32.                                 <list-item type="listItem" class="list_box">
  33.                                     <image focusable="true" class="img_img" src="{{detailItem.pic}}"></image>
  34.                                     <text class="img_text">{{detailItem.text}}
  35.                                     </text>
  36.                                 </list-item>
  37.                             </block>
  38.                         </list>
  39.                     </div>
  40.                 </block>
  41.             </tab-content>
  42.         </tabs>
  43.     </div>
  44. </div>
复制代码
2、编辑全球化资源文件entry/src/main/js/default/i18n/zh-CN.json
  1. {
  2.     "Strings": {
  3.         "title": "华为智慧屏",
  4.         "subtitle": "历史观看",
  5.         "tab": [
  6.             "首页",
  7.             "电影",
  8.             "电视剧",
  9.             "购物",
  10.             "溪村风景",
  11.             "图册",
  12.             "少儿",
  13.             "VIP"
  14.         ],
  15.         "images": [
  16.             "/common/img-large1.png",
  17.             "/common/img-large2.png",
  18.             "/common/img-large3.png",
  19.             "/common/img-large4.png"
  20.         ],
  21.         "text": "文本内容",
  22.         "details": [
  23.             {
  24.                 "text": "花园",
  25.                 "pic": "/common/img-small1.png"
  26.             },
  27.             {
  28.                 "text": "风景一角",
  29.                 "pic": "/common/img-small2.png"
  30.             },
  31.             {
  32.                 "text": "蓝天白云",
  33.                 "pic": "/common/img-small3.png"
  34.             },
  35.             {
  36.                 "text": "池塘",
  37.                 "pic": "/common/img-small4.png"
  38.             },
  39.             {
  40.                 "text": "办公一角",
  41.                 "pic": "/common/img-small5.png"
  42.             }
  43.         ]
  44.     },
  45.     "Files": {}
  46. }
复制代码
2.2 添加图片资源
将CodeLabPC桌面CodeLab/common目录下的资源拷贝到entry/src/main/js/default/commom。
注：可以在common目录点击右键，通过Show inExplorer快速进入目录。
2.3修改模块配置文件
修改entry/src/main/config.json文件，将designWidth的值修改为1024，并将autoDesignWidth的值修改为false。
  1. "js": [
  2.     {
  3.         "pages": [
  4.             "pages/index/index"
  5.         ],
  6.         "name": "default",
  7.         "window": {
  8.             "designWidth": 1024,
  9.             "autoDesignWidth": false
  10.         }
  11.     }
  12. ]
复制代码

3. 编译构建点击Build > Build APP(s)/Hap(s) > Build DebugHap(s) 进行代码编译构建，
编译.png

等待系统编译，在控制台看到编译成功提示信息即可。


4. 部署并运行1. 启动模拟器点击Tools>HVD Manager启动模拟器。

111.png

注：使用模拟器需要登录实名认证的华为开发者账号，请按照提示完成登录及授权。
选择智慧屏模拟器（TV），点击启动按钮，如下图所示。
222.png

待模拟器启动成功后，出现下图所示的界面。
333.png


2. 部署应用点击Run > Run ‘Entry'，部署应用。
444.png

选择模拟器设备。
555.png

应用程序运行如下
666.png

至此，您已经成功开发出第一个HarmonyOS应用，欢迎进入HarmonyOS世界！

5. 恭喜您您已经成功完成了HelloWorld应用开发E2E体验，并学到了：

  • 如何创建一个HarmonyOS     Project
  • 编译构建hap包
  • 将hap包部署到智慧屏远程模拟器上并运行


举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友