{"id":459511,"date":"2025-05-13T15:01:10","date_gmt":"2025-05-13T15:01:10","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=459511"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=459511","title":{"rendered":"<span>\u041f\u0435\u0440\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430 HarmonyOS \u2014 \u043c\u043e\u0439 \u043f\u043b\u0435\u0439\u043b\u0438\u0441\u0442 \u0434\u043b\u044f \u0441\u0442\u0430\u0440\u0442\u0430 \u0441 \u043d\u0443\u043b\u044f<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/853\/1ff\/566\/8531ff566d4184a170794ff627e24bef.jpg\" width=\"1958\" height=\"1103\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/853\/1ff\/566\/8531ff566d4184a170794ff627e24bef.jpg 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/853\/1ff\/566\/8531ff566d4184a170794ff627e24bef.jpg 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440! \u042d\u0442\u043e \u042e\u0440\u0438\u0439 \u0412\u043e\u043b\u043a\u043e\u0432\u0441\u043a\u0438\u0439, \u0442\u0435\u0445\u043b\u0438\u0434 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 <a href=\"https:\/\/friflex.com\/?utm_source=%D1%85%D0%B0%D0%B1%D1%80&amp;utm_medium=%D1%81%D1%82%D0%B0%D1%82%D1%8C%D1%8F&amp;utm_campaign=%D1%85%D0%B0%D0%B1%D1%8025\">Friflex<\/a>. \u042f \u0440\u0430\u0431\u043e\u0442\u0430\u044e, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435, \u0441 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u043c\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u043d\u0430 React Native. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043f\u043e\u0434 HarmonyOS \u0441\u0440\u0430\u0437\u0443 \u0437\u0430\u0438\u043d\u0442\u0440\u0438\u0433\u043e\u0432\u0430\u043b\u0430 \u043c\u0435\u043d\u044f \u0442\u0435\u043c, \u0447\u0442\u043e ArkTS \u2014 \u044d\u0442\u043e \u043a\u0430\u043a \u0431\u044b TypeScript, \u043d\u043e \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c. \u0418 \u0441\u0430\u043c ArkUI \u0441\u043e\u0447\u0435\u0442\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438 \u0438\u0437 React Native, \u0438 \u0438\u0437 Flutter, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043d\u0435 \u0442\u043e\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c.\u00a0<\/p>\n<p>\u042f \u0440\u0435\u0448\u0438\u043b: \u0441\u043e\u0437\u0434\u0430\u043c \u043d\u0430 Harmony OS \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u044e, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u0440\u0443\u0436\u0435\u043b\u044e\u0431\u043d\u0430 \u044d\u0442\u0430 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430. \u0415\u0441\u043b\u0438 \u0432\u044b \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a (\u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0441 \u043e\u043f\u044b\u0442\u043e\u043c Android \u0438\u043b\u0438 Flutter) \u0438 \u0442\u043e\u0436\u0435 \u0445\u043e\u0442\u0438\u0442\u0435 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u044d\u0442\u043e \u0437\u0430 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 \u0438 \u043a\u0430\u043a \u0441 \u043d\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u2014 \u0432\u044b \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043f\u043b\u0435\u0439\u043b\u0438\u0441\u0442 \u043f\u043e \u0448\u0430\u0433\u0430\u043c. <\/p>\n<h3>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 HarmonyOS?<\/h3>\n<p>HarmonyOS \u2014 \u044d\u0442\u043e \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u0430\u044f Huawei \u0432 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0441\u0430\u043d\u043a\u0446\u0438\u0438 \u0421\u0428\u0410, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u0440\u0435\u0437\u0430\u043b\u0438 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044e \u043e\u0442 Google Mobile Services. \u041f\u0435\u0440\u0432\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0432\u044b\u0448\u043b\u0430 \u0432 2019 \u0433\u043e\u0434\u0443, \u0430 \u0443\u0436\u0435 \u0432 2021 \u0432\u044b\u0448\u043b\u0430 HarmonyOS 2.0 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u043e\u0432.<\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 Huawei \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043b\u0430 HarmonyOS \u043a\u0430\u043a \u0435\u0434\u0438\u043d\u0443\u044e \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0434\u043b\u044f \u0441\u043c\u0430\u0440\u0442\u043e\u0444\u043d\u043e\u0432, \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u043e\u0432, \u0443\u043c\u043d\u044b\u0445 \u0442\u0435\u043b\u0435\u0432\u0438\u0437\u043e\u0440\u043e\u0432 \u0438 \u0447\u0430\u0441\u043e\u0432, \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0441\u0438\u0441\u0442\u0435\u043c \u0438 IoT-\u0433\u0430\u0434\u0436\u0435\u0442\u043e\u0432. \u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 Android, HarmonyOS \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u043b\u0430\u0441\u044c \u043a\u0430\u043a \u043c\u0438\u043a\u0440\u043e\u044f\u0434\u0435\u0440\u043d\u0430\u044f \u041e\u0421 \u0441 \u0430\u043a\u0446\u0435\u043d\u0442\u043e\u043c \u043d\u0430 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c, \u043d\u0438\u0437\u043a\u0438\u0435 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438 \u0438 \u0431\u0435\u0441\u0448\u043e\u0432\u043d\u043e\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438.<\/p>\n<p>\u041a 2023 \u0433\u043e\u0434\u0443 HarmonyOS \u0441\u0442\u0430\u043b\u0430 \u0442\u0440\u0435\u0442\u044c\u0435\u0439 \u043f\u043e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0439 \u041e\u0421 \u0432 \u041a\u0438\u0442\u0430\u0435. \u0412 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043a\u0432\u0430\u0440\u0442\u0430\u043b\u044b \u043e\u043d\u0430 \u043e\u0431\u0433\u043e\u043d\u044f\u043b\u0430 iOS \u043f\u043e \u0434\u043e\u043b\u0435 \u0440\u044b\u043d\u043a\u0430. \u0412 2024 \u0433\u043e\u0434\u0443 Huawei \u0430\u043d\u043e\u043d\u0441\u0438\u0440\u043e\u0432\u0430\u043b\u0430 HarmonyOS Next \u2014 \u0432\u0435\u0440\u0441\u0438\u044e \u041e\u0421, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438 \u0441 APK. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u0434 HarmonyOS NEXT, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0432 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0435 Huawei.<\/p>\n<h3>\u041d\u0430 \u0447\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c<\/h3>\n<p>ArkTS \u2014 \u044d\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u044f\u0437\u044b\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e\u0434 HarmonyOS, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u0431\u0430\u0437\u0435 TypeScript (\u043a\u043e\u0442\u043e\u0440\u044b\u0439, \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u0442 JavaScript). \u041d\u043e \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e TypeScript \u0441 \u0434\u0440\u0443\u0433\u0438\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u2014 Huawei \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0430 \u0432 \u043d\u0435\u0433\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u044b\u0435 \u0434\u043b\u044f HarmonyOS \u0444\u0438\u0447\u0438, \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u0434 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u0443\u044e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 UI, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u043b\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043b\u0438\u0431\u043e \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u043f\u043b\u043e\u0445\u043e\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0439, \u043b\u0438\u0431\u043e \u043c\u043e\u0436\u0435\u0442 \u0443\u0445\u0443\u0434\u0448\u0438\u0442\u044c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041f\u043e\u043b\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"https:\/\/developer.huawei.com\/consumer\/en\/doc\/harmonyos-guides\/typescript-to-arkts-migration-guide-V5#recipe-objects-with-property-names-that-are-not-identifiers-are-not-supported\">\u0437\u0434\u0435\u0441\u044c<\/a>, \u043d\u043e \u0432\u043e\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432:<\/p>\n<ul>\n<li>\n<p>\u0417\u0430\u043f\u0440\u0435\u0449\u0435\u043d\u044b \u0442\u0438\u043f\u044b any \u0438 unknown. \u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u044f\u0432\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u0442\u0438\u043f\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0438\u043b\u0438 \u0443 \u043f\u043e\u043b\u044f. \u042d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0432 \u0446\u0435\u043b\u044f\u0445 \u0443\u0441\u0438\u043b\u0435\u043d\u043d\u043e\u0439 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u044f \u043e\u0448\u0438\u0431\u043e\u043a.<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u043f\u0440\u0435\u0449\u0435\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c var, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e let \u0438 const. var \u0434\u0430\u0432\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u043f\u043b\u043e\u0445\u043e\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0439 \u0432 JavaScript, \u043e\u0434\u043d\u0430\u043a\u043e \u0432 ArkTS \u043e\u043d \u0437\u0430\u043f\u0440\u0435\u0449\u0435\u043d \u043d\u0430 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u043e\u0439 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u0446\u0435\u043b\u044f\u0445 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043c\u044b \u043e\u0431\u044a\u044f\u0432\u0438\u043c \u0434\u0432\u0430 \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u0430 A \u0438 B, \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043e\u0431\u044a\u044f\u0432\u0438\u043c \u0434\u0432\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 let a = new A() \u0438 let b = new B(), \u043f\u0440\u0438\u0441\u0432\u043e\u0435\u043d\u0438\u044f \u043f\u043e \u0442\u0438\u043f\u0443 a = b \u0438\u043b\u0438 b = a \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0443 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430, \u043f\u043e\u0442\u043e\u043c\u0443 \u043a\u0430\u043a \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c \u0434\u0432\u0430 \u0442\u0438\u043f\u0430 \u0438 \u0440\u0435\u0448\u0438\u0442\u044c, \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u044b \u043e\u043d\u0438 \u0438\u043b\u0438 \u043d\u0435\u0442.<\/p>\n<\/li>\n<\/ul>\n<h3>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u043a \u0440\u0430\u0431\u043e\u0442\u0435<\/h3>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u043e\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043c\u0443\u0437\u044b\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u043b\u0435\u0439\u043b\u0438\u0441\u0442 \u0441 \u0434\u0432\u0443\u043c\u044f \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438 \u2014 \u044d\u043a\u0440\u0430\u043d\u043e\u043c \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u044f \u0438 \u044d\u043a\u0440\u0430\u043d\u043e\u043c \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0442\u0440\u0435\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u044c. \u041d\u0430\u0448\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u2014 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041e\u043d\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u0432\u043e\u043e\u0431\u0449\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u0430 ArkTS \u043f\u043e\u0434 HarmonyOS NEXT.<\/p>\n<p>\u041f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c \u043a\u0430\u043a \u043d\u0430\u0447\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443, \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c \u0447\u0442\u043e \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c:<\/p>\n<ul>\n<li>\n<p>\u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430: Windows 10\/11, \u0438\u043b\u0438 macOS (\u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u044b \u0447\u0438\u043f\u044b Apple Silicon);<\/p>\n<\/li>\n<li>\n<p>DevEco Studio \u0432\u0435\u0440\u0441\u0438\u0438 \u043d\u0435 \u043c\u0435\u043d\u0435\u0435 5.0.0. DevEco Studio \u2014 \u044d\u0442\u043e \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f IDE \u043e\u0442 Huawei \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e\u0434 HarmonyOS. \u041e\u043d\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 ArkTS\/JS\/C++ \u0438 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u044d\u043c\u0443\u043b\u044f\u0442\u043e\u0440\u044b \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u043e\u0432, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0432\u044c\u044e\u0435\u0440\u044b \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0441 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439 HarmonyOS (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0443\u043c\u043d\u044b\u0445 \u0447\u0430\u0441\u043e\u0432).\u00a0<\/p>\n<\/li>\n<\/ul>\n<p>\u0411\u0435\u0437 DevEco Studio \u0432\u044b \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0447\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u2014 \u043f\u0440\u0438 \u0435\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0442\u0430\u043a\u0436\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0443\u0436\u043d\u044b\u0435 SDK, ArkCompiler, \u044d\u043c\u0443\u043b\u044f\u0442\u043e\u0440\u044b, \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, CLI \u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438. \u0427\u0442\u043e\u0431\u044b DevEco Studio \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b, \u0440\u0435\u0433\u0438\u043e\u043d \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d \u043a\u0430\u043a \u041a\u0438\u0442\u0430\u0439 (\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 \/Users\/<em>username<\/em>\/Library\/Application Support\/Huawei\/DevEcoStudio5.0\/options\/country.region.xml), \u0438\u043d\u0430\u0447\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u043d\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f.<\/p>\n<p>\u0424\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0438\u0434 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6ab\/025\/d6c\/6ab025d6c28971a98d5c75ddc9d05a00.gif\" width=\"1328\" height=\"748\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6ab\/025\/d6c\/6ab025d6c28971a98d5c75ddc9d05a00.gif 780w,&#10;       https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6ab\/025\/d6c\/6ab025d6c28971a98d5c75ddc9d05a00.gif 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<h3>\u041d\u0430\u0447\u0430\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u044b<\/h3>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 DevEco Studio. \u0412 \u043e\u043a\u043d\u0435 Welcome to DevEco Studio \u0432\u044b\u0431\u0435\u0440\u0435\u043c Create Project, \u043e\u0441\u0442\u0430\u0432\u0438\u043c \u0448\u0430\u0431\u043b\u043e\u043d Empty Ability \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043d\u0430\u0436\u043c\u0435\u043c Next, \u0432\u044b\u0431\u0435\u0440\u0435\u043c \u0438\u043c\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0438\u043c\u044f \u0431\u0430\u043d\u0434\u043b\u0430, \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043e\u0441\u0442\u0430\u0432\u0438\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u041d\u0430\u0436\u0438\u043c\u0430\u0435\u043c Finish, \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/50b\/6f5\/a5b\/50b6f5a5bce300c944fd5aabd57d0567.png\" width=\"1978\" height=\"1308\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/50b\/6f5\/a5b\/50b6f5a5bce300c944fd5aabd57d0567.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/50b\/6f5\/a5b\/50b6f5a5bce300c944fd5aabd57d0567.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0427\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u044d\u043c\u0443\u043b\u044f\u0442\u043e\u0440. \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u044d\u0442\u043e \u043c\u0435\u043d\u044e \u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c Device Manager:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/35d\/b6c\/77d\/35db6c77db3596044396cb7c093ab06a.png\" width=\"1198\" height=\"668\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/35d\/b6c\/77d\/35db6c77db3596044396cb7c093ab06a.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/35d\/b6c\/77d\/35db6c77db3596044396cb7c093ab06a.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0412 \u043e\u0442\u043a\u0440\u044b\u0432\u0448\u0435\u043c\u0441\u044f \u043c\u0435\u043d\u044e \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c + New Emulator, \u0432\u0441\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0436\u043c\u0435\u043c Next, Next \u0438 Finish. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0432 \u044d\u0442\u043e\u043c \u043c\u0435\u043d\u044e \u043d\u0430\u0448 \u044d\u043c\u0443\u043b\u044f\u0442\u043e\u0440 \u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043d\u043e\u043f\u043a\u0438 \u00ab\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c\u00bb \u2014\u00a0 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043d\u0430 \u043d\u0435\u043c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0447\u0442\u043e\u0431\u044b \u0435\u0433\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c. Hot Module Reloading \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0432\u043d\u043e\u0441\u0438\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u0431\u0443\u0434\u0435\u043c \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<h4>\u0424\u0430\u0439\u043b\u044b \u0438 \u043f\u0430\u043f\u043a\u0438<\/h4>\n<p>\u0412 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0444\u0430\u0439\u043b\u043e\u0432:<\/p>\n<pre><code>\u251c\u2500\u2500 AppScope\/ \u251c\u2500\u2500 entry\/ \u2502   \u251c\u2500\u2500 build\/ \u2502   \u251c\u2500\u2500 src\/ \u2502   \u2502   \u251c\u2500\u2500 main\/ \u2502   \u2502   \u251c\u2500\u2500 ets\/ \u2502   \u2502   \u2502   \u251c\u2500\u2500 entryability\/ \u2502   \u2502   \u2502   \u2502   \u2514\u2500\u2500 EntryAbility.ets \u2502   \u2502   \u2502   \u251c\u2500\u2500 entrybackupability\/ \u2502   \u2502   \u2502   \u2502   \u2514\u2500\u2500 EntryBackupAbility.ets \u2502   \u2502   \u2502   \u2514\u2500\u2500 pages\/ \u2502   \u2502   \u2502       \u2514\u2500\u2500 Index.ets \u2502   \u2502   \u251c\u2500\u2500 resources\/ \u2502   \u2502   \u2502   \u251c\u2500\u2500 base\/ \u2502   \u2502   \u2502   \u2502   \u251c\u2500\u2500 element\/ \u2502   \u2502   \u2502   \u2502   \u2502   \u251c\u2500\u2500 color.json \u2502   \u2502   \u2502   \u2502   \u2502   \u2514\u2500\u2500 string.json \u2502   \u2502   \u2502   \u2502   \u251c\u2500\u2500 media\/ \u2502   \u2502   \u2502   \u2502   \u2514\u2500\u2500 profile\/ \u2502   \u2502   \u2502   \u251c\u2500\u2500 dark\/ \u2502   \u2502   \u2502   \u251c\u2500\u2500 en_US\/ \u2502   \u2502   \u2502   \u251c\u2500\u2500 rawfile\/ \u2502   \u2502   \u2502   \u251c\u2500\u2500 zh_CN\/ \u2502   \u2502   \u2502   \u2514\u2500\u2500 module.json5 \u2502   \u2502   \u251c\u2500\u2500 mock\/ \u2502   \u2502   \u251c\u2500\u2500 ohosTest\/ \u2502   \u2502   \u2514\u2500\u2500 test\/ \u2502   \u251c\u2500\u2500 .gitignore \u2502   \u251c\u2500\u2500 build-profile.json5 \u2502   \u251c\u2500\u2500 hvigorfile.ts \u2502   \u251c\u2500\u2500 obfuscation-rules.txt \u2502   \u251c\u2500\u2500 oh-package.json5 \u2502   \u2514\u2500\u2500 patch.json \u251c\u2500\u2500 hvigor\/ \u251c\u2500\u2500 .gitignore \u251c\u2500\u2500 build-profile.json5 \u251c\u2500\u2500 code-linter.json5 \u251c\u2500\u2500 hvigorfile.ts \u251c\u2500\u2500 local.properties \u251c\u2500\u2500 oh-package.json5 \u2514\u2500\u2500 oh-package-lock.json5<\/code><\/pre>\n<p>\u0424\u0430\u0439\u043b\u044b ArkTS \u0438\u043c\u0435\u044e\u0442 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 .ets, \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0436\u0435 \u0444\u0430\u0439\u043b\u044b \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u043c\u0438:<\/p>\n<ul>\n<li>\n<p>entry\/src\/main\/ets\/entryability\/EntryAbility.ets. \u042d\u0442\u043e \u0432\u0445\u043e\u0434\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0435 \u043e\u043a\u043d\u043e \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043e\u043a\u043d\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>entry\/src\/main\/ets\/pages\/Index.ets. \u042d\u0442\u043e \u044d\u043a\u0440\u0430\u043d \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439. \u041e\u043d \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u041c\u041f, \u0438\u043c\u0435\u043d\u043d\u043e \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u043f\u0438\u0448\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u043b\u044f UI.<\/p>\n<\/li>\n<li>\n<p>entry\/src\/main\/resources\/{base|en_US|zh_CN}\/element\/string.json. \u0417\u0434\u0435\u0441\u044c \u0434\u043b\u044f \u0442\u0440\u0435\u0445 \u044f\u0437\u044b\u043a\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f, \u0437\u0430\u0447\u0435\u043c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0442\u043e \u0438\u043b\u0438 \u0438\u043d\u043e\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>entry\/src\/main\/resources\/profile\/. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043d\u0430\u0448\u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, route_map.json \u0434\u043b\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0434\u0440\u0443\u0433\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p>entry\/src\/main\/resources\/media\/. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u0430\u0448\u0438 \u043c\u0435\u0434\u0438\u0430\u0444\u0430\u0439\u043b\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, SVG \u0438 \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438.<\/p>\n<\/li>\n<li>\n<p>entry\/src\/main\/module.json5. \u042d\u0442\u043e \u0444\u0430\u0439\u043b \u0441 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0435\u0439 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e, \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0438\u043a\u043e\u043d\u043a\u0443, \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0438 \u043c\u043d\u043e\u0433\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043f\u043e \u0441\u0435\u0442\u0438<\/h4>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c\u044b\u0439 Huawei \u043d\u043e\u0432\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438. \u0412 entry\/src\/main\/module.json5 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 router_map:<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430<\/summary>\n<div class=\"spoiler__content\">\n<pre><code>{  \"module\": {    \"name\": \"entry\",    \"type\": \"entry\",    \"description\": \"$string:module_desc\",    \"mainElement\": \"EntryAbility\",    \"deviceTypes\": [      \"phone\",      \"tablet\",      \"2in1\"    ],    \"deliveryWithInstall\": true,    \"installationFree\": false,    \"pages\": \"$profile:main_pages\",    \"abilities\": [      {        \"name\": \"EntryAbility\",        \"srcEntry\": \".\/ets\/entryability\/EntryAbility.ets\",        \"description\": \"$string:EntryAbility_desc\",        \"icon\": \"$media:layered_image\",        \"label\": \"$string:EntryAbility_label\",        \"startWindowIcon\": \"$media:startIcon\", \"startWindowBackground\": \"$color:start_window_background\",        \"exported\": true,        \"skills\": [          {            \"entities\": [              \"entity.system.home\"            ],            \"actions\": [              \"action.system.home\"            ]          }        ]      }    ],    \"extensionAbilities\": [      {        \"name\": \"EntryBackupAbility\",        \"srcEntry\": \".\/ets\/entrybackupability\/EntryBackupAbility.ets\",        \"type\": \"backup\",        \"exported\": false,        \"metadata\": [          {            \"name\": \"ohos.extension.backup\",            \"resource\": \"$profile:backup_config\"          }        ],      }    ],    \"requestPermissions\": [      {        \"name\": \"ohos.permission.INTERNET\",        \"reason\": \"$string:internet_permission_usage_reason\",        \"usedScene\": {          \"abilities\": [\"EntryAbility\"],          \"when\": \"inuse\"        }      }    ],    \"routerMap\": \"$profile:route_map\",  } }<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0434\u0432\u0430 \u043d\u043e\u0432\u044b\u0445 \u043f\u043e\u043b\u044f: requestPermissions \u0438 routerMap. requestPermissions \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0430 routerMap \u2014 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0444\u0430\u0439\u043b \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0432\u0442\u043e\u0440\u0438\u0447\u043d\u044b\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432. \u0427\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c $string:internet_permission_usage_reason, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 entry\/src\/main\/resources\/base\/element.string.json \u043d\u043e\u0432\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c:<\/p>\n<pre><code>{  \"string\": [    {      \"name\": \"module_desc\",      \"value\": \"module description\"    },    {      \"name\": \"EntryAbility_desc\",      \"value\": \"description\"    },    {      \"name\": \"EntryAbility_label\",      \"value\": \"label\"    },    {      \"name\": \"internet_permission_usage_reason\",      \"value\": \"Internet is required for correct functioning of the app\"    }  ] }<\/code><\/pre>\n<p>\u0418 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0442\u0440\u043e\u043a\u0443 \u0432\u044b\u0448\u0435 \u0434\u043b\u044f en_US \u0438 zh_CN. \u0417\u0430\u0442\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u0432 routerMap: entry\/src\/main\/resources\/base\/profile\/route_map.json:<\/p>\n<pre><code>{  \"routerMap\": [    ] }<\/code><\/pre>\n<p>\u041f\u043e\u043a\u0430 \u0447\u0442\u043e \u043e\u0441\u0442\u0430\u0432\u0438\u043c \u0444\u0430\u0439\u043b \u0431\u0435\u0437 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0438\u0445 \u0447\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435. \u041d\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0444\u0430\u0439\u043b\u0430 module.json5 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f\u0445. \u0421\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0438\u043c\u0435\u044e\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0444\u043e\u0440\u043c\u0430\u0442: $\u0442\u0438\u043f_\u0440\u0435\u0441\u0443\u0440\u0441\u0430:\u0438\u043c\u044f_\u0440\u0435\u0441\u0443\u0440\u0441\u0430. \u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0437 module.json5:<\/p>\n<pre><code>\"description\": \"$string:module_desc\", \"label\": \"$string:EntryAbility_label\"<\/code><\/pre>\n<p>\u042d\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0431\u0435\u0440\u0443\u0442\u0441\u044f \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 resources\/base\/element\/string.json.<\/p>\n<pre><code>\"icon\": \"$media:layered_image\", \"startWindowIcon\": \"$media:startIcon\"<\/code><\/pre>\n<p>\u042d\u0442\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0431\u0435\u0440\u0443\u0442\u0441\u044f \u0438\u0437 resources\/base\/media\/.<\/p>\n<pre><code>\"startWindowBackground\": \"$color:start_window_background\"<\/code><\/pre>\n<p>\u042d\u0442\u043e\u0442 \u0446\u0432\u0435\u0442 \u0431\u0435\u0440\u0435\u0442\u0441\u044f \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 \u0432 resources\/base\/element\/color.json.<\/p>\n<pre><code>\"pages\": \"$profile:main_pages\", \"metadata\": {\"resource\": \"$profile:backup_config\"}<\/code><\/pre>\n<p>\u0421\u0441\u044b\u043b\u0430\u044e\u0442\u0441\u044f \u043d\u0430 JSON-\u0444\u0430\u0439\u043b\u044b \u0432 resources\/base\/profile\/.<\/p>\n<p>\u042d\u0442\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0430\u0436\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u044c\u044e \u0440\u0430\u0431\u043e\u0442\u044b \u0441 ArkTS \u0438 \u0435\u0433\u043e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f\u043c\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u043a\u0430\u043a \u0434\u0430\u043b\u0435\u0435 \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438\u0437 \u043a\u043e\u0434\u0430 \u0432 \u0444\u0430\u0439\u043b\u0430\u0445 ArkTS, \u0447\u0435\u0440\u0435\u0437 \u0444\u0443\u043d\u043a\u0446\u0438\u044e $r.<\/p>\n<h4>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0441\u0432\u0435\u0442\u043b\u043e\u0439\/\u0442\u0435\u043c\u043d\u043e\u0439 \u0442\u0435\u043c\u044b<\/h4>\n<p>\u0421\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0438\u043c\u0435\u0435\u0442 \u043b\u0438\u0448\u044c \u0442\u0435\u043a\u0441\u0442 Hello World \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u044d\u043a\u0440\u0430\u043d\u0430. \u0415\u0433\u043e \u043a\u043e\u0434 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code>@Entry @Component struct Index {  @State message: string = 'Hello World';    build() {    RelativeContainer() {      Text(this.message)        .id('HelloWorld')        .fontSize(50)        .fontWeight(FontWeight.Bold)        .alignRules({          center: { anchor: '__container__', align: VerticalAlign.Center },          middle: { anchor: '__container__', align: HorizontalAlign.Center }        })    }    .height('100%')    .width('100%')  } }<\/code><\/pre>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u0438\u0434\u0435\u0442\u044c, \u0447\u0442\u043e \u0432 \u0444\u0430\u0439\u043b\u0430\u0445 .ets (\u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u044f\u0437\u044b\u043a\u0430 ArkTS) \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0441\u043e\u0431\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0438\u0445 \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443:<\/p>\n<ol>\n<li>\n<p>\u041a\u043e\u0434 @Entry \u0438 @Component \u2014 \u044d\u0442\u043e \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. @Entry \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e Index \u2014 \u044d\u0442\u043e \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0430 @Component \u043f\u043e\u043c\u0435\u0447\u0430\u0435\u0442 \u043a\u043b\u0430\u0441\u0441 \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 UI-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u043b\u0435 message \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u043e \u0441 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u043e\u043c @State, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0435\u0433\u043e \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c \u2014 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u0441\u044f.<\/p>\n<\/li>\n<li>\n<p>\u041c\u0435\u0442\u043e\u0434 build \u2014 \u044d\u0442\u043e \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0438\u0439 UI-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443. \u0417\u0434\u0435\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f RelativeContainer \u0434\u043b\u044f \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Text) \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f, \u0437\u0434\u0435\u0441\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0438 \u0432 \u0444\u0438\u0433\u0443\u0440\u043d\u044b\u0445 \u0441\u043a\u043e\u0431\u043a\u0430\u0445 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0441\u0442\u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, .height(\u201c100%\u201d).width(\u201c100%\u201d)).<\/p>\n<\/li>\n<\/ol>\n<p>\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 ArkTS \u043f\u043e\u0447\u0442\u0438 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u043e\u043c TypeScript, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0447\u0442\u043e\u0431\u044b \u0447\u0443\u0442\u044c \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u043d\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u044f\u0437\u044b\u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e (\u0435\u0441\u043b\u0438 \u043d\u0435 \u0431\u044b\u043b\u043e \u0434\u043e \u044d\u0442\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430 \u0441 \u044d\u0442\u0438\u043c \u044f\u0437\u044b\u043a\u043e\u043c), \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0432\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0438\u0437 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 Huawei \u0432 <a href=\"https:\/\/developer.huawei.com\/consumer\/en\/doc\/harmonyos-guides-V5\/learning-arkts-V5\">ArkTS<\/a> \u0438 <a href=\"https:\/\/developer.huawei.com\/consumer\/en\/doc\/harmonyos-guides-V5\/arkui-overview-V5\">ArkUI<\/a>.<\/p>\n<p>ArkUI \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0431\u044a\u0435\u043c\u043d\u044b\u043c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043b\u0438\u0448\u044c \u0441\u0435\u043a\u0446\u0438\u044e Learning ArkTS, \u0430 \u0432\u043e\u0442 \u043f\u043e ArkUI \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0432\u044b\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0434\u0441\u0435\u043a\u0446\u0438\u0439 \u2014 \u044d\u0442\u043e\u0433\u043e \u0445\u0432\u0430\u0442\u0438\u0442 \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0431\u043e\u0442\u044b.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u0434\u0432\u0435 \u0442\u0435\u043c\u044b: \u0441\u0432\u0435\u0442\u043b\u0430\u044f \u0438 \u0442\u0435\u043c\u043d\u0430\u044f. \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u0435\u0440\u0435\u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 \u0432\u0440\u0443\u0447\u043d\u0443\u044e, \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c CustomTheme \u0438\u0437 ArkUI (\u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043e \u043d\u0435\u043c \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/developer.huawei.com\/consumer\/en\/doc\/harmonyos-guides-V5\/theme_skinning-V5\">\u0437\u0434\u0435\u0441\u044c<\/a>). \u0414\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u0443\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0441 \u0432\u0435\u0431-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u043c\u0438, React Native \u0438\u043b\u0438 Flutter, \u043d\u0430\u0448 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u043c.<\/p>\n<p>\u041c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0434\u0432\u0435 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445: \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0442\u0435\u043c\u044b (\u0441\u0432\u0435\u0442\u043b\u0430\u044f\/\u0442\u0435\u043c\u043d\u0430\u044f, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438\u0437 enum), \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u0430\u043c\u0443 \u0442\u0435\u043c\u0443. \u041e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c \u0441 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0439 \u0446\u0432\u0435\u0442\u043e\u0432 \u0438 \u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0439 \u0442\u0435\u043c\u044b, \u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Provide \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c \u0432\u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0438\u0445 \u0443\u0440\u043e\u0432\u043d\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438.\u00a0<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0441\u0430\u043c\u0438 \u0442\u0435\u043c\u044b \u0432 \u0444\u0430\u0439\u043b\u0435 entry\/src\/main\/ets\/feature\/shared\/theme.ets:<\/p>\n<details class=\"spoiler\">\n<summary>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0442\u0435\u043c\u044b<\/summary>\n<div class=\"spoiler__content\">\n<pre><code>import { CustomColors, CustomTheme } from '@kit.ArkUI'   export class AppDarkColors implements CustomColors {  backgroundPrimary: ResourceColor = '#121212';  backgroundSecondary: ResourceColor = '#1e1e1e';  brand: ResourceColor = '#7b2cbf';  fontPrimary: ResourceColor = '#ffffff';  fontSecondary: ResourceColor = '#b3b3b3';  fontOnTertiary: ResourceColor = '#282828'; }   export class AppLightColors implements CustomColors {  backgroundPrimary: ResourceColor = '#f5f5f5';  backgroundSecondary: ResourceColor = '#ffffff';  brand: ResourceColor = '#7b2cbf';  fontPrimary: ResourceColor = '#121212';  fontSecondary: ResourceColor = '#4a4a4a';  fontOnTertiary: ResourceColor = '#f0f0f0'; export class AppDarkTheme implements CustomTheme {  public colors: AppDarkColors = new AppDarkColors() }   export class AppLightTheme implements CustomTheme {  public colors: AppLightColors = new AppLightColors() }   export enum SelectedTheme {  Light = \"Light\",  Dark = \"Dark\", }   export const themesRecord: Record&lt;SelectedTheme, CustomTheme&gt; = {  [SelectedTheme.Light]: new AppLightTheme(),  [SelectedTheme.Dark]: new AppDarkTheme(), };   export const oppositeThemes: Record&lt;SelectedTheme, SelectedTheme&gt; = {  [SelectedTheme.Light]: SelectedTheme.Dark,  [SelectedTheme.Dark]: SelectedTheme.Light, };<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0432 \u043d\u0430\u0448\u0438\u0445 \u043a\u043b\u0430\u0441\u0441\u0430\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 CustomColors, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0445 \u0446\u0432\u0435\u0442\u043e\u0432 \u0438\u0437 ArkUI, \u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 CustomTheme. \u0417\u0430\u0442\u0435\u043c, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u0443\u0434\u043e\u0431\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0442\u0435\u043c\u0430\u043c\u0438 \u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0438\u0437 \u043d\u0438\u0445 \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c, \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 enum \u0438 \u0434\u0432\u0430 Record. \u041e\u043d\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043d\u0430\u043c \u0431\u044b\u0441\u0442\u0440\u043e \u043d\u0430\u0439\u0442\u0438 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u043b\u043e\u0436\u043d\u0443\u044e \u0442\u0435\u043c\u0443 \u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0441\u0430\u043c \u043d\u0430\u0431\u043e\u0440 \u0446\u0432\u0435\u0442\u043e\u0432 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u0435\u043c\u044b.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0430\u043c \u044d\u0442\u0438 \u0446\u0432\u0435\u0442\u0430 (entry\/src\/main\/ets\/feature\/context\/ThemeContext\/ThemeContext.ets):\u0420\u0415\u0430<\/p>\n<details class=\"spoiler\">\n<summary>\u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442<\/summary>\n<div class=\"spoiler__content\">\n<pre><code>import { window } from \"@kit.ArkUI\";   import { SelectedTheme, themesRecord } from \"..\/..\/shared\/theme\";   @Component export struct ThemeContext {  @BuilderParam content: () =&gt; void  @StorageLink('SelectedTheme') @Watch('updateTheme') _selectedTheme: SelectedTheme = SelectedTheme.Light;  @Provide activeTheme: CustomTheme = themesRecord[this._selectedTheme];    aboutToAppear(): void {    this._updateStatusBarColors();  }    updateTheme(_propName: string): void { this.activeTheme = themesRecord[this._selectedTheme];    this._updateStatusBarColors();  }    private _updateStatusBarColors() {    const windowClass = AppStorage.get&lt;window.Window&gt;('windowClass') as window.Window;    windowClass.setWindowSystemBarProperties({      statusBarColor: this.activeTheme.colors?.backgroundPrimary?.toString(),      statusBarContentColor: this.activeTheme.colors?.fontPrimary?.toString(),    });  }    build() {    WithTheme({ theme: this.activeTheme }) {      this.content()    }  } }<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0417\u0434\u0435\u0441\u044c \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c\u0441\u044f \u0447\u0443\u0442\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435. \u042d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0442\u0435\u043c\u043e\u0439 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0422\u0435\u043c\u0430 \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432 AppStorage \u043f\u043e\u0434 \u043a\u043b\u044e\u0447\u043e\u043c SelectedTheme.\u00a0 \u041f\u0440\u0438 \u0435\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0430\u043a\u0442\u0438\u0432\u043d\u0443\u044e \u0442\u0435\u043c\u0443, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0446\u0432\u0435\u0442\u0430 \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 \u0441\u0442\u0430\u0442\u0443\u0441\u0430 (status bar) \u0441 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0442\u0435\u043c\u043e\u0439. \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0442\u0435\u043c\u044b \u0447\u0435\u0440\u0435\u0437 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 @Watch. \u041a\u043e\u0433\u0434\u0430 \u0442\u0435\u043c\u0430 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 activeTheme, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u043d\u043e\u0432\u0443\u044e \u0442\u0435\u043c\u0443 \u0432 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0447\u0435\u0440\u0435\u0437 WithTheme, \u0430 \u0447\u0435\u0440\u0435\u0437 @Provide \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u0435\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c.<\/p>\n<p>\u0412 ArkUI @StorageLink \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0441 AppStorage \u2014 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435\u043c, \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0449\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u0430\u0436\u0435 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u0435\u043d\u044f\u0435\u0442 \u0442\u0435\u043c\u0443, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 SelectedTheme \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430. \u041f\u0440\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f @StorageLink \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0438 \u0442\u0435\u043c\u0430 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u043d\u043e\u0432\u0430.<\/p>\n<p>\u0418\u043c\u043f\u043e\u0440\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044e \u0444\u0430\u0439\u043b\u0430, \u0430 \u0435\u0449\u0435 \u0438 \u043f\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044e \u043f\u0430\u043f\u043a\u0438, \u0435\u0441\u043b\u0438 \u0432 \u043d\u0435\u0439 \u0435\u0441\u0442\u044c \u0444\u0430\u0439\u043b index.ets. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b entry\/src\/main\/ets\/feature\/context\/ThemeContext\/index.ets \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0438\u043c\u043f\u043e\u0440\u0442\u0430\u043c\u0438:<\/p>\n<pre><code>export { ThemeContext } from \".\/ThemeContext\";<\/code><\/pre>\n<h4>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430<\/h4>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u044f, \u043a\u043e\u0434 \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d \u0432 \u0444\u0430\u0439\u043b\u0435 entry\/src\/main\/ets\/pages\/Index.ets:<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u044f <\/summary>\n<div class=\"spoiler__content\">\n<pre><code>import { ThemeContext } from \"..\/feature\/context\/ThemeContext\"; import { SelectedTheme } from \"..\/feature\/shared\/theme\";   PersistentStorage.persistProp('SelectedTheme', SelectedTheme.Light);   @Component struct IndexPage {  @StorageProp('SelectedTheme') selectedTheme: SelectedTheme = SelectedTheme.Light;  @Consume('activeTheme') activeTheme: CustomTheme;  private _pathStack: NavPathStack = new NavPathStack();    build() {    Navigation(this._pathStack) {      Column() {        Column() {          Text(\"Welcome to Harmony\")            .fontSize(32)            .fontWeight(FontWeight.Bold)            .textAlign(TextAlign.Center)            .margin({ bottom: 12 })          Text(\"Your personal music companion\")            .fontSize(18)            .textAlign(TextAlign.Center)            .margin({ bottom: 40 })          Column({ space: 20 }) {            }          .width(\"100%\")          .margin({ bottom: 40 })          Button('Next')            .fontSize(30)            .type(ButtonType.Capsule)            .width('33%')            .height('7.5%')            .onClick(() =&gt; {              this._pathStack.pushPathByName(\"Playlist\", null);            })        }        .width('100%')        .height(\"100%\")        .justifyContent(FlexAlign.Center)        .padding({ bottom: 56 })      }      .height('100%')      .backgroundColor(this.activeTheme.colors?.backgroundPrimary)      .expandSafeArea([SafeAreaType.SYSTEM],        [SafeAreaEdge.TOP, SafeAreaEdge.END, SafeAreaEdge.BOTTOM, SafeAreaEdge.START])    }    .mode(NavigationMode.Stack)    .hideToolBar(true)  } }   @Entry @Component struct Index {  @Builder _buildPage() {    IndexPage()  }    build() {    Column() {      ThemeContext({        content: this._buildPage,      })    }  } }<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u041c\u044b \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043b\u0438 \u043d\u0430\u0448 \u0432\u0445\u043e\u0434\u043d\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u044b \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c \u0442\u0435\u043c\u0443, \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c \u0441\u0430\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441. \u0427\u0435\u0440\u0435\u0437 ThemeContext \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u0430\u0448 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u0438 \u0447\u0435\u0440\u0435\u0437 @Consume(\u2018activeTheme\u2019) \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0438\u0435 \u0446\u0432\u0435\u0442\u0430. \u0417\u0430\u043c\u0435\u0442\u0438\u043c, \u0447\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0430\u043c\u043e\u0439 \u0442\u0435\u043c\u044b (SelectedTheme) \u043d\u0435 \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u0430 \u0447\u0435\u0440\u0435\u0437 @StorageProp. \u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u043c\u0435\u0436\u0434\u0443 @StorageLink\/@StorageProp, @Link\/@Prop \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u0430\u044f: \u0432 @Prop \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c readonly-\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c, \u0430 \u0432 @Link \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043c\u0435\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0447\u0435\u0440\u0435\u0437 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>\u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 Index, \u043c\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0447\u0435\u0440\u0435\u0437 \u043c\u0435\u0442\u043e\u0434 _buildPage, \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044b\u0439 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u043e\u043c @Builder. \u041f\u043e\u043c\u043d\u0438\u0442\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e content \u0432 ThemeContext, \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u043e\u0435 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u043e\u043c @BuilderParam? \u042d\u0442\u0438 \u0434\u0432\u0430 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0441 \u0441\u0432\u044f\u0437\u043a\u0435: \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 @BuilderParam \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 \u0438\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 ArkTS \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0430 @Builder \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0438\u043b\u0438 \u043c\u0435\u0442\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0441\u043e\u0431\u043e\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 ArkTS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0418\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 build(), \u043f\u043e\u0442\u043e\u043c\u0443 \u043a\u0430\u043a \u0435\u0433\u043e \u0434\u0435\u043a\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e.<\/p>\n<p>\u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 IndexPage, \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 NavPathStack, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438. \u041a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432\u0442\u043e\u0440\u043e\u0439 \u044d\u043a\u0440\u0430\u043d, \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0447\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435. \u041f\u043e\u043a\u0430 \u0447\u0442\u043e \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Navigation, \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0442\u0443\u0434\u0430 \u0441\u0442\u0435\u043a \u0438 \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u043c\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u0440\u043e\u043a\u0438 this._pathStack.pushPathByName(&#171;Playlist&#187;, null); \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0432\u0442\u043e\u0440\u043e\u0439 \u044d\u043a\u0440\u0430\u043d. \u0412\u043e\u043e\u0431\u0449\u0435, \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u0432 \u0442\u0430\u043a\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435 \u043c\u043e\u0436\u0435\u0442 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043d\u0435\u043f\u0440\u0438\u0432\u044b\u0447\u043d\u043e\u0439, \u043e\u0434\u043d\u0430\u043a\u043e \u043e\u043d\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043c\u043e\u0449\u043d\u043e\u0439. <\/p>\n<p>\u0412 ArkUI \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u0432\u0435 \u043f\u0430\u0440\u0430\u0434\u0438\u0433\u043c\u044b \u0434\u043b\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438: Router \u0438 Navigation. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Navigation, \u043f\u043e\u0442\u043e\u043c\u0443 \u043a\u0430\u043a \u043d\u0430\u0448\u0430 \u0438\u0434\u0435\u044f \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e, \u043d\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. Navigation \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u043c\u043e\u0449\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c, \u0430 Router \u2014 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u044b\u043c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043d\u043e\u0432\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Navigation. Navigation \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0443: \u043c\u044b \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u043c \u0432 route_map.json \u0441\u043f\u0438\u0441\u043e\u043a \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code>{  \"routerMap\": [    {      \"name\": \"SecondPage\",      \"pageSourceFile\": \"src\/main\/ets\/pages\/SecondPage.ets\",      \"buildFunction\": \"SecondPageBuilder\"    }  ] }<\/code><\/pre>\n<p>\u0412 routerMap \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u044d\u043a\u0440\u0430\u043d\u0430, \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u044d\u043a\u0440\u0430\u043d\u0430, \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u044d\u043a\u0440\u0430\u043d. \u0417\u0434\u0435\u0441\u044c \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u043e \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 Router \u043a\u0430\u0436\u0434\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0434\u0435\u043a\u043e\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f @Entry, \u0430 \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u2014 \u043b\u0438\u0448\u044c \u043e\u0434\u043d\u0430: \u0432\u0442\u043e\u0440\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435 \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u043c \u044d\u043a\u0440\u0430\u043d\u043e\u043c, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043b\u0438\u0431\u043e \u043c\u043e\u0436\u0435\u0442 \u0438\u0445 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043e\u0431\u044a\u044f\u0432\u0438\u043b\u0438 \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0434\u043b\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d \u0438 \u0434\u043b\u044f \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430.<\/p>\n<p>\u041f\u043e \u0441\u0443\u0442\u0438, \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0435 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u043e\u043a\u043d\u0430, \u0430 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u043a\u043e\u043c\u043f\u043d\u043e\u043d\u0435\u043d\u0442\u0430 Navigation. \u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0445\u043e\u0442\u044c \u0438 \u0432\u043d\u0430\u0447\u0430\u043b\u0435 \u0431\u043e\u043b\u0435\u0435 \u043d\u0435\u043f\u0440\u043e\u0441\u0442\u044b\u043c, \u043d\u043e \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0438 \u0433\u0438\u0431\u043a\u0438\u043c, \u043f\u043e\u0442\u043e\u043c\u0443 \u043a\u0430\u043a \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430 \u0432 \u0434\u0440\u0443\u0433\u043e\u0439.\u00a0<\/p>\n<h4>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/h4>\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0445\u0435\u0434\u0435\u0440 \u0438 \u0441\u043f\u0438\u0441\u043e\u043a \u0434\u043e\u0441\u0442\u043e\u0438\u043d\u0441\u0442\u0432. \u041c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0445\u0435\u0434\u0435\u0440 \u0431\u044b\u043b \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c, \u043f\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c. \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043b\u043e\u0433\u0438\u043a\u0430 \u044d\u043a\u0440\u0430\u043d\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0437\u0430\u0433\u0440\u043e\u043c\u043e\u0436\u0434\u0435\u043d\u0430 \u043b\u0438\u0448\u043d\u0438 \u043a\u043e\u0434\u043e\u043c, \u0435\u0441\u043b\u0438 \u043d\u0435 \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0445\u0435\u0434\u0435\u0440 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0441\u0432\u043e\u0439, \u0430 \u043f\u043e\u0442\u043e\u043c\u0443 \u043e\u043d \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430, \u0430 \u043d\u0435 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0432 \u0446\u0435\u043b\u043e\u043c.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0444\u0438\u0447 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435: \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u0438 \u0444\u0430\u0439\u043b\u0430 \u0438\u043a\u043e\u043d\u043a\u0438 \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e @Prop. \u0422\u0430\u043a\u0436\u0435 \u0432 \u0445\u0435\u0434\u0435\u0440\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0443\u0447\u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u0442\u0440\u0435\u043b\u043a\u0438 \u043d\u0430\u0437\u0430\u0434, \u0430 \u043f\u043e\u0442\u043e\u043c\u0443 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u0445\u0435\u0434\u0435\u0440-\u043a\u043e\u043b\u0431\u044d\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043a\u043d\u043e\u043f\u043a\u0438 \u00ab\u041d\u0430\u0437\u0430\u0434\u00bb.<\/p>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430, \u043d\u0430\u0437\u043e\u0432\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Feature (entry\/src\/main\/ets\/feature\/components\/Feature\/Feature.ets):<\/p>\n<pre><code>@Component export struct Feature {  @Consume('activeTheme') activeTheme: CustomTheme;  @Prop assetIconPath: string;  @Prop text: string;    build() {    Row() {      Image($r(this.assetIconPath)).width(24).height(24).margin({ right: 15 })      Text(this.text).fontSize(16).fontWeight(FontWeight.Medium)    }      .alignItems(VerticalAlign.Center)      .padding(15)      .borderRadius(10)      .border({        width: {          left: 4,        },        color: this.activeTheme.colors?.brand,      })      .backgroundColor(this.activeTheme.colors?.backgroundSecondary)      .width(300)  } }<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0440\u0430\u043d\u0435\u0435 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e $r \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0443\u0442\u0438 \u043a \u0441\u0441\u044b\u043b\u043a\u0435 \u0438\u0437 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0442\u0435\u043c\u0443. \u041e\u0442\u043c\u0435\u0447\u0443 \u043d\u043e\u0432\u044b\u0439 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 @Prop: \u043e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432 \u043e\u0434\u043d\u043e\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u043e\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c, \u043a\u0430\u043a props \u0432 React\/Vue. <\/p>\n<p>entry\/src\/main\/ets\/feature\/components\/Feature\/index.ets:<\/p>\n<pre><code>export { Feature } from \".\/Feature\";<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443, Header. \u041f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 @Prop \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043d\u0435\u043b\u044c\u0437\u044f, \u043d\u043e \u0437\u0430\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432.<\/p>\n<p>entry\/src\/main\/ets\/feature\/components\/Header\/Header.types.ets:<\/p>\n<pre><code>interface IHeaderCallbacksParams {  navigateBack?: () =&gt; void; }   export class HeaderCallbacks implements IHeaderCallbacksParams {  navigateBack?: () =&gt; void;    constructor(params: IHeaderCallbacksParams) {    this.navigateBack = params.navigateBack;  } }<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u0438\u0434\u0435\u0442\u044c, \u0447\u0442\u043e HeaderCallbacks \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e \u0441\u0443\u0442\u0438 data-\u043a\u043b\u0430\u0441\u0441\u043e\u043c \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<details class=\"spoiler\">\n<summary>entry\/src\/main\/ets\/feature\/components\/Header\/Header.ets:<\/summary>\n<div class=\"spoiler__content\">\n<pre><code>import { oppositeThemes, SelectedTheme } from \"..\/..\/shared\/theme\"; import { HeaderCallbacks } from \".\/Header.types\";   const iconThemeButtons: Record&lt;SelectedTheme, string&gt; = {  [SelectedTheme.Light]: \"app.media.dark_mode\",  [SelectedTheme.Dark]: \"app.media.light_mode\", };   @Component export struct Header {  @StorageLink('SelectedTheme') selectedTheme: SelectedTheme = SelectedTheme.Light;  @Consume('activeTheme') activeTheme: CustomTheme;  @Prop headerCallbacks: HeaderCallbacks = new HeaderCallbacks({});    private _toggleTheme() {    this.selectedTheme = oppositeThemes[this.selectedTheme];  }    build() {    Row() {      if (this.headerCallbacks.navigateBack) {        Button() {          Image($r(\"app.media.back_arrow\"))            .width(24)            .height(24)            .margin({ right: 8 })        }        .type(ButtonType.Circle)        .width(32)        .height(32)        .padding(4)        .backgroundColor(this.selectedTheme === SelectedTheme.Light ? this.activeTheme.colors?.brand : \"transparent\")        .onClick(() =&gt; {          this.headerCallbacks.navigateBack?.();        })      }      Text(\"Harmony\").fontSize(20).fontWeight(FontWeight.Bold)      Button() {        Image($r(iconThemeButtons[this.selectedTheme])).width(24).height(24)      }      .type(ButtonType.Circle)      .width(32)      .height(32)      .backgroundColor(this.selectedTheme === SelectedTheme.Light ? this.activeTheme.colors?.brand : \"transparent\")      .onClick(() =&gt; {        this._toggleTheme();      })    }      .width(\"100%\")      .justifyContent(FlexAlign.SpaceBetween)      .alignItems(VerticalAlign.Center)      .padding({ top: 10, left: 20, bottom: 15, right: 20 })      .border({        width: {          bottom: 1,        },        color: `${this.activeTheme.colors?.fontPrimary}${this.selectedTheme === SelectedTheme.Light ? \"CC\" : \"\"}`,        style: BorderStyle.Solid,      })      .shadow({ radius: 10, color: Color.Gray })  } }<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u041c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0447\u0435\u0440\u0435\u0437 @Prop \u043d\u0430\u0448 data-\u043a\u043b\u0430\u0441\u0441, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0438 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u043a\u043e\u043b\u0431\u044d\u043a\u0438. \u0412 \u0445\u0435\u0434\u0435\u0440\u0435 \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0442\u0435\u043c\u044b \u0447\u0435\u0440\u0435\u0437 @Consume, \u043d\u043e \u0432\u043e\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043a\u0430\u043a \u0440\u0430\u0437 \u0442\u0430\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f ThemeContext \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0442\u0435\u043c\u044b, @StorageLink(&#8216;SelectedTheme&#8217;), \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438\u043c\u0435\u043d\u043d\u043e \u0447\u0435\u0440\u0435\u0437 @StorageLink, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u0440\u0430\u0437\u0438\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f.<\/p>\n<p>entry\/src\/main\/ets\/feature\/components\/Header\/index.ets:<\/p>\n<pre><code>export { Header } from \".\/Header\"; export { HeaderCallbacks } from \".\/Header.types\";<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u044d\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u0433\u043b\u0430\u0432\u043d\u043e\u043c\u0443 \u044d\u043a\u0440\u0430\u043d\u0443:<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b <\/summary>\n<div class=\"spoiler__content\">\n<pre><code>import { Feature } from \"..\/feature\/components\/Feature\"; import { Header } from \"..\/feature\/components\/Header\"; import { ThemeContext } from \"..\/feature\/context\/ThemeContext\"; import { SelectedTheme } from \"..\/feature\/shared\/theme\"; PersistentStorage.persistProp('SelectedTheme', SelectedTheme.Light);   @Component struct IndexPage {  @StorageProp('SelectedTheme') selectedTheme: SelectedTheme = SelectedTheme.Light;  @Consume('activeTheme') activeTheme: CustomTheme;  private _pathStack: NavPathStack = new NavPathStack();    build() {    Navigation(this._pathStack) {      Column() {        Header()        Column() {          Text(\"Welcome to Harmony\")            .fontSize(32)            .fontWeight(FontWeight.Bold)            .textAlign(TextAlign.Center)            .margin({ bottom: 12 })          Text(\"Your personal music companion\")            .fontSize(18)            .textAlign(TextAlign.Center)            .margin({ bottom: 40 })          Column({ space: 20 }) {            Feature({              assetIconPath: \"app.media.note\",              text: \"Discover new music\",            })            Feature({              assetIconPath: \"app.media.sync\",              text: \"Sync across all your devices\",            })            Feature({              assetIconPath: \"app.media.palette\",              text: \"Customizable interface\",            })          }          .width(\"100%\")          .margin({ bottom: 40 })            Button('Next')            .fontSize(30)            .type(ButtonType.Capsule)            .width('33%')            .height('7.5%')            .onClick(() =&gt; {              this._pathStack.pushPathByName(\"Playlist\", null);            })        }        .width('100%')        .height(\"100%\")        .justifyContent(FlexAlign.Center)        .padding({ bottom: 56 })      }      .height('100%')      .backgroundColor(this.activeTheme.colors?.backgroundPrimary)      .expandSafeArea([SafeAreaType.SYSTEM],        [SafeAreaEdge.TOP, SafeAreaEdge.END, SafeAreaEdge.BOTTOM, SafeAreaEdge.START])    }    .mode(NavigationMode.Stack)    .hideToolBar(true)  } }   @Entry @Component struct Index {  @Builder _buildPage() {    IndexPage()  }    build() {    Column() {      ThemeContext({        content: this._buildPage,      })    }  } }<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0417\u0430\u043c\u0435\u0447\u0443, \u0447\u0442\u043e \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043f\u0443\u0442\u044c \u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c \u0447\u0435\u0440\u0435\u0437 <a href=\"http:\/\/app.media\">app.media<\/a>.\u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u043a\u0430\u043a \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u0430\u0445 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f. \u041d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0438\u043c\u0435\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0432\u0438\u0434 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e3d\/957\/983\/e3d957983191bcb7b394d5e4192f94c5.jpg\" width=\"1067\" height=\"600\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/e3d\/957\/983\/e3d957983191bcb7b394d5e4192f94c5.jpg 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e3d\/957\/983\/e3d957983191bcb7b394d5e4192f94c5.jpg 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<h4>\u042d\u043a\u0440\u0430\u043d \u0441 \u043f\u043b\u0435\u0439\u043b\u0438\u0441\u0442\u043e\u043c<\/h4>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u044d\u043a\u0440\u0430\u043d\u0430 \u0441 \u043f\u043b\u0435\u0439\u043b\u0438\u0441\u0442\u043e\u043c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b ArkTS entry\/src\/main\/ets\/pages\/Playlist.ets \u0438 \u043d\u0430\u043f\u043e\u043b\u043d\u0438\u043c \u0435\u0433\u043e \u0431\u0430\u0437\u043e\u0432\u044b\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c:<\/p>\n<details class=\"spoiler\">\n<summary>entry\/src\/main\/ets\/pages\/Playlist.ets<\/summary>\n<div class=\"spoiler__content\">\n<pre><code>import { Header, HeaderCallbacks } from \"..\/feature\/components\/Header\"; import { SelectedTheme } from \"..\/feature\/shared\/theme\";   PersistentStorage.persistProp('SelectedTheme', SelectedTheme.Light);   @Component struct PlaylistPage {  @StorageProp('SelectedTheme') selectedTheme: SelectedTheme = SelectedTheme.Light;  @Consume('activeTheme') activeTheme: CustomTheme;  private _pathStack: NavPathStack = new NavPathStack()  private _headerCallbacks = new HeaderCallbacks({    navigateBack: () =&gt; {      this._pathStack.pop();    }  });  build() {    NavDestination() {      Column() {        Header({ headerCallbacks: this._headerCallbacks })      }      .height('100%')      .backgroundColor(this.activeTheme.colors?.backgroundPrimary)      .expandSafeArea([SafeAreaType.SYSTEM],        [SafeAreaEdge.TOP, SafeAreaEdge.END, SafeAreaEdge.BOTTOM, SafeAreaEdge.START])    }    .hideTitleBar(true)    .onReady((context: NavDestinationContext) =&gt; {      this._pathStack = context.pathStack;    })  } }   @Component struct Playlist {  @Builder _buildPage() {    PlaylistPage()  }    build() {    this._buildPage()  } }   @Builder export function PlaylistBuilder() {  Playlist() }<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0417\u0434\u0435\u0441\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Playlist \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 (PlaylistBuilder). \u0417\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u043d\u0435\u0442 @Entry, \u0430 \u0432\u043c\u0435\u0441\u0442\u043e @Entry \u0435\u0441\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044f PlaylistBuilder, \u0438\u0434\u0435\u044f \u0432 \u0446\u0435\u043b\u043e\u043c \u0442\u0430\u043a\u0430\u044f \u0436\u0435. \u041e\u0434\u043d\u0430\u043a\u043e \u0437\u0434\u0435\u0441\u044c \u0432\u043c\u0435\u0441\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Navigation \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c NavDestination. \u041f\u0440\u0438 \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u0441 Navigation \u043c\u043e\u0436\u043d\u043e \u0433\u0440\u0443\u0431\u043e \u0440\u0430\u0437\u0431\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043d\u0430 \u0434\u0432\u0430 \u0442\u0438\u043f\u0430: \u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u044e\u0442 \u0441\u0442\u0435\u043a (\u043d\u0430\u0432\u0438\u0433\u0430\u0442\u043e\u0440\u044b), \u0438 \u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438.<\/p>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u0439 \u044d\u043a\u0440\u0430\u043d \u0447\u0435\u0440\u0435\u0437 entry\/src\/main\/resources\/base\/profile\/route_map.json:<\/p>\n<pre><code>{  \"routerMap\": [    {      \"name\": \"Playlist\",      \"pageSourceFile\": \"src\/main\/ets\/pages\/Playlist.ets\",      \"buildFunction\": \"PlaylistBuilder\"    }  ] }<\/code><\/pre>\n<p>\u0423\u0447\u0438\u0442\u044b\u0432\u0430\u044f, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0442\u0440\u0435\u043a\u043e\u0432, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0442\u0440\u0435\u043a\u0430. \u0423 \u043d\u0435\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0434\u0438\u043d \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0439 \u043a\u043e\u043b\u0431\u044d\u043a: \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u0438\u043b\u0438 \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u0430\u0443\u0437. \u041f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u043a\u0430\u0436\u0434\u043e\u043c \u0442\u0440\u0435\u043a\u0435 \u0447\u0435\u0440\u0435\u0437 \u0440\u044f\u0434 @Prop \u2014 \u043f\u043b\u043e\u0445\u043e \u0441\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0441\u0442\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u043e\u0432\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c (\u043e\u0431\u044b\u0447\u043d\u044b\u0439, \u043d\u0438\u0447\u0435\u043c \u043d\u0435 \u043f\u0440\u0438\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441).<\/p>\n<p>entry\/src\/main\/ets\/feature\/models\/Track.ets:<\/p>\n<pre><code>export interface ITrack {  id: string;  title: string;  artist: string;  duration: string;  url: string;  albumArt: string; }<\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c data-\u043a\u043b\u0430\u0441\u0441 \u0434\u043b\u044f \u043a\u043e\u043b\u0431\u044d\u043a\u043e\u0432 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0442\u0440\u0435\u043a\u0430.<\/p>\n<p>entry\/src\/main\/ets\/feature\/components\/Track\/Track.types.ets:<\/p>\n<pre><code>import { ITrack } from \"..\/..\/models\/Track\";   interface ITrackCallbacks {  onTrackSelected?: (track: ITrack) =&gt; void; }   export class TrackCallbacks implements ITrackCallbacks {  onTrackSelected?: (track: ITrack) =&gt; void;    constructor(params: ITrackCallbacks) {    this.onTrackSelected = params.onTrackSelected;  } }<\/code><\/pre>\n<p>\u0418 \u0442\u0435\u043f\u0435\u0440\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/summary>\n<div class=\"spoiler__content\">\n<pre><code>import { ITrack } from \"..\/..\/models\/Track\"; import { SelectedTheme } from \"..\/..\/shared\/theme\"; import { TrackCallbacks } from \".\/Track.types\";   @Component export struct TrackItem {  @StorageLink('SelectedTheme') selectedTheme: SelectedTheme = SelectedTheme.Light;  @Consume('activeTheme') activeTheme: CustomTheme;  @Prop track: ITrack;  @Prop isCurrent: boolean = false;  @Prop isPlaying: boolean = false;  @Prop trackCallbacks: TrackCallbacks = new TrackCallbacks({});    build() {    Row() {      Column() {        Text(this.track.title)          .fontSize(16)          .fontColor(this.activeTheme.colors?.fontPrimary)          .margin({ bottom: 8 })        Text(`${this.track.artist} \u2022 ${this.track.duration}`)          .fontSize(12)          .fontColor('#757575')      }.flexGrow(1)      Button() {        Image($r(this.isCurrent &amp;&amp; this.isPlaying ? 'app.media.pause' : 'app.media.play'))          .width(24)          .height(24)          .onClick(() =&gt; {            this.trackCallbacks.onTrackSelected?.(this.track);          })      }      .type(ButtonType.Circle)      .width(32)      .height(32)      .padding(4)      .backgroundColor(this.selectedTheme === SelectedTheme.Light ? this.activeTheme.colors?.brand : \"transparent\")      .onClick(() =&gt; {        this.trackCallbacks.onTrackSelected?.(this.track);      })    }    .width(\"100%\")    .padding(12)    .margin({ top: 12, bottom: 12 })    .backgroundColor(this.activeTheme.colors?.backgroundSecondary)    .onClick(() =&gt; {      this.trackCallbacks.onTrackSelected?.(this.track);    })  } }<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0421\u044e\u0434\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0447\u0435\u0442\u044b\u0440\u0435 @Prop:<\/p>\n<ul>\n<li>\n<p>track: \u043a\u043b\u0430\u0441\u0441 ITrack, \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0430\u0432\u0442\u043e\u0440\u0430, \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c, ID, URL \u0430\u0443\u0434\u0438\u043e-\u0444\u0430\u0439\u043b\u0430);<\/p>\n<\/li>\n<li>\n<p>isCurrent: \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u0438 \u0442\u0435\u043a\u0443\u0449\u0438\u043c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u043c \u0442\u0440\u0435\u043a\u043e\u043c;<\/p>\n<\/li>\n<li>\n<p>isPlaying: \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043b\u0438 \u0441\u0435\u0439\u0447\u0430\u0441 \u044d\u0442\u043e\u0442 \u0442\u0440\u0435\u043a;<\/p>\n<\/li>\n<li>\n<p>trackCallbacks: data-\u043a\u043b\u0430\u0441\u0441 \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f\/\u043f\u0430\u0443\u0437\u044b.<\/p>\n<\/li>\n<\/ul>\n<p>entry\/src\/main\/ets\/feature\/components\/Track\/index.ets:<\/p>\n<pre><code>export { TrackItem } from \".\/Track\"; export { TrackCallbacks } from \".\/Track.types\";<\/code><\/pre>\n<p>\u0418 \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0430\u043c\u0443 \u043b\u043e\u0433\u0438\u043a\u0443 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0437\u0432\u0443\u043a\u043e\u0432\u044b\u0445 \u0434\u043e\u0440\u043e\u0436\u0435\u043a. \u0427\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u0442\u044c \u0437\u0432\u0443\u043a\u043e\u0432\u044b\u0435 \u0434\u043e\u0440\u043e\u0436\u043a\u0438 \u043f\u043e \u0441\u0435\u0442\u0438 (\u0440\u0430\u043d\u0435\u0435 \u043c\u044b \u0443\u0436\u0435 \u0434\u0430\u043b\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0430 \u0441\u0435\u0442\u0435\u0432\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b) \u0432 \u043f\u043e\u0442\u043e\u043a\u043e\u0432\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435, \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u043c \u0432 Media Kit \u0430\u0443\u0434\u0438\u043e\u043f\u043b\u0435\u0435\u0440\u043e\u043c AVPlayer (\u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u0440\u043e \u043f\u043b\u0435\u0435\u0440 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/developer.huawei.com\/consumer\/en\/doc\/harmonyos-guides-V5\/using-avplayer-for-playback-V5\">\u0437\u0434\u0435\u0441\u044c<\/a>):<\/p>\n<details class=\"spoiler\">\n<summary>Hidden text<\/summary>\n<div class=\"spoiler__content\"><\/div>\n<\/details>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/909090\/\"> https:\/\/habr.com\/ru\/articles\/909090\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><\/figure>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440! \u042d\u0442\u043e \u042e\u0440\u0438\u0439 \u0412\u043e\u043b\u043a\u043e\u0432\u0441\u043a\u0438\u0439, \u0442\u0435\u0445\u043b\u0438\u0434 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 <a href=\"https:\/\/friflex.com\/?utm_source=%D1%85%D0%B0%D0%B1%D1%80&amp;utm_medium=%D1%81%D1%82%D0%B0%D1%82%D1%8C%D1%8F&amp;utm_campaign=%D1%85%D0%B0%D0%B1%D1%8025\">Friflex<\/a>. \u042f \u0440\u0430\u0431\u043e\u0442\u0430\u044e, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435, \u0441 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u043c\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u043d\u0430 React Native. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043f\u043e\u0434 HarmonyOS \u0441\u0440\u0430\u0437\u0443 \u0437\u0430\u0438\u043d\u0442\u0440\u0438\u0433\u043e\u0432\u0430\u043b\u0430 \u043c\u0435\u043d\u044f \u0442\u0435\u043c, \u0447\u0442\u043e ArkTS \u2014 \u044d\u0442\u043e \u043a\u0430\u043a \u0431\u044b TypeScript, \u043d\u043e \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c. \u0418 \u0441\u0430\u043c ArkUI \u0441\u043e\u0447\u0435\u0442\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438 \u0438\u0437 React Native, \u0438 \u0438\u0437 Flutter, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043d\u0435 \u0442\u043e\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c.\u00a0<\/p>\n<p>\u042f \u0440\u0435\u0448\u0438\u043b: \u0441\u043e\u0437\u0434\u0430\u043c \u043d\u0430 Harmony OS \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u044e, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u0440\u0443\u0436\u0435\u043b\u044e\u0431\u043d\u0430 \u044d\u0442\u0430 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430. \u0415\u0441\u043b\u0438 \u0432\u044b \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a (\u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0441 \u043e\u043f\u044b\u0442\u043e\u043c Android \u0438\u043b\u0438 Flutter) \u0438 \u0442\u043e\u0436\u0435 \u0445\u043e\u0442\u0438\u0442\u0435 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u044d\u0442\u043e \u0437\u0430 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 \u0438 \u043a\u0430\u043a \u0441 \u043d\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u2014 \u0432\u044b \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043f\u043b\u0435\u0439\u043b\u0438\u0441\u0442 \u043f\u043e \u0448\u0430\u0433\u0430\u043c. <\/p>\n<h3>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 HarmonyOS?<\/h3>\n<p>HarmonyOS \u2014 \u044d\u0442\u043e \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u0430\u044f Huawei \u0432 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0441\u0430\u043d\u043a\u0446\u0438\u0438 \u0421\u0428\u0410, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u0440\u0435\u0437\u0430\u043b\u0438 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044e \u043e\u0442 Google Mobile Services. \u041f\u0435\u0440\u0432\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0432\u044b\u0448\u043b\u0430 \u0432 2019 \u0433\u043e\u0434\u0443, \u0430 \u0443\u0436\u0435 \u0432 2021 \u0432\u044b\u0448\u043b\u0430 HarmonyOS 2.0 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u043e\u0432.<\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 Huawei \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043b\u0430 HarmonyOS \u043a\u0430\u043a \u0435\u0434\u0438\u043d\u0443\u044e \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0434\u043b\u044f \u0441\u043c\u0430\u0440\u0442\u043e\u0444\u043d\u043e\u0432, \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u043e\u0432, \u0443\u043c\u043d\u044b\u0445 \u0442\u0435\u043b\u0435\u0432\u0438\u0437\u043e\u0440\u043e\u0432 \u0438 \u0447\u0430\u0441\u043e\u0432, \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0441\u0438\u0441\u0442\u0435\u043c \u0438 IoT-\u0433\u0430\u0434\u0436\u0435\u0442\u043e\u0432. \u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 Android, HarmonyOS \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u043b\u0430\u0441\u044c \u043a\u0430\u043a \u043c\u0438\u043a\u0440\u043e\u044f\u0434\u0435\u0440\u043d\u0430\u044f \u041e\u0421 \u0441 \u0430\u043a\u0446\u0435\u043d\u0442\u043e\u043c \u043d\u0430 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c, \u043d\u0438\u0437\u043a\u0438\u0435 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438 \u0438 \u0431\u0435\u0441\u0448\u043e\u0432\u043d\u043e\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438.<\/p>\n<p>\u041a 2023 \u0433\u043e\u0434\u0443 HarmonyOS \u0441\u0442\u0430\u043b\u0430 \u0442\u0440\u0435\u0442\u044c\u0435\u0439 \u043f\u043e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0439 \u041e\u0421 \u0432 \u041a\u0438\u0442\u0430\u0435. \u0412 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043a\u0432\u0430\u0440\u0442\u0430\u043b\u044b \u043e\u043d\u0430 \u043e\u0431\u0433\u043e\u043d\u044f\u043b\u0430 iOS \u043f\u043e \u0434\u043e\u043b\u0435 \u0440\u044b\u043d\u043a\u0430. \u0412 2024 \u0433\u043e\u0434\u0443 Huawei \u0430\u043d\u043e\u043d\u0441\u0438\u0440\u043e\u0432\u0430\u043b\u0430 HarmonyOS Next \u2014 \u0432\u0435\u0440\u0441\u0438\u044e \u041e\u0421, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438 \u0441 APK. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u0434 HarmonyOS NEXT, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0432 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0435 Huawei.<\/p>\n<h3>\u041d\u0430 \u0447\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c<\/h3>\n<p>ArkTS \u2014 \u044d\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u044f\u0437\u044b\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e\u0434 HarmonyOS, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u0431\u0430\u0437\u0435 TypeScript (\u043a\u043e\u0442\u043e\u0440\u044b\u0439, \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u0442 JavaScript). \u041d\u043e \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e TypeScript \u0441 \u0434\u0440\u0443\u0433\u0438\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u2014 Huawei \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0430 \u0432 \u043d\u0435\u0433\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u044b\u0435 \u0434\u043b\u044f HarmonyOS \u0444\u0438\u0447\u0438, \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u0434 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u0443\u044e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 UI, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u043b\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043b\u0438\u0431\u043e \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u043f\u043b\u043e\u0445\u043e\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0439, \u043b\u0438\u0431\u043e \u043c\u043e\u0436\u0435\u0442 \u0443\u0445\u0443\u0434\u0448\u0438\u0442\u044c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041f\u043e\u043b\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"https:\/\/developer.huawei.com\/consumer\/en\/doc\/harmonyos-guides\/typescript-to-arkts-migration-guide-V5#recipe-objects-with-property-names-that-are-not-identifiers-are-not-supported\">\u0437\u0434\u0435\u0441\u044c<\/a>, \u043d\u043e \u0432\u043e\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432:<\/p>\n<ul>\n<li>\n<p>\u0417\u0430\u043f\u0440\u0435\u0449\u0435\u043d\u044b \u0442\u0438\u043f\u044b any \u0438 unknown. \u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u044f\u0432\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u0442\u0438\u043f\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0438\u043b\u0438 \u0443 \u043f\u043e\u043b\u044f. \u042d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0432 \u0446\u0435\u043b\u044f\u0445 \u0443\u0441\u0438\u043b\u0435\u043d\u043d\u043e\u0439 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u044f \u043e\u0448\u0438\u0431\u043e\u043a.<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u043f\u0440\u0435\u0449\u0435\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c var, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e let \u0438 const. var \u0434\u0430\u0432\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u043f\u043b\u043e\u0445\u043e\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0439 \u0432 JavaScript, \u043e\u0434\u043d\u0430\u043a\u043e \u0432 ArkTS \u043e\u043d \u0437\u0430\u043f\u0440\u0435\u0449\u0435\u043d \u043d\u0430 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u043e\u0439 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u0446\u0435\u043b\u044f\u0445 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043c\u044b \u043e\u0431\u044a\u044f\u0432\u0438\u043c \u0434\u0432\u0430 \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u0430 A \u0438 B, \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043e\u0431\u044a\u044f\u0432\u0438\u043c \u0434\u0432\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 let a = new A() \u0438 let b = new B(), \u043f\u0440\u0438\u0441\u0432\u043e\u0435\u043d\u0438\u044f \u043f\u043e \u0442\u0438\u043f\u0443 a = b \u0438\u043b\u0438 b = a \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0443 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430, \u043f\u043e\u0442\u043e\u043c\u0443 \u043a\u0430\u043a \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c \u0434\u0432\u0430 \u0442\u0438\u043f\u0430 \u0438 \u0440\u0435\u0448\u0438\u0442\u044c, \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u044b \u043e\u043d\u0438 \u0438\u043b\u0438 \u043d\u0435\u0442.<\/p>\n<\/li>\n<\/ul>\n<h3>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u043a \u0440\u0430\u0431\u043e\u0442\u0435<\/h3>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u043e\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043c\u0443\u0437\u044b\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u043b\u0435\u0439\u043b\u0438\u0441\u0442 \u0441 \u0434\u0432\u0443\u043c\u044f \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438 \u2014 \u044d\u043a\u0440\u0430\u043d\u043e\u043c \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u044f \u0438 \u044d\u043a\u0440\u0430\u043d\u043e\u043c \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0442\u0440\u0435\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u044c. \u041d\u0430\u0448\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u2014 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041e\u043d\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u0432\u043e\u043e\u0431\u0449\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u0430 ArkTS \u043f\u043e\u0434 HarmonyOS NEXT.<\/p>\n<p>\u041f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c \u043a\u0430\u043a \u043d\u0430\u0447\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443, \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c \u0447\u0442\u043e \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c:<\/p>\n<ul>\n<li>\n<p>\u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430: Windows 10\/11, \u0438\u043b\u0438 macOS (\u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u044b \u0447\u0438\u043f\u044b Apple Silicon);<\/p>\n<\/li>\n<li>\n<p>DevEco Studio \u0432\u0435\u0440\u0441\u0438\u0438 \u043d\u0435 \u043c\u0435\u043d\u0435\u0435 5.0.0. DevEco Studio \u2014 \u044d\u0442\u043e \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f IDE \u043e\u0442 Huawei \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e\u0434 HarmonyOS. \u041e\u043d\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 ArkTS\/JS\/C++ \u0438 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u044d\u043c\u0443\u043b\u044f\u0442\u043e\u0440\u044b \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u043e\u0432, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0432\u044c\u044e\u0435\u0440\u044b \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0441 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439 HarmonyOS (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0443\u043c\u043d\u044b\u0445 \u0447\u0430\u0441\u043e\u0432).\u00a0<\/p>\n<\/li>\n<\/ul>\n<p>\u0411\u0435\u0437 DevEco Studio \u0432\u044b \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0447\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u2014 \u043f\u0440\u0438 \u0435\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0442\u0430\u043a\u0436\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0443\u0436\u043d\u044b\u0435 SDK, ArkCompiler, \u044d\u043c\u0443\u043b\u044f\u0442\u043e\u0440\u044b, \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, CLI \u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438. \u0427\u0442\u043e\u0431\u044b DevEco Studio \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b, \u0440\u0435\u0433\u0438\u043e\u043d \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d \u043a\u0430\u043a \u041a\u0438\u0442\u0430\u0439 (\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 \/Users\/<em>username<\/em>\/Library\/Application Support\/Huawei\/DevEcoStudio5.0\/options\/country.region.xml), \u0438\u043d\u0430\u0447\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u043d\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f.<\/p>\n<p>\u0424\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0438\u0434 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n<figure class=\"full-width\"><\/figure>\n<h3>\u041d\u0430\u0447\u0430\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u044b<\/h3>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 DevEco Studio. \u0412 \u043e\u043a\u043d\u0435 Welcome to DevEco Studio \u0432\u044b\u0431\u0435\u0440\u0435\u043c Create Project, \u043e\u0441\u0442\u0430\u0432\u0438\u043c \u0448\u0430\u0431\u043b\u043e\u043d Empty Ability \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043d\u0430\u0436\u043c\u0435\u043c Next, \u0432\u044b\u0431\u0435\u0440\u0435\u043c \u0438\u043c\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0438\u043c\u044f \u0431\u0430\u043d\u0434\u043b\u0430, \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043e\u0441\u0442\u0430\u0432\u0438\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u041d\u0430\u0436\u0438\u043c\u0430\u0435\u043c Finish, \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0427\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u044d\u043c\u0443\u043b\u044f\u0442\u043e\u0440. \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u044d\u0442\u043e \u043c\u0435\u043d\u044e \u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c Device Manager:<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0412 \u043e\u0442\u043a\u0440\u044b\u0432\u0448\u0435\u043c\u0441\u044f \u043c\u0435\u043d\u044e \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c + New Emulator, \u0432\u0441\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0436\u043c\u0435\u043c Next, Next \u0438 Finish. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0432 \u044d\u0442\u043e\u043c \u043c\u0435\u043d\u044e \u043d\u0430\u0448 \u044d\u043c\u0443\u043b\u044f\u0442\u043e\u0440 \u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043d\u043e\u043f\u043a\u0438 \u00ab\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c\u00bb \u2014\u00a0 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043d\u0430 \u043d\u0435\u043c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0447\u0442\u043e\u0431\u044b \u0435\u0433\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c. Hot Module Reloading \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0432\u043d\u043e\u0441\u0438\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u0431\u0443\u0434\u0435\u043c \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<h4>\u0424\u0430\u0439\u043b\u044b \u0438 \u043f\u0430\u043f\u043a\u0438<\/h4>\n<p>\u0412 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0444\u0430\u0439\u043b\u043e\u0432:<\/p>\n<pre><code>\u251c\u2500\u2500 AppScope\/ \u251c\u2500\u2500 entry\/ \u2502   \u251c\u2500\u2500 build\/ \u2502   \u251c\u2500\u2500 src\/ \u2502   \u2502   \u251c\u2500\u2500 main\/ \u2502   \u2502   \u251c\u2500\u2500 ets\/ \u2502   \u2502   \u2502   \u251c\u2500\u2500 entryability\/ \u2502   \u2502   \u2502   \u2502   \u2514\u2500\u2500 EntryAbility.ets \u2502   \u2502   \u2502   \u251c\u2500\u2500 entrybackupability\/ \u2502   \u2502   \u2502   \u2502   \u2514\u2500\u2500 EntryBackupAbility.ets \u2502   \u2502   \u2502   \u2514\u2500\u2500 pages\/ \u2502   \u2502   \u2502       \u2514\u2500\u2500 Index.ets \u2502   \u2502   \u251c\u2500\u2500 resources\/ \u2502   \u2502   \u2502   \u251c\u2500\u2500 base\/ \u2502   \u2502   \u2502   \u2502   \u251c\u2500\u2500 element\/ \u2502   \u2502   \u2502   \u2502   \u2502   \u251c\u2500\u2500 color.json \u2502   \u2502   \u2502   \u2502   \u2502   \u2514\u2500\u2500 string.json \u2502   \u2502   \u2502   \u2502   \u251c\u2500\u2500 media\/ \u2502   \u2502   \u2502   \u2502   \u2514\u2500\u2500 profile\/ \u2502   \u2502   \u2502   \u251c\u2500\u2500 dark\/ \u2502   \u2502   \u2502   \u251c\u2500\u2500 en_US\/ \u2502   \u2502   \u2502   \u251c\u2500\u2500 rawfile\/ \u2502   \u2502   \u2502   \u251c\u2500\u2500 zh_CN\/ \u2502   \u2502   \u2502   \u2514\u2500\u2500 module.json5 \u2502   \u2502   \u251c\u2500\u2500 mock\/ \u2502   \u2502   \u251c\u2500\u2500 ohosTest\/ \u2502   \u2502   \u2514\u2500\u2500 test\/ \u2502   \u251c\u2500\u2500 .gitignore \u2502   \u251c\u2500\u2500 build-profile.json5 \u2502   \u251c\u2500\u2500 hvigorfile.ts \u2502   \u251c\u2500\u2500 obfuscation-rules.txt \u2502   \u251c\u2500\u2500 oh-package.json5 \u2502   \u2514\u2500\u2500 patch.json \u251c\u2500\u2500 hvigor\/ \u251c\u2500\u2500 .gitignore \u251c\u2500\u2500 build-profile.json5 \u251c\u2500\u2500 code-linter.json5 \u251c\u2500\u2500 hvigorfile.ts \u251c\u2500\u2500 local.properties \u251c\u2500\u2500 oh-package.json5 \u2514\u2500\u2500 oh-package-lock.json5<\/code><\/pre>\n<p>\u0424\u0430\u0439\u043b\u044b ArkTS \u0438\u043c\u0435\u044e\u0442 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 .ets, \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0436\u0435 \u0444\u0430\u0439\u043b\u044b \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u043c\u0438:<\/p>\n<ul>\n<li>\n<p>entry\/src\/main\/ets\/entryability\/EntryAbility.ets. \u042d\u0442\u043e \u0432\u0445\u043e\u0434\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0435 \u043e\u043a\u043d\u043e \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043e\u043a\u043d\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>entry\/src\/main\/ets\/pages\/Index.ets. \u042d\u0442\u043e \u044d\u043a\u0440\u0430\u043d \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439. \u041e\u043d \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u041c\u041f, \u0438\u043c\u0435\u043d\u043d\u043e \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u043f\u0438\u0448\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u043b\u044f UI.<\/p>\n<\/li>\n<li>\n<p>entry\/src\/main\/resources\/{base|en_US|zh_CN}\/element\/string.json. \u0417\u0434\u0435\u0441\u044c \u0434\u043b\u044f \u0442\u0440\u0435\u0445 \u044f\u0437\u044b\u043a\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f, \u0437\u0430\u0447\u0435\u043c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0442\u043e \u0438\u043b\u0438 \u0438\u043d\u043e\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>entry\/src\/main\/resources\/profile\/. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043d\u0430\u0448\u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, route_map.json \u0434\u043b\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0434\u0440\u0443\u0433\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p>entry\/src\/main\/resources\/media\/. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u0430\u0448\u0438 \u043c\u0435\u0434\u0438\u0430\u0444\u0430\u0439\u043b\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, SVG \u0438 \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438.<\/p>\n<\/li>\n<li>\n<p>entry\/src\/main\/module.json5. \u042d\u0442\u043e \u0444\u0430\u0439\u043b \u0441 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0435\u0439 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e, \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0438\u043a\u043e\u043d\u043a\u0443, \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0438 \u043c\u043d\u043e\u0433\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043f\u043e \u0441\u0435\u0442\u0438<\/h4>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c\u044b\u0439 Huawei \u043d\u043e\u0432\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438. \u0412 entry\/src\/main\/module.json5 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 router_map:<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430<\/summary>\n<div class=\"spoiler__content\">\n<pre><code>{  \"module\": {    \"name\": \"entry\",    \"type\": \"entry\",    \"description\": \"$string:module_desc\",    \"mainElement\": \"EntryAbility\",    \"deviceTypes\": [      \"phone\",      \"tablet\",      \"2in1\"    ],    \"deliveryWithInstall\": true,    \"installationFree\": false,    \"pages\": \"$profile:main_pages\",    \"abilities\": [      {        \"name\": \"EntryAbility\",        \"srcEntry\": \".\/ets\/entryability\/EntryAbility.ets\",        \"description\": \"$string:EntryAbility_desc\",        \"icon\": \"$media:layered_image\",        \"label\": \"$string:EntryAbility_label\",        \"startWindowIcon\": \"$media:startIcon\", \"startWindowBackground\": \"$color:start_window_background\",        \"exported\": true,        \"skills\": [          {            \"entities\": [              \"entity.system.home\"            ],            \"actions\": [              \"action.system.home\"            ]          }        ]      }    ],    \"extensionAbilities\": [      {        \"name\": \"EntryBackupAbility\",        \"srcEntry\": \".\/ets\/entrybackupability\/EntryBackupAbility.ets\",        \"type\": \"backup\",        \"exported\": false,        \"metadata\": [          {            \"name\": \"ohos.extension.backup\",            \"resource\": \"$profile:backup_config\"          }        ],      }    ],    \"requestPermissions\": [      {        \"name\": \"ohos.permission.INTERNET\",        \"reason\": \"$string:internet_permission_usage_reason\",        \"usedScene\": {          \"abilities\": [\"EntryAbility\"],          \"when\": \"inuse\"        }      }    ],    \"routerMap\": \"$profile:route_map\",  } }<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0434\u0432\u0430 \u043d\u043e\u0432\u044b\u0445 \u043f\u043e\u043b\u044f: requestPermissions \u0438 routerMap. requestPermissions \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0430 routerMap \u2014 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0444\u0430\u0439\u043b \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0432\u0442\u043e\u0440\u0438\u0447\u043d\u044b\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432. \u0427\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c $string:internet_permission_usage_reason, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 entry\/src\/main\/resources\/base\/element.string.json \u043d\u043e\u0432\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c:<\/p>\n<pre><code>{  \"string\": [    {      \"name\": \"module_desc\",      \"value\": \"module description\"    },    {      \"name\": \"EntryAbility_desc\",      \"value\": \"description\"    },    {      \"name\": \"EntryAbility_label\",      \"value\": \"label\"    },    {      \"name\": \"internet_permission_usage_reason\",      \"value\": \"Internet is required for correct functioning of the app\"    }  ] }<\/code><\/pre>\n<p>\u0418 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0442\u0440\u043e\u043a\u0443 \u0432\u044b\u0448\u0435 \u0434\u043b\u044f en_US \u0438 zh_CN. \u0417\u0430\u0442\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u0432 routerMap: entry\/src\/main\/resources\/base\/profile\/route_map.json:<\/p>\n<pre><code>{  \"routerMap\": [    ] }<\/code><\/pre>\n<p>\u041f\u043e\u043a\u0430 \u0447\u0442\u043e \u043e\u0441\u0442\u0430\u0432\u0438\u043c \u0444\u0430\u0439\u043b \u0431\u0435\u0437 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0438\u0445 \u0447\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435. \u041d\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0444\u0430\u0439\u043b\u0430 module.json5 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f\u0445. \u0421\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0438\u043c\u0435\u044e\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0444\u043e\u0440\u043c\u0430\u0442: $\u0442\u0438\u043f_\u0440\u0435\u0441\u0443\u0440\u0441\u0430:\u0438\u043c\u044f_\u0440\u0435\u0441\u0443\u0440\u0441\u0430. \u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0437 module.json5:<\/p>\n<pre><code>\"description\": \"$string:module_desc\", \"label\": \"$string:EntryAbility_label\"<\/code><\/pre>\n<p>\u042d\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0431\u0435\u0440\u0443\u0442\u0441\u044f <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-459511","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/459511","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=459511"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/459511\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=459511"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=459511"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=459511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}