{"id":110342,"date":"2025-05-24T08:56:10","date_gmt":"2025-05-24T04:26:10","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/practical-guide-to-developing-a-news-app-based-on-harmonyos-next-3h1o\/"},"modified":"2025-05-24T08:56:10","modified_gmt":"2025-05-24T04:26:10","slug":"practical-guide-to-developing-a-news-app-based-on-harmonyos-next-3h1o","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/practical-guide-to-developing-a-news-app-based-on-harmonyos-next-3h1o\/","title":{"rendered":"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0639\u0645\u0644\u06cc \u0628\u0631\u0627\u06cc \u062a\u0647\u06cc\u0647 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0628\u0631\u06cc \u0628\u0631 \u0627\u0633\u0627\u0633 Harmonyos Next"},"content":{"rendered":"<div data-article-id=\"2520366\" id=\"article-body\">\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/practical-guide-to-developing-a-news-app-based-on-harmonyos-next-3h1o\/#1_%D8%A8%D8%B1%D8%B1%D8%B3%DB%8C_%D8%A7%D8%AC%D9%85%D8%A7%D9%84%DB%8C_%D9%BE%D8%B1%D9%88%DA%98%D9%87_%D9%88_%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%D9%85%D8%AD%DB%8C%D8%B7\" >1. \u0628\u0631\u0631\u0633\u06cc \u0627\u062c\u0645\u0627\u0644\u06cc \u067e\u0631\u0648\u0698\u0647 \u0648 \u062a\u0646\u0638\u06cc\u0645 \u0645\u062d\u06cc\u0637<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/practical-guide-to-developing-a-news-app-based-on-harmonyos-next-3h1o\/#2_%D8%A7%D8%AF%D8%BA%D8%A7%D9%85_%D8%B3%D8%B1%D9%88%DB%8C%D8%B3_AppGallery_Connect\" >2. \u0627\u062f\u063a\u0627\u0645 \u0633\u0631\u0648\u06cc\u0633 AppGallery Connect<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/practical-guide-to-developing-a-news-app-based-on-harmonyos-next-3h1o\/#3_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D9%85%D8%AF%D9%84_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7%DB%8C_%D8%AE%D8%A8%D8%B1%DB%8C\" >3. \u0637\u0631\u0627\u062d\u06cc \u0645\u062f\u0644 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062e\u0628\u0631\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/practical-guide-to-developing-a-news-app-based-on-harmonyos-next-3h1o\/#4_%D8%AA%D9%88%D8%B3%D8%B9%D9%87_%D8%B5%D9%81%D8%AD%D9%87_%D9%84%DB%8C%D8%B3%D8%AA_%D8%A7%D8%AE%D8%A8%D8%A7%D8%B1\" >4. \u062a\u0648\u0633\u0639\u0647 \u0635\u0641\u062d\u0647 \u0644\u06cc\u0633\u062a \u0627\u062e\u0628\u0627\u0631<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/practical-guide-to-developing-a-news-app-based-on-harmonyos-next-3h1o\/#5_%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C_%D8%B5%D9%81%D8%AD%D9%87_%D8%AC%D8%B2%D8%A6%DB%8C%D8%A7%D8%AA\" >5. \u0627\u062c\u0631\u0627\u06cc \u0635\u0641\u062d\u0647 \u062c\u0632\u0626\u06cc\u0627\u062a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/practical-guide-to-developing-a-news-app-based-on-harmonyos-next-3h1o\/#6_%D8%A7%D8%AD%D8%B1%D8%A7%D8%B2_%D9%87%D9%88%DB%8C%D8%AA_%D9%88_%D9%86%D8%B4%D8%A7%D9%86%DA%A9_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1\" >6. \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0648 \u0646\u0634\u0627\u0646\u06a9 \u06a9\u0627\u0631\u0628\u0631<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/practical-guide-to-developing-a-news-app-based-on-harmonyos-next-3h1o\/#7_%D8%A8%D8%B3%D8%AA%D9%87_%D8%A8%D9%86%D8%AF%DB%8C_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D9%88_%D8%A7%D9%86%D8%AA%D8%B4%D8%A7%D8%B1\" >7. \u0628\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0648 \u0627\u0646\u062a\u0634\u0627\u0631<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/practical-guide-to-developing-a-news-app-based-on-harmonyos-next-3h1o\/#8_%D9%BE%DB%8C%D8%B4%D9%86%D9%87%D8%A7%D8%AF%D8%A7%D8%AA_%D9%BE%DB%8C%D8%B4%D8%B1%D9%81%D8%AA%D9%87_%D9%88%DB%8C%DA%98%DA%AF%DB%8C\" >8. \u067e\u06cc\u0634\u0646\u0647\u0627\u062f\u0627\u062a \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0648\u06cc\u0698\u06af\u06cc<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"1_%D8%A8%D8%B1%D8%B1%D8%B3%DB%8C_%D8%A7%D8%AC%D9%85%D8%A7%D9%84%DB%8C_%D9%BE%D8%B1%D9%88%DA%98%D9%87_%D9%88_%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%D9%85%D8%AD%DB%8C%D8%B7\"><\/span>\n<p>  1. \u0628\u0631\u0631\u0633\u06cc \u0627\u062c\u0645\u0627\u0644\u06cc \u067e\u0631\u0648\u0698\u0647 \u0648 \u062a\u0646\u0638\u06cc\u0645 \u0645\u062d\u06cc\u0637<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0627 \u0627\u0646\u062a\u0634\u0627\u0631 Harmonyos Next \u060c \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0627\u0632 \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc \u062a\u0648\u0632\u06cc\u0639 \u0634\u062f\u0647 \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u062e\u0648\u062f \u0648 \u067e\u06cc\u0634\u0631\u0641\u062a \u0627\u0628\u0632\u0627\u0631 \u0628\u0647\u0628\u0648\u062f \u06cc\u0627\u0641\u062a\u0647 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u062a\u062c\u0631\u0628\u06cc\u0627\u062a \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0628\u06cc\u0646 \u062f\u0633\u062a\u06af\u0627\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0646\u062f. \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0634\u0645\u0627 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u062a\u0647\u06cc\u0647 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0628\u0631\u06cc \u060c \u067e\u0648\u0634\u0634 \u0645\u0627\u0698\u0648\u0644 \u0647\u0627\u06cc \u0627\u0635\u0644\u06cc \u0645\u0627\u0646\u0646\u062f \u0644\u06cc\u0633\u062a \u0627\u062e\u0628\u0627\u0631 \u060c \u0645\u0634\u0627\u0647\u062f\u0647 \u062f\u0642\u06cc\u0642 \u0648 \u0639\u0645\u0644\u06a9\u0631\u062f \u0646\u0634\u0627\u0646\u06a9 \u060c \u0631\u0627\u0647\u0646\u0645\u0627\u06cc\u06cc \u0645\u06cc \u06a9\u0646\u062f.  <\/p>\n<p>\u0627\u0628\u062a\u062f\u0627 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0645\u062d\u06cc\u0637 \u062a\u0648\u0633\u0639\u0647 \u0634\u0645\u0627 \u0622\u0645\u0627\u062f\u0647 \u0627\u0633\u062a:  <\/p>\n<ol>\n<li>\u0622\u062e\u0631\u06cc\u0646 \u0646\u0633\u062e\u0647 \u0627\u0633\u062a\u0648\u062f\u06cc\u0648\u06cc Deveco (\u062a\u0648\u0635\u06cc\u0647 \u0634\u062f\u0647 4.1 \u06cc\u0627 \u0628\u0627\u0644\u0627\u062a\u0631) \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f.\n<\/li>\n<li>\u0647\u0646\u06af\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u060c &#8220;\u0628\u0631\u0646\u0627\u0645\u0647&#8221; \u2192 &#8220;\u062a\u0648\u0627\u0646\u0627\u06cc\u06cc \u062e\u0627\u0644\u06cc&#8221; \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f.\n<\/li>\n<li>\u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u062e\u062f\u0645\u0627\u062a \u0627\u062a\u0635\u0627\u0644 AppGallery (\u062c\u0632\u0626\u06cc\u0627\u062a \u0628\u0639\u062f\u0627\u064b \u067e\u0648\u0634\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f).\n<\/li>\n<\/ol>\n<p>\u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0631\u0648\u0698\u0647 \u062f\u0631 \u062f\u0631\u062c\u0647 \u0627\u0648\u0644 \u0627\u0632 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \u0627\u0635\u0644\u06cc \u0632\u06cc\u0631 \u062a\u0634\u06a9\u06cc\u0644 \u0634\u062f\u0647 \u0627\u0633\u062a:  <\/p>\n<ul>\n<li>\n<code>pages<\/code>: \u062d\u0627\u0648\u06cc \u06a9\u062f \u0635\u0641\u062d\u0647 \u0627\u0633\u062a.\n<\/li>\n<li>\n<code>resources<\/code>: \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627\u06cc \u0645\u0646\u0627\u0628\u0639 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u062f.\n<\/li>\n<li>\n<code>entryability<\/code>: \u0646\u0642\u0637\u0647 \u0648\u0631\u0648\u062f \u0628\u0631\u0646\u0627\u0645\u0647.\n<\/li>\n<li>\n<code>model<\/code>: \u0644\u0627\u06cc\u0647 \u0645\u062f\u0644 \u062f\u0627\u062f\u0647.\n<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"2_%D8%A7%D8%AF%D8%BA%D8%A7%D9%85_%D8%B3%D8%B1%D9%88%DB%8C%D8%B3_AppGallery_Connect\"><\/span>\n<p>  2. \u0627\u062f\u063a\u0627\u0645 \u0633\u0631\u0648\u06cc\u0633 AppGallery Connect<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>AppGallery Connect \u062e\u062f\u0645\u0627\u062a \u067e\u0634\u062a\u06cc\u0628\u0627\u0646 \u0642\u0648\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc Harmonyos \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f. \u0627\u0628\u062a\u062f\u0627 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0632\u06cc\u0631 \u0631\u0627 \u062a\u06a9\u0645\u06cc\u0644 \u06a9\u0646\u06cc\u062f:  <\/p>\n<ol>\n<li>\u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062f\u0631 \u06a9\u0646\u0633\u0648\u0644 AppGallery Connect \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.\n<\/li>\n<li>\u0633\u0631\u0648\u06cc\u0633 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a (\u0633\u0631\u0648\u06cc\u0633 AUTH) \u0648 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0627\u0628\u0631\u06cc (Cloud DB) \u0631\u0627 \u0641\u0639\u0627\u0644 \u06a9\u0646\u06cc\u062f.\n<\/li>\n<li>\u067e\u0631\u0648\u0646\u062f\u0647 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0631\u0627 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u062f <code>agconnect-services.json<\/code> \u0648 \u0622\u0646 \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f <code>entry<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc\n<\/li>\n<\/ol>\n<p>\u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>build.gradle<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/ entry\/build.gradle  <\/span>\n<span class=\"nx\">dependencies<\/span> <span class=\"p\">{<\/span>  \n    <span class=\"nx\">implementation<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">io.agconnect.agconnect-core-harmony:agconnect-core:1.6.0.300<\/span><span class=\"dl\">'<\/span>  \n    <span class=\"nx\">implementation<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">io.agconnect.agconnect-auth-harmony:agconnect-auth:1.6.0.300<\/span><span class=\"dl\">'<\/span>  \n    <span class=\"nx\">implementation<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">io.agconnect.agconnect-clouddb-harmony:agconnect-clouddb:1.6.0.300<\/span><span class=\"dl\">'<\/span>  \n<span class=\"p\">}<\/span>  \n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u06a9\u062f \u0627\u0648\u0644\u06cc\u0647 \u0633\u0627\u0632\u06cc:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/ entryability\/EntryAbility.ts  <\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">agconnect<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@hw-agconnect\/api-ohos<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>  \n<span class=\"k\">import<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@hw-agconnect\/core-ohos<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>  \n<span class=\"k\">import<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@hw-agconnect\/auth-ohos<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>  \n<span class=\"k\">import<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@hw-agconnect\/clouddb-ohos<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>  \n\n<span class=\"nf\">onCreate<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>  \n    <span class=\"nx\">agconnect<\/span><span class=\"p\">.<\/span><span class=\"nf\">instance<\/span><span class=\"p\">().<\/span><span class=\"nf\">init<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">context<\/span><span class=\"p\">);<\/span>  \n    <span class=\"c1\">\/\/ Initialize Cloud Database  <\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">initCloudDB<\/span><span class=\"p\">();<\/span>  \n<span class=\"p\">}<\/span>  \n\n<span class=\"k\">async<\/span> <span class=\"nf\">initCloudDB<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>  \n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>  \n        <span class=\"kd\">const<\/span> <span class=\"nx\">cloudDBZoneConfig<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">cloud<\/span><span class=\"p\">.<\/span><span class=\"nc\">CloudDBZoneConfig<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">NewsDB<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>  \n        <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">cloudDBZone<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">cloud<\/span><span class=\"p\">.<\/span><span class=\"nx\">CloudDBZone<\/span><span class=\"p\">.<\/span><span class=\"nf\">open<\/span><span class=\"p\">(<\/span><span class=\"nx\">cloudDBZoneConfig<\/span><span class=\"p\">);<\/span>  \n    <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>  \n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">CloudDB init failed: <\/span><span class=\"dl\">'<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">));<\/span>  \n    <span class=\"p\">}<\/span>  \n<span class=\"p\">}<\/span>  \n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"3_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D9%85%D8%AF%D9%84_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7%DB%8C_%D8%AE%D8%A8%D8%B1%DB%8C\"><\/span>\n<p>  3. \u0637\u0631\u0627\u062d\u06cc \u0645\u062f\u0644 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062e\u0628\u0631\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0646\u0648\u0639 \u0634\u06cc\u0621 \u0627\u062e\u0628\u0627\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u0645\u062d\u0644\u06cc \u0648 \u0627\u0628\u0631\u06cc \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0646 <code>News.ts<\/code> \u062f\u0631 <code>model<\/code> \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/ model\/News.ts  <\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">cloud<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@hw-agconnect\/clouddb-ohos<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>  \n\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">News<\/span> <span class=\"p\">{<\/span>  \n    <span class=\"c1\">\/\/ Use decorators to define Cloud DB fields  <\/span>\n    <span class=\"p\">@<\/span><span class=\"nd\">cloud<\/span><span class=\"p\">.<\/span><span class=\"nc\">Field<\/span><span class=\"p\">()<\/span>  \n    <span class=\"nx\">id<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">''<\/span><span class=\"p\">;<\/span>  \n\n    <span class=\"p\">@<\/span><span class=\"nd\">cloud<\/span><span class=\"p\">.<\/span><span class=\"nc\">Field<\/span><span class=\"p\">()<\/span>  \n    <span class=\"nx\">title<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">''<\/span><span class=\"p\">;<\/span>  \n\n    <span class=\"p\">@<\/span><span class=\"nd\">cloud<\/span><span class=\"p\">.<\/span><span class=\"nc\">Field<\/span><span class=\"p\">()<\/span>  \n    <span class=\"nx\">content<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">''<\/span><span class=\"p\">;<\/span>  \n\n    <span class=\"p\">@<\/span><span class=\"nd\">cloud<\/span><span class=\"p\">.<\/span><span class=\"nc\">Field<\/span><span class=\"p\">()<\/span>  \n    <span class=\"nx\">author<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">''<\/span><span class=\"p\">;<\/span>  \n\n    <span class=\"p\">@<\/span><span class=\"nd\">cloud<\/span><span class=\"p\">.<\/span><span class=\"nc\">Field<\/span><span class=\"p\">()<\/span>  \n    <span class=\"nx\">publishTime<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>  \n\n    <span class=\"p\">@<\/span><span class=\"nd\">cloud<\/span><span class=\"p\">.<\/span><span class=\"nc\">Field<\/span><span class=\"p\">()<\/span>  \n    <span class=\"nx\">category<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">''<\/span><span class=\"p\">;<\/span>  \n\n    <span class=\"p\">@<\/span><span class=\"nd\">cloud<\/span><span class=\"p\">.<\/span><span class=\"nc\">Field<\/span><span class=\"p\">()<\/span>  \n    <span class=\"nx\">imageUrl<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">''<\/span><span class=\"p\">;<\/span>  \n\n    <span class=\"p\">@<\/span><span class=\"nd\">cloud<\/span><span class=\"p\">.<\/span><span class=\"nc\">Field<\/span><span class=\"p\">()<\/span>  \n    <span class=\"nx\">isFavorite<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>  \n\n    <span class=\"nf\">constructor<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>  \n        <span class=\"c1\">\/\/ Set object type name (must match the Cloud DB object type)  <\/span>\n        <span class=\"nx\">cloud<\/span><span class=\"p\">.<\/span><span class=\"nx\">ObjectType<\/span><span class=\"p\">.<\/span><span class=\"nf\">register<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">News<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>  \n    <span class=\"p\">}<\/span>  \n<span class=\"p\">}<\/span>  \n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u067e\u0633 \u0627\u0632 \u0627\u06cc\u062c\u0627\u062f \u0646\u0648\u0639 \u0634\u06cc\u0621 \u0645\u0631\u0628\u0648\u0637\u0647 \u062f\u0631 \u06a9\u0646\u0633\u0648\u0644 Cloud DB \u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0639\u0645\u0644\u06cc\u0627\u062a CRUD \u0631\u0627 \u0631\u0648\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f.  <\/p>\n<h2><span class=\"ez-toc-section\" id=\"4_%D8%AA%D9%88%D8%B3%D8%B9%D9%87_%D8%B5%D9%81%D8%AD%D9%87_%D9%84%DB%8C%D8%B3%D8%AA_%D8%A7%D8%AE%D8%A8%D8%A7%D8%B1\"><\/span>\n<p>  4. \u062a\u0648\u0633\u0639\u0647 \u0635\u0641\u062d\u0647 \u0644\u06cc\u0633\u062a \u0627\u062e\u0628\u0627\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0644\u06cc\u0633\u062a \u0627\u062e\u0628\u0627\u0631 \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0633\u062a. \u0645\u0627 \u0627\u0632 <code>List<\/code> \u0645\u0624\u0644\u0641\u0647 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062e\u0628\u0631\u06cc \u0628\u0627 \u0639\u0645\u0644\u06a9\u0631\u062f \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0628\u0647 Re-Refresh \u0648 Infinite.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/ pages\/NewsListPage.ets  <\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">News<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/model\/News<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>  \n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">cloud<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@hw-agconnect\/clouddb-ohos<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>  \n\n<span class=\"p\">@<\/span><span class=\"nd\">Entry<\/span>  \n<span class=\"p\">@<\/span><span class=\"nd\">Component<\/span>  \n<span class=\"nx\">struct<\/span> <span class=\"nx\">NewsListPage<\/span> <span class=\"p\">{<\/span>  \n    <span class=\"p\">@<\/span><span class=\"nd\">State<\/span> <span class=\"nx\">newsList<\/span><span class=\"p\">:<\/span> <span class=\"nb\">Array<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">News<\/span><span class=\"o\">&gt;<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[];<\/span>  \n    <span class=\"p\">@<\/span><span class=\"nd\">State<\/span> <span class=\"nx\">isLoading<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>  \n    <span class=\"p\">@<\/span><span class=\"nd\">State<\/span> <span class=\"nx\">isRefreshing<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>  \n    <span class=\"k\">private<\/span> <span class=\"nx\">pageSize<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">10<\/span><span class=\"p\">;<\/span>  \n    <span class=\"k\">private<\/span> <span class=\"nx\">pageIndex<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>  \n\n    <span class=\"nf\">build<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>  \n        <span class=\"nc\">Column<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>  \n            <span class=\"c1\">\/\/ Header  <\/span>\n            <span class=\"nc\">Row<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>  \n                <span class=\"nc\">Text<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Top News<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>  \n                    <span class=\"p\">.<\/span><span class=\"nf\">fontSize<\/span><span class=\"p\">(<\/span><span class=\"mi\">24<\/span><span class=\"p\">)<\/span>  \n                    <span class=\"p\">.<\/span><span class=\"nf\">fontWeight<\/span><span class=\"p\">(<\/span><span class=\"nx\">FontWeight<\/span><span class=\"p\">.<\/span><span class=\"nx\">Bold<\/span><span class=\"p\">)<\/span>  \n                <span class=\"nc\">Blank<\/span><span class=\"p\">()<\/span>  \n                <span class=\"nc\">Image<\/span><span class=\"p\">(<\/span><span class=\"nf\">$r<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">app.media.ic_search<\/span><span class=\"dl\">'<\/span><span class=\"p\">))<\/span>  \n                    <span class=\"p\">.<\/span><span class=\"nf\">width<\/span><span class=\"p\">(<\/span><span class=\"mi\">30<\/span><span class=\"p\">)<\/span>  \n                    <span class=\"p\">.<\/span><span class=\"nf\">height<\/span><span class=\"p\">(<\/span><span class=\"mi\">30<\/span><span class=\"p\">)<\/span>  \n                    <span class=\"p\">.<\/span><span class=\"nf\">margin<\/span><span class=\"p\">({<\/span> <span class=\"na\">right<\/span><span class=\"p\">:<\/span> <span class=\"mi\">15<\/span> <span class=\"p\">})<\/span>  \n            <span class=\"p\">}<\/span>  \n            <span class=\"p\">.<\/span><span class=\"nf\">width<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">100%<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>  \n            <span class=\"p\">.<\/span><span class=\"nf\">padding<\/span><span class=\"p\">(<\/span><span class=\"mi\">15<\/span><span class=\"p\">)<\/span>  \n            <span class=\"p\">.<\/span><span class=\"nf\">backgroundColor<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">#FF4D4F<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>  \n\n            <span class=\"c1\">\/\/ News list  <\/span>\n            <span class=\"nc\">List<\/span><span class=\"p\">({<\/span> <span class=\"na\">space<\/span><span class=\"p\">:<\/span> <span class=\"mi\">10<\/span> <span class=\"p\">})<\/span> <span class=\"p\">{<\/span>  \n                <span class=\"nc\">ForEach<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">newsList<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"nx\">item<\/span><span class=\"p\">:<\/span> <span class=\"nx\">News<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>  \n                    <span class=\"nc\">ListItem<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>  \n                        <span class=\"nc\">NewsItem<\/span><span class=\"p\">({<\/span> <span class=\"na\">news<\/span><span class=\"p\">:<\/span> <span class=\"nx\">item<\/span> <span class=\"p\">})<\/span>  \n                    <span class=\"p\">}<\/span>  \n                <span class=\"p\">},<\/span> <span class=\"p\">(<\/span><span class=\"nx\">item<\/span><span class=\"p\">:<\/span> <span class=\"nx\">News<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">)<\/span>  \n            <span class=\"p\">}<\/span>  \n            <span class=\"p\">.<\/span><span class=\"nf\">width<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">100%<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>  \n            <span class=\"p\">.<\/span><span class=\"nf\">layoutWeight<\/span><span class=\"p\">(<\/span><span class=\"mi\">1<\/span><span class=\"p\">)<\/span>  \n            <span class=\"p\">.<\/span><span class=\"nf\">onScrollIndex<\/span><span class=\"p\">((<\/span><span class=\"nx\">start<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>  \n                <span class=\"c1\">\/\/ Load more when scrolling to the bottom  <\/span>\n                <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">start<\/span> <span class=\"o\">&gt;=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">newsList<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"o\">-<\/span> <span class=\"mi\">3<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"o\">!<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">isLoading<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>  \n                    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">loadMoreNews<\/span><span class=\"p\">();<\/span>  \n                <span class=\"p\">}<\/span>  \n            <span class=\"p\">})<\/span>  \n            <span class=\"p\">.<\/span><span class=\"nf\">scrollBar<\/span><span class=\"p\">(<\/span><span class=\"nx\">BarState<\/span><span class=\"p\">.<\/span><span class=\"nx\">Off<\/span><span class=\"p\">)<\/span>  \n        <span class=\"p\">}<\/span>  \n        <span class=\"p\">.<\/span><span class=\"nf\">width<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">100%<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>  \n        <span class=\"p\">.<\/span><span class=\"nf\">height<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">100%<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>  \n        <span class=\"p\">.<\/span><span class=\"nf\">onAppear<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>  \n            <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">refreshNews<\/span><span class=\"p\">();<\/span>  \n        <span class=\"p\">})<\/span>  \n    <span class=\"p\">}<\/span>  \n\n    <span class=\"c1\">\/\/ Pull-to-refresh  <\/span>\n    <span class=\"k\">async<\/span> <span class=\"nf\">refreshNews<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>  \n        <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">isRefreshing<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">true<\/span><span class=\"p\">;<\/span>  \n        <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">pageIndex<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>  \n        <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>  \n            <span class=\"kd\">const<\/span> <span class=\"nx\">query<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">cloud<\/span><span class=\"p\">.<\/span><span class=\"nx\">CloudDBZoneQuery<\/span><span class=\"p\">.<\/span><span class=\"nf\">where<\/span><span class=\"p\">(<\/span><span class=\"nx\">News<\/span><span class=\"p\">).<\/span><span class=\"nf\">orderByDesc<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">publishTime<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nf\">limit<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">pageSize<\/span><span class=\"p\">);<\/span>  \n            <span class=\"kd\">const<\/span> <span class=\"nx\">result<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">cloudDBZone<\/span><span class=\"p\">.<\/span><span class=\"nf\">executeQuery<\/span><span class=\"p\">(<\/span><span class=\"nx\">query<\/span><span class=\"p\">,<\/span> <span class=\"nx\">News<\/span><span class=\"p\">);<\/span>  \n            <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">newsList<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">result<\/span><span class=\"p\">;<\/span>  \n        <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>  \n            <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Refresh news failed: <\/span><span class=\"dl\">'<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">));<\/span>  \n        <span class=\"p\">}<\/span>  \n        <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">isRefreshing<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>  \n    <span class=\"p\">}<\/span>  \n\n    <span class=\"c1\">\/\/ Load more  <\/span>\n    <span class=\"k\">async<\/span> <span class=\"nf\">loadMoreNews<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>  \n        <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">isLoading<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">true<\/span><span class=\"p\">;<\/span>  \n        <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">pageIndex<\/span><span class=\"o\">++<\/span><span class=\"p\">;<\/span>  \n        <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>  \n            <span class=\"kd\">const<\/span> <span class=\"nx\">query<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">cloud<\/span><span class=\"p\">.<\/span><span class=\"nx\">CloudDBZoneQuery<\/span><span class=\"p\">.<\/span><span class=\"nf\">where<\/span><span class=\"p\">(<\/span><span class=\"nx\">News<\/span><span class=\"p\">)<\/span>  \n                <span class=\"p\">.<\/span><span class=\"nf\">orderByDesc<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">publishTime<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>  \n                <span class=\"p\">.<\/span><span class=\"nf\">limit<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">pageSize<\/span><span class=\"p\">)<\/span>  \n                <span class=\"p\">.<\/span><span class=\"nf\">offset<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">pageIndex<\/span> <span class=\"o\">*<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">pageSize<\/span><span class=\"p\">);<\/span>  \n            <span class=\"kd\">const<\/span> <span class=\"nx\">result<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">cloudDBZone<\/span><span class=\"p\">.<\/span><span class=\"nf\">executeQuery<\/span><span class=\"p\">(<\/span><span class=\"nx\">query<\/span><span class=\"p\">,<\/span> <span class=\"nx\">News<\/span><span class=\"p\">);<\/span>  \n            <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">newsList<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">newsList<\/span><span class=\"p\">.<\/span><span class=\"nf\">concat<\/span><span class=\"p\">(<\/span><span class=\"nx\">result<\/span><span class=\"p\">);<\/span>  \n        <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>  \n            <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Load more news failed: <\/span><span class=\"dl\">'<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">));<\/span>  \n        <span class=\"p\">}<\/span>  \n        <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">isLoading<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>  \n    <span class=\"p\">}<\/span>  \n<span class=\"p\">}<\/span>  \n\n<span class=\"c1\">\/\/ News item component  <\/span>\n<span class=\"p\">@<\/span><span class=\"nd\">Component<\/span>  \n<span class=\"nx\">struct<\/span> <span class=\"nx\">NewsItem<\/span> <span class=\"p\">{<\/span>  \n    <span class=\"p\">@<\/span><span class=\"nd\">Prop<\/span> <span class=\"nx\">news<\/span><span class=\"p\">:<\/span> <span class=\"nx\">News<\/span><span class=\"p\">;<\/span>  \n\n    <span class=\"nf\">build<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>  \n        <span class=\"nc\">Column<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>  \n            <span class=\"c1\">\/\/ News image  <\/span>\n            <span class=\"nc\">Image<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">news<\/span><span class=\"p\">.<\/span><span class=\"nx\">imageUrl<\/span><span class=\"p\">)<\/span>  \n                <span class=\"p\">.<\/span><span class=\"nf\">width<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">100%<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>  \n                <span class=\"p\">.<\/span><span class=\"nf\">height<\/span><span class=\"p\">(<\/span><span class=\"mi\">200<\/span><span class=\"p\">)<\/span>  \n                <span class=\"p\">.<\/span><span class=\"nf\">objectFit<\/span><span class=\"p\">(<\/span><span class=\"nx\">ImageFit<\/span><span class=\"p\">.<\/span><span class=\"nx\">Cover<\/span><span class=\"p\">)<\/span>  \n                <span class=\"p\">.<\/span><span class=\"nf\">borderRadius<\/span><span class=\"p\">(<\/span><span class=\"mi\">8<\/span><span class=\"p\">)<\/span>  \n\n            <span class=\"c1\">\/\/ Title and summary  <\/span>\n            <span class=\"nc\">Column<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>  \n                <span class=\"nc\">Text<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">news<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"p\">)<\/span>  \n                    <span class=\"p\">.<\/span><span class=\"nf\">fontSize<\/span><span class=\"p\">(<\/span><span class=\"mi\">18<\/span><span class=\"p\">)<\/span>  \n                    <span class=\"p\">.<\/span><span class=\"nf\">fontWeight<\/span><span class=\"p\">(<\/span><span class=\"nx\">FontWeight<\/span><span class=\"p\">.<\/span><span class=\"nx\">Bold<\/span><span class=\"p\">)<\/span>  \n                    <span class=\"p\">.<\/span><span class=\"nf\">margin<\/span><span class=\"p\">({<\/span> <span class=\"na\">bottom<\/span><span class=\"p\">:<\/span> <span class=\"mi\">5<\/span> <span class=\"p\">})<\/span>  \n                <span class=\"nc\">Text<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">news<\/span><span class=\"p\">.<\/span><span class=\"nx\">content<\/span><span class=\"p\">.<\/span><span class=\"nf\">substring<\/span><span class=\"p\">(<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"mi\">50<\/span><span class=\"p\">)<\/span> <span class=\"o\">+<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">...<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>  \n                    <span class=\"p\">.<\/span><span class=\"nf\">fontSize<\/span><span class=\"p\">(<\/span><span class=\"mi\">14<\/span><span class=\"p\">)<\/span>  \n                    <span class=\"p\">.<\/span><span class=\"nf\">fontColor<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">#666<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>  \n            <span class=\"p\">}<\/span>  \n            <span class=\"p\">.<\/span><span class=\"nf\">padding<\/span><span class=\"p\">(<\/span><span class=\"mi\">10<\/span><span class=\"p\">)<\/span>  \n\n            <span class=\"c1\">\/\/ Footer info  <\/span>\n            <span class=\"nc\">Row<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>  \n                <span class=\"nc\">Text<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">news<\/span><span class=\"p\">.<\/span><span class=\"nx\">author<\/span><span class=\"p\">)<\/span>  \n                    <span class=\"p\">.<\/span><span class=\"nf\">fontSize<\/span><span class=\"p\">(<\/span><span class=\"mi\">12<\/span><span class=\"p\">)<\/span>  \n                    <span class=\"p\">.<\/span><span class=\"nf\">fontColor<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">#999<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>  \n                <span class=\"nc\">Blank<\/span><span class=\"p\">()<\/span>  \n                <span class=\"nc\">Text<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">formatTime<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">news<\/span><span class=\"p\">.<\/span><span class=\"nx\">publishTime<\/span><span class=\"p\">))<\/span>  \n                    <span class=\"p\">.<\/span><span class=\"nf\">fontSize<\/span><span class=\"p\">(<\/span><span class=\"mi\">12<\/span><span class=\"p\">)<\/span>  \n                    <span class=\"p\">.<\/span><span class=\"nf\">fontColor<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">#999<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>  \n                <span class=\"nc\">Image<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">news<\/span><span class=\"p\">.<\/span><span class=\"nx\">isFavorite<\/span> <span class=\"p\">?<\/span> <span class=\"nf\">$r<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">app.media.ic_favorite<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"p\">:<\/span> <span class=\"nf\">$r<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">app.media.ic_favorite_border<\/span><span class=\"dl\">'<\/span><span class=\"p\">))<\/span>  \n                    <span class=\"p\">.<\/span><span class=\"nf\">width<\/span><span class=\"p\">(<\/span><span class=\"mi\">20<\/span><span class=\"p\">)<\/span>  \n                    <span class=\"p\">.<\/span><span class=\"nf\">height<\/span><span class=\"p\">(<\/span><span class=\"mi\">20<\/span><span class=\"p\">)<\/span>  \n                    <span class=\"p\">.<\/span><span class=\"nf\">margin<\/span><span class=\"p\">({<\/span> <span class=\"na\">left<\/span><span class=\"p\">:<\/span> <span class=\"mi\">10<\/span> <span class=\"p\">})<\/span>  \n                    <span class=\"p\">.<\/span><span class=\"nf\">onClick<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>  \n                        <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">toggleFavorite<\/span><span class=\"p\">();<\/span>  \n                    <span class=\"p\">})<\/span>  \n            <span class=\"p\">}<\/span>  \n            <span class=\"p\">.<\/span><span class=\"nf\">width<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">100%<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>  \n            <span class=\"p\">.<\/span><span class=\"nf\">padding<\/span><span class=\"p\">({<\/span> <span class=\"na\">left<\/span><span class=\"p\">:<\/span> <span class=\"mi\">10<\/span><span class=\"p\">,<\/span> <span class=\"na\">right<\/span><span class=\"p\">:<\/span> <span class=\"mi\">10<\/span><span class=\"p\">,<\/span> <span class=\"na\">bottom<\/span><span class=\"p\">:<\/span> <span class=\"mi\">10<\/span> <span class=\"p\">})<\/span>  \n        <span class=\"p\">}<\/span>  \n        <span class=\"p\">.<\/span><span class=\"nf\">width<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">95%<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>  \n        <span class=\"p\">.<\/span><span class=\"nf\">margin<\/span><span class=\"p\">({<\/span> <span class=\"na\">top<\/span><span class=\"p\">:<\/span> <span class=\"mi\">5<\/span><span class=\"p\">,<\/span> <span class=\"na\">bottom<\/span><span class=\"p\">:<\/span> <span class=\"mi\">5<\/span> <span class=\"p\">})<\/span>  \n        <span class=\"p\">.<\/span><span class=\"nf\">backgroundColor<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">#FFF<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>  \n        <span class=\"p\">.<\/span><span class=\"nf\">borderRadius<\/span><span class=\"p\">(<\/span><span class=\"mi\">8<\/span><span class=\"p\">)<\/span>  \n        <span class=\"p\">.<\/span><span class=\"nf\">shadow<\/span><span class=\"p\">({<\/span> <span class=\"na\">radius<\/span><span class=\"p\">:<\/span> <span class=\"mi\">4<\/span><span class=\"p\">,<\/span> <span class=\"na\">color<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">#10000000<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">offsetX<\/span><span class=\"p\">:<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"na\">offsetY<\/span><span class=\"p\">:<\/span> <span class=\"mi\">2<\/span> <span class=\"p\">})<\/span>  \n        <span class=\"p\">.<\/span><span class=\"nf\">onClick<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>  \n            <span class=\"nx\">router<\/span><span class=\"p\">.<\/span><span class=\"nf\">pushUrl<\/span><span class=\"p\">({<\/span> <span class=\"na\">url<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">pages\/NewsDetailPage<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"na\">params<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"na\">newsId<\/span><span class=\"p\">:<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">news<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"p\">}<\/span> <span class=\"p\">});<\/span>  \n        <span class=\"p\">})<\/span>  \n    <span class=\"p\">}<\/span>  \n\n    <span class=\"c1\">\/\/ Format timestamp  <\/span>\n    <span class=\"k\">private<\/span> <span class=\"nf\">formatTime<\/span><span class=\"p\">(<\/span><span class=\"nx\">timestamp<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">):<\/span> <span class=\"kr\">string<\/span> <span class=\"p\">{<\/span>  \n        <span class=\"kd\">const<\/span> <span class=\"nx\">date<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Date<\/span><span class=\"p\">(<\/span><span class=\"nx\">timestamp<\/span><span class=\"p\">);<\/span>  \n        <span class=\"k\">return<\/span> <span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"nx\">date<\/span><span class=\"p\">.<\/span><span class=\"nf\">getMonth<\/span><span class=\"p\">()<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">date<\/span><span class=\"p\">.<\/span><span class=\"nf\">getDate<\/span><span class=\"p\">()}<\/span><span class=\"s2\">`<\/span><span class=\"p\">;<\/span>  \n    <span class=\"p\">}<\/span>  \n\n    <span class=\"c1\">\/\/ Toggle bookmark  <\/span>\n    <span class=\"k\">private<\/span> <span class=\"k\">async<\/span> <span class=\"nf\">toggleFavorite<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>  \n        <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>  \n            <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">news<\/span><span class=\"p\">.<\/span><span class=\"nx\">isFavorite<\/span> <span class=\"o\">=<\/span> <span class=\"o\">!<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">news<\/span><span class=\"p\">.<\/span><span class=\"nx\">isFavorite<\/span><span class=\"p\">;<\/span>  \n            <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">cloudDBZone<\/span><span class=\"p\">.<\/span><span class=\"nf\">executeUpsert<\/span><span class=\"p\">([<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">news<\/span><span class=\"p\">]);<\/span>  \n        <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>  \n            <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Toggle favorite failed: <\/span><span class=\"dl\">'<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">));<\/span>  \n        <span class=\"p\">}<\/span>  \n    <span class=\"p\">}<\/span>  \n<span class=\"p\">}<\/span>  \n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"5_%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C_%D8%B5%D9%81%D8%AD%D9%87_%D8%AC%D8%B2%D8%A6%DB%8C%D8%A7%D8%AA\"><\/span>\n<p>  5. \u0627\u062c\u0631\u0627\u06cc \u0635\u0641\u062d\u0647 \u062c\u0632\u0626\u06cc\u0627\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0635\u0641\u062d\u0647 \u062c\u0632\u0626\u06cc\u0627\u062a \u0627\u062e\u0628\u0627\u0631 \u0645\u0637\u0627\u0644\u0628 \u06a9\u0627\u0645\u0644 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0627\u0632 \u0646\u0634\u0627\u0646\u0647 \u06af\u0630\u0627\u0631\u06cc \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/ pages\/NewsDetailPage.ets  <\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">News<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/model\/News<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>  \n\n<span class=\"p\">@<\/span><span class=\"nd\">Entry<\/span>  \n<span class=\"p\">@<\/span><span class=\"nd\">Component<\/span>  \n<span class=\"nx\">struct<\/span> <span class=\"nx\">NewsDetailPage<\/span> <span class=\"p\">{<\/span>  \n    <span class=\"p\">@<\/span><span class=\"nd\">State<\/span> <span class=\"nx\">news<\/span><span class=\"p\">:<\/span> <span class=\"nx\">News<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">News<\/span><span class=\"p\">();<\/span>  \n    <span class=\"k\">private<\/span> <span class=\"nx\">newsId<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">''<\/span><span class=\"p\">;<\/span>  \n\n    <span class=\"nf\">onPageShow<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>  \n        <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">newsId<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">router<\/span><span class=\"p\">.<\/span><span class=\"nf\">getParams<\/span><span class=\"p\">()?.<\/span><span class=\"nx\">newsId<\/span><span class=\"p\">;<\/span>  \n        <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">loadNewsDetail<\/span><span class=\"p\">();<\/span>  \n    <span class=\"p\">}<\/span>  \n\n    <span class=\"nf\">build<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>  \n        <span class=\"nc\">Column<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>  \n            <span class=\"c1\">\/\/ Back button and title  <\/span>\n            <span class=\"nc\">Row<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>  \n                <span class=\"nc\">Image<\/span><span class=\"p\">(<\/span><span class=\"nf\">$r<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">app.media.ic_back<\/span><span class=\"dl\">'<\/span><span class=\"p\">))<\/span>  \n                    <span class=\"p\">.<\/span><span class=\"nf\">width<\/span><span class=\"p\">(<\/span><span class=\"mi\">24<\/span><span class=\"p\">)<\/span>  \n                    <span class=\"p\">.<\/span><span class=\"nf\">height<\/span><span class=\"p\">(<\/span><span class=\"mi\">24<\/span><span class=\"p\">)<\/span>  \n                    <span class=\"p\">.<\/span><span class=\"nf\">onClick<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>  \n                        <span class=\"nx\">router<\/span><span class=\"p\">.<\/span><span class=\"nf\">back<\/span><span class=\"p\">();<\/span>  \n                    <span class=\"p\">})<\/span>  \n                <span class=\"nc\">Text<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">News Detail<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>  \n                    <span class=\"p\">.<\/span><span class=\"nf\">fontSize<\/span><span class=\"p\">(<\/span><span class=\"mi\">20<\/span><span class=\"p\">)<\/span>  \n                    <span class=\"p\">.<\/span><span class=\"nf\">fontWeight<\/span><span class=\"p\">(<\/span><span class=\"nx\">FontWeight<\/span><span class=\"p\">.<\/span><span class=\"nx\">Bold<\/span><span class=\"p\">)<\/span>  \n                    <span class=\"p\">.<\/span><span class=\"nf\">margin<\/span><span class=\"p\">({<\/span> <span class=\"na\">left<\/span><span class=\"p\">:<\/span> <span class=\"mi\">15<\/span> <span class=\"p\">})<\/span>  \n                <span class=\"nc\">Blank<\/span><span class=\"p\">()<\/span>  \n                <span class=\"nc\">Image<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">news<\/span><span class=\"p\">.<\/span><span class=\"nx\">isFavorite<\/span> <span class=\"p\">?<\/span> <span class=\"nf\">$r<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">app.media.ic_favorite<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"p\">:<\/span> <span class=\"nf\">$r<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">app.media.ic_favorite_border<\/span><span class=\"dl\">'<\/span><span class=\"p\">))<\/span>  \n                    <span class=\"p\">.<\/span><span class=\"nf\">width<\/span><span class=\"p\">(<\/span><span class=\"mi\">24<\/span><span class=\"p\">)<\/span>  \n                    <span class=\"p\">.<\/span><span class=\"nf\">height<\/span><span class=\"p\">(<\/span><span class=\"mi\">24<\/span><span class=\"p\">)<\/span>  \n                    <span class=\"p\">.<\/span><span class=\"nf\">onClick<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>  \n                        <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">toggleFavorite<\/span><span class=\"p\">();<\/span>  \n                    <span class=\"p\">})<\/span>  \n            <span class=\"p\">}<\/span>  \n            <span class=\"p\">.<\/span><span class=\"nf\">width<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">100%<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>  \n            <span class=\"p\">.<\/span><span class=\"nf\">padding<\/span><span class=\"p\">(<\/span><span class=\"mi\">15<\/span><span class=\"p\">)<\/span>  \n            <span class=\"p\">.<\/span><span class=\"nf\">backgroundColor<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">#FF4D4F<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>  \n\n            <span class=\"c1\">\/\/ Content area  <\/span>\n            <span class=\"nc\">Scroll<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>  \n                <span class=\"nc\">Column<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>  \n                    <span class=\"c1\">\/\/ Title and author info  <\/span>\n                    <span class=\"nc\">Text<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">news<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"p\">)<\/span>  \n                        <span class=\"p\">.<\/span><span class=\"nf\">fontSize<\/span><span class=\"p\">(<\/span><span class=\"mi\">22<\/span><span class=\"p\">)<\/span>  \n                        <span class=\"p\">.<\/span><span class=\"nf\">fontWeight<\/span><span class=\"p\">(<\/span><span class=\"nx\">FontWeight<\/span><span class=\"p\">.<\/span><span class=\"nx\">Bold<\/span><span class=\"p\">)<\/span>  \n                        <span class=\"p\">.<\/span><span class=\"nf\">margin<\/span><span class=\"p\">({<\/span> <span class=\"na\">bottom<\/span><span class=\"p\">:<\/span> <span class=\"mi\">10<\/span> <span class=\"p\">})<\/span>  \n                    <span class=\"nc\">Row<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>  \n                        <span class=\"nc\">Text<\/span><span class=\"p\">(<\/span><span class=\"s2\">`Author: <\/span><span class=\"p\">${<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">news<\/span><span class=\"p\">.<\/span><span class=\"nx\">author<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"p\">)<\/span>  \n                            <span class=\"p\">.<\/span><span class=\"nf\">fontSize<\/span><span class=\"p\">(<\/span><span class=\"mi\">14<\/span><span class=\"p\">)<\/span>  \n                            <span class=\"p\">.<\/span><span class=\"nf\">fontColor<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">#666<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>  \n                        <span class=\"nc\">Text<\/span><span class=\"p\">(<\/span><span class=\"s2\">`Published: <\/span><span class=\"p\">${<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nf\">formatTime<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">news<\/span><span class=\"p\">.<\/span><span class=\"nx\">publishTime<\/span><span class=\"p\">)}<\/span><span class=\"s2\">`<\/span><span class=\"p\">)<\/span>  \n                            <span class=\"p\">.<\/span><span class=\"nf\">fontSize<\/span><span class=\"p\">(<\/span><span class=\"mi\">14<\/span><span class=\"p\">)<\/span>  \n                            <span class=\"p\">.<\/span><span class=\"nf\">fontColor<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">#666<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>  \n                            <span class=\"p\">.<\/span><span class=\"nf\">margin<\/span><span class=\"p\">({<\/span> <span class=\"na\">left<\/span><span class=\"p\">:<\/span> <span class=\"mi\">15<\/span> <span class=\"p\">})<\/span>  \n                    <span class=\"p\">}<\/span>  \n                    <span class=\"p\">.<\/span><span class=\"nf\">margin<\/span><span class=\"p\">({<\/span> <span class=\"na\">bottom<\/span><span class=\"p\">:<\/span> <span class=\"mi\">15<\/span> <span class=\"p\">})<\/span>  \n\n                    <span class=\"c1\">\/\/ News image  <\/span>\n                    <span class=\"nc\">Image<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">news<\/span><span class=\"p\">.<\/span><span class=\"nx\">imageUrl<\/span><span class=\"p\">)<\/span>  \n                        <span class=\"p\">.<\/span><span class=\"nf\">width<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">100%<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>  \n                        <span class=\"p\">.<\/span><span class=\"nf\">height<\/span><span class=\"p\">(<\/span><span class=\"mi\">250<\/span><span class=\"p\">)<\/span>  \n                        <span class=\"p\">.<\/span><span class=\"nf\">objectFit<\/span><span class=\"p\">(<\/span><span class=\"nx\">ImageFit<\/span><span class=\"p\">.<\/span><span class=\"nx\">Cover<\/span><span class=\"p\">)<\/span>  \n                        <span class=\"p\">.<\/span><span class=\"nf\">margin<\/span><span class=\"p\">({<\/span> <span class=\"na\">bottom<\/span><span class=\"p\">:<\/span> <span class=\"mi\">20<\/span> <span class=\"p\">})<\/span>  \n\n                    <span class=\"c1\">\/\/ News content  <\/span>\n                    <span class=\"nc\">Text<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">news<\/span><span class=\"p\">.<\/span><span class=\"nx\">content<\/span><span class=\"p\">)<\/span>  \n                        <span class=\"p\">.<\/span><span class=\"nf\">fontSize<\/span><span class=\"p\">(<\/span><span class=\"mi\">16<\/span><span class=\"p\">)<\/span>  \n                        <span class=\"p\">.<\/span><span class=\"nf\">lineHeight<\/span><span class=\"p\">(<\/span><span class=\"mi\">26<\/span><span class=\"p\">)<\/span>  \n                <span class=\"p\">}<\/span>  \n                <span class=\"p\">.<\/span><span class=\"nf\">padding<\/span><span class=\"p\">(<\/span><span class=\"mi\">20<\/span><span class=\"p\">)<\/span>  \n            <span class=\"p\">}<\/span>  \n            <span class=\"p\">.<\/span><span class=\"nf\">scrollBar<\/span><span class=\"p\">(<\/span><span class=\"nx\">BarState<\/span><span class=\"p\">.<\/span><span class=\"nx\">Off<\/span><span class=\"p\">)<\/span>  \n            <span class=\"p\">.<\/span><span class=\"nf\">layoutWeight<\/span><span class=\"p\">(<\/span><span class=\"mi\">1<\/span><span class=\"p\">)<\/span>  \n        <span class=\"p\">}<\/span>  \n        <span class=\"p\">.<\/span><span class=\"nf\">width<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">100%<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>  \n        <span class=\"p\">.<\/span><span class=\"nf\">height<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">100%<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>  \n    <span class=\"p\">}<\/span>  \n\n    <span class=\"c1\">\/\/ Load news details  <\/span>\n    <span class=\"k\">private<\/span> <span class=\"k\">async<\/span> <span class=\"nf\">loadNewsDetail<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>  \n        <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>  \n            <span class=\"kd\">const<\/span> <span class=\"nx\">query<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">cloud<\/span><span class=\"p\">.<\/span><span class=\"nx\">CloudDBZoneQuery<\/span><span class=\"p\">.<\/span><span class=\"nf\">where<\/span><span class=\"p\">(<\/span><span class=\"nx\">News<\/span><span class=\"p\">).<\/span><span class=\"nf\">equalTo<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">id<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">newsId<\/span><span class=\"p\">);<\/span>  \n            <span class=\"kd\">const<\/span> <span class=\"nx\">result<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">cloudDBZone<\/span><span class=\"p\">.<\/span><span class=\"nf\">executeQuery<\/span><span class=\"p\">(<\/span><span class=\"nx\">query<\/span><span class=\"p\">,<\/span> <span class=\"nx\">News<\/span><span class=\"p\">);<\/span>  \n            <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">result<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"o\">&gt;<\/span> <span class=\"mi\">0<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>  \n                <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">news<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">result<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">];<\/span>  \n            <span class=\"p\">}<\/span>  \n        <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>  \n            <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Load news detail failed: <\/span><span class=\"dl\">'<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">));<\/span>  \n        <span class=\"p\">}<\/span>  \n    <span class=\"p\">}<\/span>  \n\n    <span class=\"c1\">\/\/ Toggle bookmark  <\/span>\n    <span class=\"k\">private<\/span> <span class=\"k\">async<\/span> <span class=\"nf\">toggleFavorite<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>  \n        <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>  \n            <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">news<\/span><span class=\"p\">.<\/span><span class=\"nx\">isFavorite<\/span> <span class=\"o\">=<\/span> <span class=\"o\">!<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">news<\/span><span class=\"p\">.<\/span><span class=\"nx\">isFavorite<\/span><span class=\"p\">;<\/span>  \n            <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">cloudDBZone<\/span><span class=\"p\">.<\/span><span class=\"nf\">executeUpsert<\/span><span class=\"p\">([<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">news<\/span><span class=\"p\">]);<\/span>  \n        <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>  \n            <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Toggle favorite failed: <\/span><span class=\"dl\">'<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">));<\/span>  \n        <span class=\"p\">}<\/span>  \n    <span class=\"p\">}<\/span>  \n\n    <span class=\"c1\">\/\/ Format timestamp  <\/span>\n    <span class=\"k\">private<\/span> <span class=\"nf\">formatTime<\/span><span class=\"p\">(<\/span><span class=\"nx\">timestamp<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">):<\/span> <span class=\"kr\">string<\/span> <span class=\"p\">{<\/span>  \n        <span class=\"kd\">const<\/span> <span class=\"nx\">date<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Date<\/span><span class=\"p\">(<\/span><span class=\"nx\">timestamp<\/span><span class=\"p\">);<\/span>  \n        <span class=\"k\">return<\/span> <span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"nx\">date<\/span><span class=\"p\">.<\/span><span class=\"nf\">getFullYear<\/span><span class=\"p\">()}<\/span><span class=\"s2\">\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">date<\/span><span class=\"p\">.<\/span><span class=\"nf\">getMonth<\/span><span class=\"p\">()<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">date<\/span><span class=\"p\">.<\/span><span class=\"nf\">getDate<\/span><span class=\"p\">()}<\/span><span class=\"s2\">`<\/span><span class=\"p\">;<\/span>  \n    <span class=\"p\">}<\/span>  \n<span class=\"p\">}<\/span>  \n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"6_%D8%A7%D8%AD%D8%B1%D8%A7%D8%B2_%D9%87%D9%88%DB%8C%D8%AA_%D9%88_%D9%86%D8%B4%D8%A7%D9%86%DA%A9_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1\"><\/span>\n<p>  6. \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u0648 \u0646\u0634\u0627\u0646\u06a9 \u06a9\u0627\u0631\u0628\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0646\u0634\u0627\u0646\u0647 \u06af\u0630\u0627\u0631\u06cc \u060c \u062a\u0623\u06cc\u06cc\u062f \u0647\u0648\u06cc\u062a \u06a9\u0627\u0631\u0628\u0631 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0633\u0631\u0648\u06cc\u0633 AppGallery Connect Auth.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/ utils\/AuthUtil.ts  <\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">agconnect<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@hw-agconnect\/api-ohos<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>  \n<span class=\"k\">import<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@hw-agconnect\/auth-ohos<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>  \n\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">AuthUtil<\/span> <span class=\"p\">{<\/span>  \n    <span class=\"c1\">\/\/ Anonymous login  <\/span>\n    <span class=\"k\">static<\/span> <span class=\"k\">async<\/span> <span class=\"nf\">anonymousLogin<\/span><span class=\"p\">():<\/span> <span class=\"nb\">Promise<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">boolean<\/span><span class=\"o\">&gt;<\/span> <span class=\"p\">{<\/span>  \n        <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>  \n            <span class=\"kd\">const<\/span> <span class=\"nx\">user<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">agconnect<\/span><span class=\"p\">.<\/span><span class=\"nf\">auth<\/span><span class=\"p\">().<\/span><span class=\"nf\">signInAnonymously<\/span><span class=\"p\">();<\/span>  \n            <span class=\"k\">return<\/span> <span class=\"nx\">user<\/span> <span class=\"o\">!=<\/span> <span class=\"kc\">null<\/span><span class=\"p\">;<\/span>  \n        <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>  \n            <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Anonymous login failed: <\/span><span class=\"dl\">'<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">));<\/span>  \n            <span class=\"k\">return<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>  \n        <span class=\"p\">}<\/span>  \n    <span class=\"p\">}<\/span>  \n\n    <span class=\"c1\">\/\/ Get current user ID  <\/span>\n    <span class=\"k\">static<\/span> <span class=\"nf\">getCurrentUserId<\/span><span class=\"p\">():<\/span> <span class=\"kr\">string<\/span> <span class=\"o\">|<\/span> <span class=\"kc\">null<\/span> <span class=\"p\">{<\/span>  \n        <span class=\"kd\">const<\/span> <span class=\"nx\">user<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">agconnect<\/span><span class=\"p\">.<\/span><span class=\"nf\">auth<\/span><span class=\"p\">().<\/span><span class=\"nx\">currentUser<\/span><span class=\"p\">;<\/span>  \n        <span class=\"k\">return<\/span> <span class=\"nx\">user<\/span> <span class=\"p\">?<\/span> <span class=\"nx\">user<\/span><span class=\"p\">.<\/span><span class=\"nx\">uid<\/span> <span class=\"p\">:<\/span> <span class=\"kc\">null<\/span><span class=\"p\">;<\/span>  \n    <span class=\"p\">}<\/span>  \n\n    <span class=\"c1\">\/\/ Logout  <\/span>\n    <span class=\"k\">static<\/span> <span class=\"k\">async<\/span> <span class=\"nf\">logout<\/span><span class=\"p\">():<\/span> <span class=\"nb\">Promise<\/span><span class=\"o\">&lt;<\/span><span class=\"k\">void<\/span><span class=\"o\">&gt;<\/span> <span class=\"p\">{<\/span>  \n        <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>  \n            <span class=\"k\">await<\/span> <span class=\"nx\">agconnect<\/span><span class=\"p\">.<\/span><span class=\"nf\">auth<\/span><span class=\"p\">().<\/span><span class=\"nf\">signOut<\/span><span class=\"p\">();<\/span>  \n        <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>  \n            <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Logout failed: <\/span><span class=\"dl\">'<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">));<\/span>  \n        <span class=\"p\">}<\/span>  \n    <span class=\"p\">}<\/span>  \n<span class=\"p\">}<\/span>  \n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u0635\u0644\u0627\u062d <code>News<\/code> \u0645\u062f\u0644 \u0634\u0627\u0645\u0644 \u0627\u0646\u062c\u0645\u0646 \u06a9\u0627\u0631\u0628\u0631:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/ model\/News.ts  <\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">News<\/span> <span class=\"p\">{<\/span>  \n    <span class=\"c1\">\/\/ ...existing fields  <\/span>\n\n    <span class=\"p\">@<\/span><span class=\"nd\">cloud<\/span><span class=\"p\">.<\/span><span class=\"nc\">Field<\/span><span class=\"p\">()<\/span>  \n    <span class=\"nx\">userId<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">''<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ Associated user ID  <\/span>\n\n    <span class=\"c1\">\/\/ ...other code  <\/span>\n<span class=\"p\">}<\/span>  \n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0631\u0627\u06cc \u0628\u0631\u0631\u0633\u06cc \u0648\u0636\u0639\u06cc\u062a \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u060c \u0646\u0634\u0627\u0646\u06a9 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/ In NewsItem component, modify toggleFavorite  <\/span>\n<span class=\"k\">private<\/span> <span class=\"k\">async<\/span> <span class=\"nf\">toggleFavorite<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>  \n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">AuthUtil<\/span><span class=\"p\">.<\/span><span class=\"nf\">getCurrentUserId<\/span><span class=\"p\">())<\/span> <span class=\"p\">{<\/span>  \n        <span class=\"kd\">const<\/span> <span class=\"nx\">isLogin<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">AuthUtil<\/span><span class=\"p\">.<\/span><span class=\"nf\">anonymousLogin<\/span><span class=\"p\">();<\/span>  \n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">isLogin<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>  \n            <span class=\"nx\">prompt<\/span><span class=\"p\">.<\/span><span class=\"nf\">showToast<\/span><span class=\"p\">({<\/span> <span class=\"na\">message<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">Please log in first<\/span><span class=\"dl\">'<\/span> <span class=\"p\">});<\/span>  \n            <span class=\"k\">return<\/span><span class=\"p\">;<\/span>  \n        <span class=\"p\">}<\/span>  \n    <span class=\"p\">}<\/span>  \n\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>  \n        <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">news<\/span><span class=\"p\">.<\/span><span class=\"nx\">isFavorite<\/span> <span class=\"o\">=<\/span> <span class=\"o\">!<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">news<\/span><span class=\"p\">.<\/span><span class=\"nx\">isFavorite<\/span><span class=\"p\">;<\/span>  \n        <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">news<\/span><span class=\"p\">.<\/span><span class=\"nx\">userId<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">AuthUtil<\/span><span class=\"p\">.<\/span><span class=\"nf\">getCurrentUserId<\/span><span class=\"p\">()<\/span> <span class=\"o\">||<\/span> <span class=\"dl\">''<\/span><span class=\"p\">;<\/span>  \n        <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">cloudDBZone<\/span><span class=\"p\">.<\/span><span class=\"nf\">executeUpsert<\/span><span class=\"p\">([<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">news<\/span><span class=\"p\">]);<\/span>  \n    <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>  \n        <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">error<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Toggle favorite failed: <\/span><span class=\"dl\">'<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">(<\/span><span class=\"nx\">err<\/span><span class=\"p\">));<\/span>  \n    <span class=\"p\">}<\/span>  \n<span class=\"p\">}<\/span>  \n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"7_%D8%A8%D8%B3%D8%AA%D9%87_%D8%A8%D9%86%D8%AF%DB%8C_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D9%88_%D8%A7%D9%86%D8%AA%D8%B4%D8%A7%D8%B1\"><\/span>\n<p>  7. \u0628\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0648 \u0627\u0646\u062a\u0634\u0627\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u067e\u0633 \u0627\u0632 \u062a\u0648\u0633\u0639\u0647 \u060c \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0628\u0647 AppGallery \u0628\u0633\u062a\u0647 \u0648 \u0645\u0646\u062a\u0634\u0631 \u06a9\u0646\u06cc\u062f:  <\/p>\n<ol>\n<li>\u062f\u0631 \u0627\u0633\u062a\u0648\u062f\u06cc\u0648\u06cc Deveco \u060c Build \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f \u2192 \u062a\u0648\u0644\u06cc\u062f \u06a9\u0644\u06cc\u062f \u0648 CSR \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06af\u0648\u0627\u0647\u06cc \u0627\u0645\u0636\u0627\u06cc.\n<\/li>\n<li>\u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0627\u0645\u0636\u0627 \u062f\u0631 <code>build-profile.json5<\/code>\u0628\u0634\u0631\n<\/li>\n<li>Build \u2192 Build HAP (\u0647\u0627)\/\u0628\u0631\u0646\u0627\u0645\u0647 (\u0647\u0627) \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f \u2192 \u0628\u0631\u0646\u0627\u0645\u0647 \u0633\u0627\u062e\u062a \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u0628\u0633\u062a\u0647 \u0646\u0633\u062e\u0647.\n<\/li>\n<li>\u0648\u0627\u0631\u062f \u06a9\u0646\u0633\u0648\u0644 AppGallery Connect \u0634\u0648\u06cc\u062f \u060c \u0628\u0647 &#8220;\u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0645\u0646&#8221; \u0628\u0631\u0648\u06cc\u062f \u0648 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.\n<\/li>\n<li>\u067e\u0631\u0648\u0646\u062f\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u062a\u0648\u0644\u06cc\u062f \u0634\u062f\u0647 \u0631\u0627 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u06a9\u0646\u06cc\u062f \u060c \u062c\u0632\u0626\u06cc\u0627\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u067e\u0631 \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0631\u0627\u06cc \u0628\u0631\u0631\u0633\u06cc \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f.\n<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"8_%D9%BE%DB%8C%D8%B4%D9%86%D9%87%D8%A7%D8%AF%D8%A7%D8%AA_%D9%BE%DB%8C%D8%B4%D8%B1%D9%81%D8%AA%D9%87_%D9%88%DB%8C%DA%98%DA%AF%DB%8C\"><\/span>\n<p>  8. \u067e\u06cc\u0634\u0646\u0647\u0627\u062f\u0627\u062a \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0648\u06cc\u0698\u06af\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u067e\u0633 \u0627\u0632 \u0627\u062a\u0645\u0627\u0645 \u0627\u0635\u0648\u0644 \u0627\u0648\u0644\u06cc\u0647 \u060c \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0631\u0627 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f:  <\/p>\n<ol>\n<li>\n<strong>\u0641\u06cc\u0644\u062a\u0631 \u062f\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc<\/strong>: \u0628\u0631\u0627\u06cc \u0641\u06cc\u0644\u062a\u0631 \u06a9\u0631\u062f\u0646 \u0627\u062e\u0628\u0627\u0631 \u060c \u0632\u0628\u0627\u0646\u0647 \u0647\u0627\u06cc \u062f\u0633\u062a\u0647 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.\n<\/li>\n<li>\n<strong>\u0646\u0638\u0631\u0627\u062a<\/strong>: \u0639\u0645\u0644\u06a9\u0631\u062f \u0646\u0638\u0631 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Cloud DB \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f.\n<\/li>\n<li>\n<strong>\u062e\u0648\u0627\u0646\u062f\u0646 \u0622\u0641\u0644\u0627\u06cc\u0646<\/strong>: \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u0622\u0641\u0644\u0627\u06cc\u0646 \u0627\u0632 \u0641\u0636\u0627\u06cc \u0645\u062d\u0644\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.\n<\/li>\n<li>\n<strong>\u0627\u0639\u0644\u0627\u0646 \u0647\u0627 \u0631\u0627 \u0641\u0634\u0627\u0631 \u062f\u0647\u06cc\u062f<\/strong>: \u0627\u062f\u063a\u0627\u0645 \u06a9\u06cc\u062a \u0641\u0634\u0627\u0631 AppGallery Connect \u0628\u0631\u0627\u06cc \u0634\u06a9\u0633\u062a\u0646 \u0647\u0634\u062f\u0627\u0631\u0647\u0627\u06cc \u062e\u0628\u0631\u06cc.\n<\/li>\n<li>\n<strong>\u0647\u0645\u06af\u0627\u0645 \u0633\u0627\u0632\u06cc \u0686\u0646\u062f \u062f\u0633\u062a\u06af\u0627\u0647\u06cc<\/strong>: \u0627\u0647\u0631\u0645 \u0647\u0627\u0631\u0645\u0648\u0646\u06cc\u0648\u0633 \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc \u062a\u0648\u0632\u06cc\u0639 \u0634\u062f\u0647 \u0628\u0631\u0627\u06cc \u062a\u0639\u0648\u06cc\u0636 \u062f\u0633\u062a\u06af\u0627\u0647 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647.\n<\/li>\n<\/ol>\n<p>\u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u06cc\u06a9 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 \u0628\u0631\u0627\u06cc \u062a\u0647\u06cc\u0647 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0628\u0631\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 Harmonyos \u060c \u0627\u0632 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u062a\u0627 \u0627\u062c\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f. \u0627\u0632 \u0622\u0646 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u067e\u0627\u06cc\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u062a\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. <\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>1. \u0628\u0631\u0631\u0633\u06cc \u0627\u062c\u0645\u0627\u0644\u06cc \u067e\u0631\u0648\u0698\u0647 \u0648 \u062a\u0646\u0638\u06cc\u0645 \u0645\u062d\u06cc\u0637 \u0628\u0627 \u0627\u0646\u062a\u0634\u0627\u0631 Harmonyos Next \u060c \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0627\u0632 \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc \u062a\u0648\u0632\u06cc\u0639 \u0634\u062f\u0647 \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u062e\u0648\u062f \u0648 \u067e\u06cc\u0634\u0631\u0641\u062a \u0627\u0628\u0632\u0627\u0631 \u0628\u0647\u0628\u0648\u062f \u06cc\u0627\u0641\u062a\u0647 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u062a\u062c\u0631\u0628\u06cc\u0627\u062a \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0628\u06cc\u0646 \u062f\u0633\u062a\u06af\u0627\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0646\u062f. \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0634\u0645\u0627 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u062a\u0647\u06cc\u0647 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0628\u0631\u06cc \u060c \u067e\u0648\u0634\u0634 \u0645\u0627\u0698\u0648\u0644 \u0647\u0627\u06cc \u0627\u0635\u0644\u06cc \u0645\u0627\u0646\u0646\u062f \u0644\u06cc\u0633\u062a \u0627\u062e\u0628\u0627\u0631 \u060c &hellip;<\/p>\n","protected":false},"author":2,"featured_media":110343,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-110342","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/110342","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=110342"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/110342\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/110343"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=110342"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=110342"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=110342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}