Add new file

6fa15ade · 唐门教主 · e48a0c80 · 6fa15ade
隐藏空白更改
内联并排

Showing with 206 addition and 0 deletion

HarmonyOS应用开发 — HelloWorld应用开发E2E体验.md HarmonyOS应用开发 — HelloWorld应用开发E2E体验.md +206 -0

未找到文件。
--- a/HarmonyOS应用开发 — HelloWorld应用开发E2E体验.md
+++ b/HarmonyOS应用开发 — HelloWorld应用开发E2E体验.md
+# 一、介绍
+
+**本篇将实现的内容**
+
+智慧屏是首个搭载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)
\ No newline at end of file