devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HarmonyOS应用开发-搭建开发环境_harmonyos开发环境

作者：2023面试高手 | 2024-03-15 11:00:59

赞

踩

harmonyos开发环境

本文介绍如何搭建 HarmonyOS 应用的开发环境，介绍下载安装 DevEco Studio 开发工具和 SDK 的详细流程。华为鸿蒙 DevEco Studio 是面向全场景的一站式集成开发环境，面向全场景多设备，提供一站式的分布式应用开发平台，支持分布式多端开发、分布式多端调测、多端模拟仿真，提供全方位的质量与安全保障。

一、下载安装 DevEco Studio

1、官网下载 DevEco Studio

官网：HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者
下载 DevEco Studio 3.1.1 Release 最新版本。

1 001 1024x429 - Harmony应用开发-搭建开发环境

下载完成后我们解压压缩包，点击启动exe安装程序。

2、安装 DevEco Studio

启动安装exe程序，进入安装界面欢迎页。
我们点击Next下一步。

1 002 - Harmony应用开发-搭建开发环境

选择安装路径，这里根据大家自己的喜好选择路径安装即可，需要2GB的存储空间。

1 003 - Harmony应用开发-搭建开发环境

下一步，我们勾选 “生成快捷方式” 和 “添加到path环境变量” 。

1 004 - Harmony应用开发-搭建开发环境

这里默认文件夹名，点击安装。

1 005 - Harmony应用开发-搭建开发环境

完成安装，需要对电脑重启。

1 006 - Harmony应用开发-搭建开发环境

二、启动 DevEco Studio

1、安装 Node.js 和 ohpm

首次运行 DevEco Studio 会来到这个页面。
HarmonyOS应用开发需要我们的电脑上安装 Node.js 和 ohpm (鸿蒙生态三方库的包管理工具)
这里华为官方提供了镜像，如果本机上之前没有装过，直接勾选 install 然后下一步即可。

1 007 - Harmony应用开发-搭建开发环境

2、安装HarmonyOS SDK

基础组件安装后，我们需要安装HarmonyOS的SDK。HarmonyOS SDK提供应用及服务开发所需的一系列系统开放能力，包括框架、Ability、分布式服务、安全、方舟编译器、HMS Core、基础软件服务、硬件服务等。

这里选择安装路径即可，我直接默认路径，点击下一步。

1 008 - Harmony应用开发-搭建开发环境

这个页面展示了所有需要安装的包，点击下一步安装。

1 009 - Harmony应用开发-搭建开发环境

几分钟后安装完成。

1 010 - Harmony应用开发-搭建开发环境

三、新建测试项目

1、通过模板创建项目

我们选择 Empty Ability 模板新建一个测试项目。

Empty Ability 模板是一个空白模板，它支持手机、平板、手表等多种鸿蒙终端运行。

1 011 1024x613 - Harmony应用开发-搭建开发环境

2、勾选Stage模式

勾选Stage模式。Satge模式已经是 API 9 之后的默认勾选模式。

1 012 - Harmony应用开发-搭建开发环境

这里科普一下FA模型和Stage模型的区别：

API 8及以前的接口基于FA模型提供；从API 9开始，OpenHarmony主推Stage模型。 FA模型与Stage模型是两套不同的应用模型，他们拥有各自的组件。

  • FA模型：OpenHarmony API 7开始支持的模型，提供三种应用组件，分别是PageAbility、ServiceAbility和DataAbility。
  • Stage模型：OpenHarmony API 9开始新增的模型，是目前主推且会长期演进的模型。在该模型中，由于提供了AbilityStage、WindowStage等类作为应用组件和Window窗口的“舞台”，因此称这种应用模型为Stage模型。提供了两种应用组件，分别是UIAbility和ExtensionAbility。

3、勾选低代码开发选项 

开启Super Visual低代码模式，这可以帮助我们快速建立起一个应用。

1 012 - Harmony应用开发-搭建开发环境

低代码开发是DevEco Studio为HarmonyOS开发者提供的可视化页面的开发方式，具备丰富的UI页面编辑能力，开发者可以在图形化的用户界面上自由拖拽组件、完成数据的参数化配置，还能实时预览开发页面的效果，所见即所得。

低代码开发效果示例：

1 013 1024x691 - Harmony应用开发-搭建开发环境
 

低代码开发为我们开发者提供了UI界面开箱即用的组件，通过简单拖、拉、拽和可视化数据绑定的操作方式，快速开发用户界面。不仅可以减少键入的代码量，降低开发成本，还提升了页面开发效率，助力高效开发。 

 四、运行测试项目

1、创建测试页面

这里我通过低代码组件随便做了一个登录页。我们低代码组件的改动体现在index.visual上。

1 013 1024x691 - Harmony应用开发-搭建开发环境

index.visual代码我提供出来给大家参考：

  1. {
  2.     "document": {
  3.         "VisualVersion": "12",
  4.         "type": "ETS",
  5.         "custom": false,
  6.         "path": "/entry/src/main/supervisual/pages/Index"
  7.     },
  8.     "visualModel": {
  9.         "dataType": "VisualModel",
  10.         "value": {
  11.             "propertyStorage": {
  12.                 "dataType": "Map",
  13.                 "value": {}
  14.             },
  15.             "dynamicPropertyStorage": {
  16.                 "dataType": "Map",
  17.                 "value": {}
  18.             },
  19.             "mediaPropertyStorage": {
  20.                 "dataType": "Map",
  21.                 "value": {}
  22.             },
  23.             "dynamicMediaPropertyStorage": {
  24.                 "dataType": "Map",
  25.                 "value": {}
  26.             },
  27.             "property": {
  28.                 "dataType": "Map",
  29.                 "value": {
  30.                     "width": "100%",
  31.                     "height": "100%"
  32.                 }
  33.             },
  34.             "dynamicProperty": {
  35.                 "dataType": "Map",
  36.                 "value": {}
  37.             },
  38.             "children": [
  39.                 {
  40.                     "dataType": "VisualModel",
  41.                     "value": {
  42.                         "propertyStorage": {
  43.                             "dataType": "Map",
  44.                             "value": {}
  45.                         },
  46.                         "dynamicPropertyStorage": {
  47.                             "dataType": "Map",
  48.                             "value": {}
  49.                         },
  50.                         "mediaPropertyStorage": {
  51.                             "dataType": "Map",
  52.                             "value": {}
  53.                         },
  54.                         "dynamicMediaPropertyStorage": {
  55.                             "dataType": "Map",
  56.                             "value": {}
  57.                         },
  58.                         "property": {
  59.                             "dataType": "Map",
  60.                             "value": {
  61.                                 "width": "100%",
  62.                                 "height": "100%",
  63.                                 "justify-content-rc": "center",
  64.                                 "position": "absolute",
  65.                                 "top": "0vp",
  66.                                 "left": "0vp",
  67.                                 "border-bottom-color": "#4a4a4a",
  68.                                 "border-bottom-width": "1vp"
  69.                             }
  70.                         },
  71.                         "dynamicProperty": {
  72.                             "dataType": "Map",
  73.                             "value": {}
  74.                         },
  75.                         "children": [
  76.                             {
  77.                                 "dataType": "VisualModel",
  78.                                 "value": {
  79.                                     "propertyStorage": {
  80.                                         "dataType": "Map",
  81.                                         "value": {}
  82.                                     },
  83.                                     "dynamicPropertyStorage": {
  84.                                         "dataType": "Map",
  85.                                         "value": {}
  86.                                     },
  87.                                     "mediaPropertyStorage": {
  88.                                         "dataType": "Map",
  89.                                         "value": {}
  90.                                     },
  91.                                     "dynamicMediaPropertyStorage": {
  92.                                         "dataType": "Map",
  93.                                         "value": {}
  94.                                     },
  95.                                     "property": {
  96.                                         "dataType": "Map",
  97.                                         "value": {
  98.                                             "position": "absolute",
  99.                                             "top": "95vp",
  100.                                             "width": "100%",
  101.                                             "height": "100vp",
  102.                                             "display-priority": "0",
  103.                                             "align-items-row": "center",
  104.                                             "justify-content-rc": "center"
  105.                                         }
  106.                                     },
  107.                                     "dynamicProperty": {
  108.                                         "dataType": "Map",
  109.                                         "value": {}
  110.                                     },
  111.                                     "children": [
  112.                                         {
  113.                                             "dataType": "VisualModel",
  114.                                             "value": {
  115.                                                 "propertyStorage": {
  116.                                                     "dataType": "Map",
  117.                                                     "value": {}
  118.                                                 },
  119.                                                 "dynamicPropertyStorage": {
  120.                                                     "dataType": "Map",
  121.                                                     "value": {}
  122.                                                 },
  123.                                                 "mediaPropertyStorage": {
  124.                                                     "dataType": "Map",
  125.                                                     "value": {}
  126.                                                 },
  127.                                                 "dynamicMediaPropertyStorage": {
  128.                                                     "dataType": "Map",
  129.                                                     "value": {}
  130.                                                 },
  131.                                                 "property": {
  132.                                                     "dataType": "Map",
  133.                                                     "value": {
  134.                                                         "width": "100vp",
  135.                                                         "height": "100vp",
  136.                                                         "align": "center",
  137.                                                         "top": "0vp",
  138.                                                         "background-image-size": "auto",
  139.                                                         "position": "relative",
  140.                                                         "src": "$r('app.media.icon')",
  141.                                                         "left": "0%"
  142.                                                     }
  143.                                                 },
  144.                                                 "dynamicProperty": {
  145.                                                     "dataType": "Map",
  146.                                                     "value": {}
  147.                                                 },
  148.                                                 "children": [],
  149.                                                 "id": "image1",
  150.                                                 "type": "image"
  151.                                             }
  152.                                         }
  153.                                     ],
  154.                                     "id": "row3",
  155.                                     "type": "row"
  156.                                 }
  157.                             },
  158.                             {
  159.                                 "dataType": "VisualModel",
  160.                                 "value": {
  161.                                     "propertyStorage": {
  162.                                         "dataType": "Map",
  163.                                         "value": {}
  164.                                     },
  165.                                     "dynamicPropertyStorage": {
  166.                                         "dataType": "Map",
  167.                                         "value": {}
  168.                                     },
  169.                                     "mediaPropertyStorage": {
  170.                                         "dataType": "Map",
  171.                                         "value": {}
  172.                                     },
  173.                                     "dynamicMediaPropertyStorage": {
  174.                                         "dataType": "Map",
  175.                                         "value": {}
  176.                                     },
  177.                                     "property": {
  178.                                         "dataType": "Map",
  179.                                         "value": {
  180.                                             "height": "50vp",
  181.                                             "width": "100%",
  182.                                             "left": "0vp",
  183.                                             "top": "200vp",
  184.                                             "border-top-right-radius": "0vp",
  185.                                             "content": "登录界面",
  186.                                             "font-size": "26fp",
  187.                                             "font-weight": "medium",
  188.                                             "font-family": "sans-serif",
  189.                                             "text-align": "center",
  190.                                             "text-overflow": "clip",
  191.                                             "position": "absolute"
  192.                                         }
  193.                                     },
  194.                                     "dynamicProperty": {
  195.                                         "dataType": "Map",
  196.                                         "value": {}
  197.                                     },
  198.                                     "children": [],
  199.                                     "id": "text1",
  200.                                     "type": "text"
  201.                                 }
  202.                             },
  203.                             {
  204.                                 "dataType": "VisualModel",
  205.                                 "value": {
  206.                                     "propertyStorage": {
  207.                                         "dataType": "Map",
  208.                                         "value": {}
  209.                                     },
  210.                                     "dynamicPropertyStorage": {
  211.                                         "dataType": "Map",
  212.                                         "value": {}
  213.                                     },
  214.                                     "mediaPropertyStorage": {
  215.                                         "dataType": "Map",
  216.                                         "value": {}
  217.                                     },
  218.                                     "dynamicMediaPropertyStorage": {
  219.                                         "dataType": "Map",
  220.                                         "value": {}
  221.                                     },
  222.                                     "property": {
  223.                                         "dataType": "Map",
  224.                                         "value": {
  225.                                             "height": "30vp",
  226.                                             "width": "100%",
  227.                                             "left": "0vp",
  228.                                             "top": "250vp",
  229.                                             "content": "登录帐号以使用更多服务",
  230.                                             "font-size": "14fp",
  231.                                             "text-align": "center",
  232.                                             "font-color": "#8c8c8c",
  233.                                             "position": "absolute"
  234.                                         }
  235.                                     },
  236.                                     "dynamicProperty": {
  237.                                         "dataType": "Map",
  238.                                         "value": {}
  239.                                     },
  240.                                     "children": [],
  241.                                     "id": "text2",
  242.                                     "type": "text"
  243.                                 }
  244.                             },
  245.                             {
  246.                                 "dataType": "VisualModel",
  247.                                 "value": {
  248.                                     "propertyStorage": {
  249.                                         "dataType": "Map",
  250.                                         "value": {}
  251.                                     },
  252.                                     "dynamicPropertyStorage": {
  253.                                         "dataType": "Map",
  254.                                         "value": {}
  255.                                     },
  256.                                     "mediaPropertyStorage": {
  257.                                         "dataType": "Map",
  258.                                         "value": {}
  259.                                     },
  260.                                     "dynamicMediaPropertyStorage": {
  261.                                         "dataType": "Map",
  262.                                         "value": {}
  263.                                     },
  264.                                     "property": {
  265.                                         "dataType": "Map",
  266.                                         "value": {
  267.                                             "height": "50vp",
  268.                                             "width": "100%",
  269.                                             "left": "0vp",
  270.                                             "top": "328vp",
  271.                                             "position": "absolute",
  272.                                             "placeholder": "邮箱/手机号/用户名",
  273.                                             "margin-bottom": "0vp",
  274.                                             "padding-top": "0vp",
  275.                                             "border-bottom-width": "1vp",
  276.                                             "border-bottom-color": "#4a4a4a",
  277.                                             "background-color": "#ffffff"
  278.                                         }
  279.                                     },
  280.                                     "dynamicProperty": {
  281.                                         "dataType": "Map",
  282.                                         "value": {}
  283.                                     },
  284.                                     "children": [],
  285.                                     "id": "text-input1",
  286.                                     "type": "text-input"
  287.                                 }
  288.                             },
  289.                             {
  290.                                 "dataType": "VisualModel",
  291.                                 "value": {
  292.                                     "propertyStorage": {
  293.                                         "dataType": "Map",
  294.                                         "value": {}
  295.                                     },
  296.                                     "dynamicPropertyStorage": {
  297.                                         "dataType": "Map",
  298.                                         "value": {}
  299.                                     },
  300.                                     "mediaPropertyStorage": {
  301.                                         "dataType": "Map",
  302.                                         "value": {}
  303.                                     },
  304.                                     "dynamicMediaPropertyStorage": {
  305.                                         "dataType": "Map",
  306.                                         "value": {}
  307.                                     },
  308.                                     "property": {
  309.                                         "dataType": "Map",
  310.                                         "value": {
  311.                                             "height": "50vp",
  312.                                             "width": "100%",
  313.                                             "left": "0vp",
  314.                                             "top": "380vp",
  315.                                             "position": "absolute",
  316.                                             "placeholder": "密码",
  317.                                             "textInput-type": "Password",
  318.                                             "background-color": "#ffffff",
  319.                                             "border-bottom-width": "1vp",
  320.                                             "border-bottom-color": "#4a4a4a"
  321.                                         }
  322.                                     },
  323.                                     "dynamicProperty": {
  324.                                         "dataType": "Map",
  325.                                         "value": {}
  326.                                     },
  327.                                     "children": [],
  328.                                     "id": "text-input2",
  329.                                     "type": "text-input"
  330.                                 }
  331.                             },
  332.                             {
  333.                                 "dataType": "VisualModel",
  334.                                 "value": {
  335.                                     "propertyStorage": {
  336.                                         "dataType": "Map",
  337.                                         "value": {}
  338.                                     },
  339.                                     "dynamicPropertyStorage": {
  340.                                         "dataType": "Map",
  341.                                         "value": {}
  342.                                     },
  343.                                     "mediaPropertyStorage": {
  344.                                         "dataType": "Map",
  345.                                         "value": {}
  346.                                     },
  347.                                     "dynamicMediaPropertyStorage": {
  348.                                         "dataType": "Map",
  349.                                         "value": {}
  350.                                     },
  351.                                     "property": {
  352.                                         "dataType": "Map",
  353.                                         "value": {
  354.                                             "position": "absolute",
  355.                                             "top": "430vp",
  356.                                             "left": "5%",
  357.                                             "width": "90%",
  358.                                             "height": "30vp"
  359.                                         }
  360.                                     },
  361.                                     "dynamicProperty": {
  362.                                         "dataType": "Map",
  363.                                         "value": {}
  364.                                     },
  365.                                     "children": [
  366.                                         {
  367.                                             "dataType": "VisualModel",
  368.                                             "value": {
  369.                                                 "propertyStorage": {
  370.                                                     "dataType": "Map",
  371.                                                     "value": {}
  372.                                                 },
  373.                                                 "dynamicPropertyStorage": {
  374.                                                     "dataType": "Map",
  375.                                                     "value": {}
  376.                                                 },
  377.                                                 "mediaPropertyStorage": {
  378.                                                     "dataType": "Map",
  379.                                                     "value": {}
  380.                                                 },
  381.                                                 "dynamicMediaPropertyStorage": {
  382.                                                     "dataType": "Map",
  383.                                                     "value": {}
  384.                                                 },
  385.                                                 "property": {
  386.                                                     "dataType": "Map",
  387.                                                     "value": {
  388.                                                         "height": "30vp",
  389.                                                         "width": "50%",
  390.                                                         "position": "absolute",
  391.                                                         "top": "0px",
  392.                                                         "left": "50%",
  393.                                                         "text-align": "end",
  394.                                                         "content": "忘记密码",
  395.                                                         "font-size": "14fp"
  396.                                                     }
  397.                                                 },
  398.                                                 "dynamicProperty": {
  399.                                                     "dataType": "Map",
  400.                                                     "value": {}
  401.                                                 },
  402.                                                 "children": [],
  403.                                                 "id": "text3",
  404.                                                 "type": "text"
  405.                                             }
  406.                                         },
  407.                                         {
  408.                                             "dataType": "VisualModel",
  409.                                             "value": {
  410.                                                 "propertyStorage": {
  411.                                                     "dataType": "Map",
  412.                                                     "value": {}
  413.                                                 },
  414.                                                 "dynamicPropertyStorage": {
  415.                                                     "dataType": "Map",
  416.                                                     "value": {}
  417.                                                 },
  418.                                                 "mediaPropertyStorage": {
  419.                                                     "dataType": "Map",
  420.                                                     "value": {}
  421.                                                 },
  422.                                                 "dynamicMediaPropertyStorage": {
  423.                                                     "dataType": "Map",
  424.                                                     "value": {}
  425.                                                 },
  426.                                                 "property": {
  427.                                                     "dataType": "Map",
  428.                                                     "value": {
  429.                                                         "height": "30vp",
  430.                                                         "width": "50%",
  431.                                                         "text-align": "start",
  432.                                                         "position": "absolute",
  433.                                                         "content": "短信验证码登录",
  434.                                                         "font-size": "14fp",
  435.                                                         "top": "0vp",
  436.                                                         "left": "0%"
  437.                                                     }
  438.                                                 },
  439.                                                 "dynamicProperty": {
  440.                                                     "dataType": "Map",
  441.                                                     "value": {}
  442.                                                 },
  443.                                                 "children": [],
  444.                                                 "id": "text4",
  445.                                                 "type": "text"
  446.                                             }
  447.                                         }
  448.                                     ],
  449.                                     "id": "row1",
  450.                                     "type": "row"
  451.                                 }
  452.                             },
  453.                             {
  454.                                 "dataType": "VisualModel",
  455.                                 "value": {
  456.                                     "propertyStorage": {
  457.                                         "dataType": "Map",
  458.                                         "value": {}
  459.                                     },
  460.                                     "dynamicPropertyStorage": {
  461.                                         "dataType": "Map",
  462.                                         "value": {}
  463.                                     },
  464.                                     "mediaPropertyStorage": {
  465.                                         "dataType": "Map",
  466.                                         "value": {}
  467.                                     },
  468.                                     "dynamicMediaPropertyStorage": {
  469.                                         "dataType": "Map",
  470.                                         "value": {}
  471.                                     },
  472.                                     "property": {
  473.                                         "dataType": "Map",
  474.                                         "value": {
  475.                                             "position": "absolute",
  476.                                             "top": "92%",
  477.                                             "left": "5%",
  478.                                             "height": "8%",
  479.                                             "width": "90%"
  480.                                         }
  481.                                     },
  482.                                     "dynamicProperty": {
  483.                                         "dataType": "Map",
  484.                                         "value": {}
  485.                                     },
  486.                                     "children": [
  487.                                         {
  488.                                             "dataType": "VisualModel",
  489.                                             "value": {
  490.                                                 "propertyStorage": {
  491.                                                     "dataType": "Map",
  492.                                                     "value": {}
  493.                                                 },
  494.                                                 "dynamicPropertyStorage": {
  495.                                                     "dataType": "Map",
  496.                                                     "value": {}
  497.                                                 },
  498.                                                 "mediaPropertyStorage": {
  499.                                                     "dataType": "Map",
  500.                                                     "value": {}
  501.                                                 },
  502.                                                 "dynamicMediaPropertyStorage": {
  503.                                                     "dataType": "Map",
  504.                                                     "value": {}
  505.                                                 },
  506.                                                 "property": {
  507.                                                     "dataType": "Map",
  508.                                                     "value": {
  509.                                                         "height": "100%",
  510.                                                         "width": "33.3%",
  511.                                                         "position": "absolute"
  512.                                                     }
  513.                                                 },
  514.                                                 "dynamicProperty": {
  515.                                                     "dataType": "Map",
  516.                                                     "value": {}
  517.                                                 },
  518.                                                 "children": [],
  519.                                                 "id": "text7",
  520.                                                 "type": "text"
  521.                                             }
  522.                                         },
  523.                                         {
  524.                                             "dataType": "VisualModel",
  525.                                             "value": {
  526.                                                 "propertyStorage": {
  527.                                                     "dataType": "Map",
  528.                                                     "value": {}
  529.                                                 },
  530.                                                 "dynamicPropertyStorage": {
  531.                                                     "dataType": "Map",
  532.                                                     "value": {}
  533.                                                 },
  534.                                                 "mediaPropertyStorage": {
  535.                                                     "dataType": "Map",
  536.                                                     "value": {}
  537.                                                 },
  538.                                                 "dynamicMediaPropertyStorage": {
  539.                                                     "dataType": "Map",
  540.                                                     "value": {}
  541.                                                 },
  542.                                                 "property": {
  543.                                                     "dataType": "Map",
  544.                                                     "value": {
  545.                                                         "height": "100%",
  546.                                                         "width": "33.4%",
  547.                                                         "position": "absolute"
  548.                                                     }
  549.                                                 },
  550.                                                 "dynamicProperty": {
  551.                                                     "dataType": "Map",
  552.                                                     "value": {}
  553.                                                 },
  554.                                                 "children": [],
  555.                                                 "id": "text9",
  556.                                                 "type": "text"
  557.                                             }
  558.                                         },
  559.                                         {
  560.                                             "dataType": "VisualModel",
  561.                                             "value": {
  562.                                                 "propertyStorage": {
  563.                                                     "dataType": "Map",
  564.                                                     "value": {}
  565.                                                 },
  566.                                                 "dynamicPropertyStorage": {
  567.                                                     "dataType": "Map",
  568.                                                     "value": {}
  569.                                                 },
  570.                                                 "mediaPropertyStorage": {
  571.                                                     "dataType": "Map",
  572.                                                     "value": {}
  573.                                                 },
  574.                                                 "dynamicMediaPropertyStorage": {
  575.                                                     "dataType": "Map",
  576.                                                     "value": {}
  577.                                                 },
  578.                                                 "property": {
  579.                                                     "dataType": "Map",
  580.                                                     "value": {
  581.                                                         "height": "100%",
  582.                                                         "width": "33.3%",
  583.                                                         "text-align": "end",
  584.                                                         "position": "absolute"
  585.                                                     }
  586.                                                 },
  587.                                                 "dynamicProperty": {
  588.                                                     "dataType": "Map",
  589.                                                     "value": {}
  590.                                                 },
  591.                                                 "children": [],
  592.                                                 "id": "text8",
  593.                                                 "type": "text"
  594.                                             }
  595.                                         }
  596.                                     ],
  597.                                     "id": "row2",
  598.                                     "type": "row"
  599.                                 }
  600.                             },
  601.                             {
  602.                                 "dataType": "VisualModel",
  603.                                 "value": {
  604.                                     "propertyStorage": {
  605.                                         "dataType": "Map",
  606.                                         "value": {}
  607.                                     },
  608.                                     "dynamicPropertyStorage": {
  609.                                         "dataType": "Map",
  610.                                         "value": {}
  611.                                     },
  612.                                     "mediaPropertyStorage": {
  613.                                         "dataType": "Map",
  614.                                         "value": {}
  615.                                     },
  616.                                     "dynamicMediaPropertyStorage": {
  617.                                         "dataType": "Map",
  618.                                         "value": {}
  619.                                     },
  620.                                     "property": {
  621.                                         "dataType": "Map",
  622.                                         "value": {
  623.                                             "width": "90%",
  624.                                             "height": "40vp",
  625.                                             "label": "登录",
  626.                                             "font-size": "20fp",
  627.                                             "position": "absolute",
  628.                                             "top": "530vp",
  629.                                             "left": "5%"
  630.                                         }
  631.                                     },
  632.                                     "dynamicProperty": {
  633.                                         "dataType": "Map",
  634.                                         "value": {}
  635.                                     },
  636.                                     "children": [],
  637.                                     "id": "button1",
  638.                                     "type": "button"
  639.                                 }
  640.                             },
  641.                             {
  642.                                 "dataType": "VisualModel",
  643.                                 "value": {
  644.                                     "propertyStorage": {
  645.                                         "dataType": "Map",
  646.                                         "value": {}
  647.                                     },
  648.                                     "dynamicPropertyStorage": {
  649.                                         "dataType": "Map",
  650.                                         "value": {}
  651.                                     },
  652.                                     "mediaPropertyStorage": {
  653.                                         "dataType": "Map",
  654.                                         "value": {}
  655.                                     },
  656.                                     "dynamicMediaPropertyStorage": {
  657.                                         "dataType": "Map",
  658.                                         "value": {}
  659.                                     },
  660.                                     "property": {
  661.                                         "dataType": "Map",
  662.                                         "value": {
  663.                                             "height": "30vp",
  664.                                             "width": "100%",
  665.                                             "content": "注册账号",
  666.                                             "text-align": "center",
  667.                                             "font-size": "14fp",
  668.                                             "position": "absolute",
  669.                                             "top": "570vp",
  670.                                             "left": "0vp"
  671.                                         }
  672.                                     },
  673.                                     "dynamicProperty": {
  674.                                         "dataType": "Map",
  675.                                         "value": {}
  676.                                     },
  677.                                     "children": [],
  678.                                     "id": "text5",
  679.                                     "type": "text"
  680.                                 }
  681.                             },
  682.                             {
  683.                                 "dataType": "VisualModel",
  684.                                 "value": {
  685.                                     "propertyStorage": {
  686.                                         "dataType": "Map",
  687.                                         "value": {}
  688.                                     },
  689.                                     "dynamicPropertyStorage": {
  690.                                         "dataType": "Map",
  691.                                         "value": {}
  692.                                     },
  693.                                     "mediaPropertyStorage": {
  694.                                         "dataType": "Map",
  695.                                         "value": {}
  696.                                     },
  697.                                     "dynamicMediaPropertyStorage": {
  698.                                         "dataType": "Map",
  699.                                         "value": {}
  700.                                     },
  701.                                     "property": {
  702.                                         "dataType": "Map",
  703.                                         "value": {
  704.                                             "height": "4%",
  705.                                             "width": "100%",
  706.                                             "text-align": "center",
  707.                                             "font-size": "14fp",
  708.                                             "position": "absolute",
  709.                                             "top": "88%",
  710.                                             "left": "0vp",
  711.                                             "content": "其他方式登录",
  712.                                             "align": "center"
  713.                                         }
  714.                                     },
  715.                                     "dynamicProperty": {
  716.                                         "dataType": "Map",
  717.                                         "value": {}
  718.                                     },
  719.                                     "children": [],
  720.                                     "id": "text6",
  721.                                     "type": "text"
  722.                                 }
  723.                             }
  724.                         ],
  725.                         "id": "column1",
  726.                         "type": "column"
  727.                     }
  728.                 }
  729.             ],
  730.             "id": "wrapper",
  731.             "type": "column"
  732.         }
  733.     },
  734.     "formData": {
  735.         "data": {
  736.             "dataType": "Map",
  737.             "value": {}
  738.         },
  739.         "actions": {
  740.             "dataType": "Map",
  741.             "value": {}
  742.         }
  743.     },
  744.     "customData": {
  745.         "property": {
  746.             "dataType": "Map",
  747.             "value": {}
  748.         },
  749.         "event": {
  750.             "dataType": "Map",
  751.             "value": {}
  752.         }
  753.     }
  754. }

我们点击运行按钮，会让我们选择运行设备，这里的设备都是模拟器，需要安装，我们先进入设备管理器安装设备。

1 014 1024x691 - Harmony应用开发-搭建开发环境

 以上是纯前端，业务逻辑写在在index.ets文件中，这里我们只是测试开发环境可以运行简单应用，所以业务逻辑我们就不写了，具体的应用实战我会在后面的章节给出。

2、安装设备仿真器

这个模板支持手机、电视、手表三种终端模拟，我们先安装emulator(仿真器)。

1 015 1024x635 - Harmony应用开发-搭建开发环境

1 016 1024x694 - Harmony应用开发-搭建开发环境

安装好之后，我们再点击每一个硬件设备单独安装。这里我选择的手机。

1 017 1024x646 - Harmony应用开发-搭建开发环境

我选择的API9版本。

1 018 1024x647 - Harmony应用开发-搭建开发环境

要安装个几分钟。

1 019 - Harmony应用开发-搭建开发环境

安装完成。

1 020 1024x648 - Harmony应用开发-搭建开发环境

3、开启设备仿真器

点击我们刚刚新建的设备，启动它。

1 021 1024x637 - Harmony应用开发-搭建开发环境

仿真终端被立刻启动。

1 022 1024x687 - Harmony应用开发-搭建开发环境

完全启动大概需要个一分钟，开机后如下：

1 023 1024x687 - Harmony应用开发-搭建开发环境

4、运行项目

我们运行项目。

1 024 1024x687 - Harmony应用开发-搭建开发环境

我们制作的应用会在仿真设备里打开。

1 025 1024x587 - Harmony应用开发-搭建开发环境

测试我们登录界面是否可以正常输入和点击。

1 026 1024x608 - Harmony应用开发-搭建开发环境

测试没有问题，标志着我们新建的HarmonyOS应用运行成功。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/240122
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号