|
|
HarmonyOS应用开发-HelloWorld应用开发E2E体验, 
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 （53.03 KB, 下载次数: 0）
下载附件 保存到相册
半小时前 上传
填写工程基本信息，如命名工程名和包名：
工程创建.png （57.14 KB, 下载次数: 0）
下载附件 保存到相册
半小时前 上传
工程创建完成后，目录结构如下：
工2.png （143.95 KB, 下载次数: 0）
下载附件 保存到相册
半小时前 上传
目录结构中文件分类及作用：
- .hml 文件布局结构描述文件
- .css页面样式描述文件
- .js页面显示和用户交互文件
- app.js 用于全局应用生命周期管理
- pages 用于存放组件页面
- common 用于存放公共资源文件。如：媒体资源、自定义组件和JS文件
- resources 用于存放资源配置文件。如：全局样式、多分辨率加载等配置文件
- i18n用于存放全球化资源
2. 编码本次CodeLab需要编写布局文件、添加图片资源以及修改模块配置。
2.1 开发多页签界面布局及全球化资源
1、编辑布局文件entry/src/main/js/default/pages/index/index.hml
- <div class=“container“>
- <div class=“tv_box“>
- <div class=“title_box“>
- <text class=“title“>{{$t（\“Strings.title\“）}}
- </text>
- <button type=“circle“ icon=“{{icon_src}}“ class=“setting_box“ onfocus=“iconFocusFunc“
- onblur=“iconBluRFunc“></button>
- </div>
- <tabs class=“tab_box“>
- <tab-bar mode=“scrollable“ class=“bar_box“>
- <block for=“{{item in $t（\“Strings.tab\“）}}“>
- <text class=“tab_text“>{{item}}
- </text>
- </block>
- </tab-bar>
- <tab-content>
- <block for=“[1,2,3,4,5,6,7,8,9]“>
- <div class=“content_box“>
- <list class=“content_img“>
- <block for=“{{imgIndex in $t（\“Strings.images\“）}}“>
- <list-item type=“listItem“ class=“list_img“>
- <image focusable=“true“ class=“tab_img“ src=“{{imgIndex}}“></image>
- </list-item>
- </block>
- </list>
- <div class=“subtitle_box“>
- <text class=“subtitle“>{{$t（\“Strings.subtitle\“）}}
- </text>
- </div>
- <list class=“img_list“>
- <block for=“{{detailItem in $t（\“Strings.details\“）}}“>
- <list-item type=“listItem“ class=“list_box“>
- <image focusable=“true“ class=“img_img“ src=“{{detailItem.pic}}“></image>
- <text class=“img_text“>{{detailItem.text}}
- </text>
- </list-item>
- </block>
- </list>
- </div>
- </block>
- </tab-content>
- </tabs>
- </div>
- </div>
-
复制代码 2、编辑全球化资源文件entry/src/main/js/default/i18n/zh-CN.json
- {
- “Strings“: {
- “title“: “华为智慧屏“,
- “subtitle“: “历史观看“,
- “tab“: [
- “首页“,
- “电影“,
- “电视剧“,
- “购物“,
- “溪村风景“,
- “图册“,
- “少儿“,
- “VIP“
- ],
- “images“: [
- “/common/img-large1.png“,
- “/common/img-large2.png“,
- “/common/img-large3.png“,
- “/common/img-large4.png“
- ],
- “text“: “文本内容“,
- “details“: [
- {
- “text“: “花园“,
- “pic“: “/common/img-small1.png“
- },
- {
- “text“: “风景一角“,
- “pic“: “/common/img-small2.png“
- },
- {
- “text“: “蓝天白云“,
- “pic“: “/common/img-small3.png“
- },
- {
- “text“: “池塘“,
- “pic“: “/common/img-small4.png“
- },
- {
- “text“: “办公一角“,
- “pic“: “/common/img-small5.png“
- }
- ]
- },
- “Files“: {}
- }
-
复制代码 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。
- “js“: [
- {
- “pages“: [
- “pages/index/index“
- ],
- “name“: “default“,
- “window“: {
- “designWidth“: 1024,
- “autoDesignWidth“: false
- }
- }
- ]
-
复制代码
3. 编译构建点击
Build > Build APP（s）/Hap（s） > Build debugHap（s） 进行代码编译构建，
编译.png （40.67 KB, 下载次数: 0）
下载附件 保存到相册
半小时前 上传
等待系统编译，在控制台看到编译成功提示信息即可。
4. 部署并运行
1. 启动模拟器点击Tools>HVD Manager启动模拟器。
111.png （231.25 KB, 下载次数: 0）
下载附件 保存到相册
半小时前 上传
注：使用模拟器需要登录实名认证的华为开发者账号，请按照提示完成登录及授权。
选择智慧屏模拟器（TV），点击启动按钮，如下图所示。
222.png （67.2 KB, 下载次数: 0）
下载附件 保存到相册
半小时前 上传
待模拟器启动成功后，出现下图所示的界面。
333.png （223.94 KB, 下载次数: 0）
下载附件 保存到相册
半小时前 上传
2. 部署应用点击Run > Run ‘Entry\“，部署应用。
444.png （41.56 KB, 下载次数: 0）
下载附件 保存到相册
半小时前 上传
选择模拟器设备。
555.png （30.08 KB, 下载次数: 0）
下载附件 保存到相册
半小时前 上传
应用程序运行如下
666.png （385.08 KB, 下载次数: 0）
下载附件 保存到相册
半小时前 上传
至此，您已经成功开发出第一个HarmonyOS应用，欢迎进入HarmonyOS世界！
5. 恭喜您您已经成功完成了HelloWorld应用开发E2E体验，并学到了：
- 如何创建一个HarmonyOS Project
- 编译构建hap包
- 将hap包部署到智慧屏远程模拟器上并运行
|
|
电子产业一站式赋能平台
窥视卡
置顶卡
变色卡
