# 一、介绍

**本篇将实现的内容**

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

您将建立什么

在这个Codelab中，您将使用HUAWEI DevEco Studio（IDE）开发HarmonyOS智慧屏多页签应用，完成开发者证书申请，工程创建、编译构建、应用调试，并实现HarmonyOS智慧屏部署和运行。

**您将学到什么**

 1. 如何创建一个HarmonyOS Project 
 2. 申请/配置调试签名证书 
 3. 编译构建hap包 
 4. 将hap包部署到智慧屏远程模拟器上，并运行

   
# 二、您需要什么

## 1. 硬件要求

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


## 2. 软件要求

需手动下载安装，详细步骤请参考《DevEco Studio使用指南》2.1.2
JDK：DevEco Studio自动安装。
Node.js：请手动下载安装，详细步骤请参考《DevEco Studio使用指南》2.1.3 下载和安装Node.js。
HarmonyOS SDK：待DevEco Studio安装完成后，利用DevEco Studio来加载HarmonyOS SDK。详细步骤请参考《DevEco Studio使用指南》2.1.6 加载HarmonyOS SDK。
Maven库依赖包：如需手动拷贝和配置，详细步骤请参考《DevEco Studio使用指南》2.3 离线方式配置Maven库。


## 3. 需要的知识点

Java基础开发能力。

# 三、能力接入准备


实现HarmonyOS智慧屏部署和运行，需要完成以下准备工作：

 1. HUAWEI DevEco Studio环境搭建    
 2. HarmonyOS门户申请调试证书

具体操作，请按照《HUAWEI DevEco Studio使用指南》中详细说明来完成。

具体操作，请按照《DevEco Studio使用指南》中详细说明来完成。

**提示：需要通过注册成开发者才能完成集成准备中的操作。**

# 四、HarmonyOS应用开发
## 1. 创建工程
创建一个空工程，选择多页签Tab Feature Ability类型，并命名工程名和包名。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200908141250201.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODMwNDU3Mw==,size_16,color_FFFFFF,t_70#pic_center)
一起看看工程目录结构
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200908141455290.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODMwNDU3Mw==,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200908141701673.png#pic_center)
目录结构中文件分类如下：

 1. .hml结尾的HML模板文件，这个文件用来描述当前页面的文件布局结构，类似于网页中的HTML文件。
 2.  .css结尾的CSS样式文件，这个文件用于描述页面样式。
 3. .js结尾的JS文件，这个文件用于处理页面和用户的交互。

各个文件夹的作用：

 1. app.js文件用于全局JavaScript逻辑和应用生命周期管理。  pages目录用于存放所有组件页面。
 2. common目录用于存放公共资源文件，比如：媒体资源，自定义组件和JS文件。
 3. resources目录用于存放资源配置文件，比如：全局样式、多分辨率加载等配置文件。
 4.  i18n目录用于配置不同语言场景资源内容，比如应用文本词条，图片路径等资源。

## 2. 编码
本次需要在zh-CN.json和index.hml 2个文件里编码，在common目录下导入若干张图片。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200908142025142.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODMwNDU3Mw==,size_16,color_FFFFFF,t_70#pic_center)
zh-CN.json

```go
{
  "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": {
  }
 }
```
index.hml

```go
<div class ="container">
    <div class ="tv_box">
        <div class ="title_box">
            <text class ="title">{{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">{{subtitle}}
                            </text>
                        </div>
                        <list class ="img_list">
                            <block for ="{{deatilitem in $t('Strings.details')}}">
                                <list-item type ="listItem" class ="list_box">
                                    <image focusable ="true" class ="img_img" src ="{{deatilitem.pic}}"></image>
                                    <text class ="img_text">{{deatilitem.text}}
                                    </text>
                                </list-item>
                            </block>
                        </list>
                    </div>
                </block>
            </tab-content>
        </tabs>
    </div>
</div>
```

## 3.申请调试签名证书
本工程已经提前为您申请了证书，存放在cer目录下。

## 4. 配置调试签名证书
点击File→Project Structure进行签名配置即可，其中，debug表示调试签名证书，release表示发布签名证书。Store Password和KeyPassword一样，均为helloharmonyos123
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200908143037537.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODMwNDU3Mw==,size_16,color_FFFFFF,t_70#pic_center)
配置完成后点击OK，自动在entry/build.gradle生成签名代码块。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200908143119964.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODMwNDU3Mw==,size_16,color_FFFFFF,t_70#pic_center)
你也可以如上图一样，配置成绝对路径，如：
```go
certpath file('./../cer/helloharmonyos.cer')
```

# 四. 编译构建hap包
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200908143331176.png#pic_center)

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200908143341800.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODMwNDU3Mw==,size_16,color_FFFFFF,t_70#pic_center)

5. 部署并运行


# 五.布局截图：
启动模拟器，登录华为开发者账号。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200908143700665.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODMwNDU3Mw==,size_16,color_FFFFFF,t_70#pic_center)
选择智慧屏模拟器（HD）。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200908143727567.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODMwNDU3Mw==,size_16,color_FFFFFF,t_70#pic_center)
将hap包部署到智慧屏上，并运行（run）。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200908143752377.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODMwNDU3Mw==,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200908143847708.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODMwNDU3Mw==,size_16,color_FFFFFF,t_70#pic_center)
至此，你已经成功开发出第一个HarmonyOS应用，欢迎进入HarmonyOS世界！

# 五、恭喜你

干得好，你已经成功完成了HelloWorld应用开发E2E体验，并学到了：

 1. 如何创建一个HarmonyOS Project 
 2. 申请/配置调试签名证书 
 3. 编译构建hap包 
 4. 将hap包部署到智慧屏远程模拟器上，并运行

[【如果您想学习HarmonyOS 应用开发基础教程  请猛戳】](https://codechina.csdn.net/huawei/harmonyos/HarmonyOS-Guide)