一、閑扯淡

因為目前華為推出的HarmonyOS比較火，很多人都說HarmonyOS是套了Android的殼，沒啥技術含量。我不同意這種說法，HarmonyOS 提出了很多的創新點是Android所沒有的，分布式軟總線、設備遷移、原子服務等都是很具創新性的思想。我相信未來的Harmony一定會與Android和IOS會三分天下的。廢話就不說了，本系列的博客主要目標是學習HarmonyOS的ArkUI 開發，我自己買了一門ArkUI的課，所以我在學習的過程中呢也分享我的課上所學（因為上班沒時間專門去研究官網，其實就是懶），代碼我會提交到gitee,只需要下載一次，后面博客更新時，直接通過git pull下就可以了。

二、效果展示

由于是模擬器，所以會比較卡，還有就是開發的時候盡量用最新的IDE,否則可能會出現一些小BUG,如圖，只是先做了隱私相關和服務條款
，登錄界面也只做了一部分，因為太多的話寫的博客太長，所以先做這么多其他的下一個博客加上。

三、實現思路及代碼說明

本博客就是講社區類app開發相關的頁面開發知識，再多一句嘴，為啥要學ArkUI，因為華為已經不維護Java UI框架了，因為Java UI框架太重，做設備間遷移時不太方便，若是用js,一切都會變得簡單。
首先，環境安裝和hello world 新建項目就不啰嗦了，官網和其他博客多的是，咱們就直接開始。

上圖是目錄結構，咱們可以看下界面是咋寫的。
上圖是導航欄組件，是不是很眼熟，和開發Html5是不是一樣的操作，等你上手時會發現，簡直一摸一樣。圖中的img文件夾用于存放圖片，導航欄的"<"按鈕就是一張圖片，.hml文件是寫界面的，.css文件是給界面添加樣式的，讓界面更美觀。.js文件是給界面提供數據和交互的，比如增加個點擊事件啥的。
（1）導航組件
導航組件是一個通用的組件，可以在各個頁面使用。所以需要定制一下標題。

import router from '@system.router';/*頁面跳轉*/

export default {
    data: {
        title: ''//給界面導航標題傳值的
    },
props:['title'],
    back(){ /*點擊back按鈕返回上一個界面*/
        router.back()
    },
}

以上代碼是nav.js中的代碼，定義了導航的標題，這里是默認為空是因為咱們到了其他頁面就可以傳標題進來，從而顯示指定頁面的標題，比如隱私界面復用了導航，就會給導航傳一個隱私界面的標題

（2）組件復用

privacy.hml

<element src="../nav/nav.hml">element>

<div class="container">
  <nav title="{{title}}">nav>

privacy.js

export default {
    data: {
        title: '隱私'
    }
}

比如隱私界面復用導航，就可以利用element標簽，通過相對路徑的辦法引入導航組件，然后在自己的js（privacy.js）文件中傳標題的值，在自己的hml(privacy.hml)文件中義“title="{{title}}”方式引入，同理服務條款也是一樣的操作。

（3）隱私界面

<element src="../nav/nav.hml">element>
<div class="container">
  <nav title="{{title}}">nav>
    <list-item>
    <textarea extend="true" disabled="true" style="background-color: transparent;">
     
    textarea>
    list-item>
div>

隱私條款需要用textarea來放，記得要設置extend=“true”，這樣文字才會展開顯示，不然只會顯示部分，還有disabled="true"這個屬性要設置為true，因為textarea是一個可以和用戶交戶的控件，不禁用的話用戶會修改隱私條款。list-item控件的存在是為了讓隱私條款滾動更絲滑，讓其有回彈效果，服務條款頁面和這個一樣

（4）頁面跳轉
login.hml

<div class="container">
    <text style="color: #c2c2c2;">
       我同意
    text>
    <text onclick="navToAgreement" >
       《App服務條款》
    text>
    <text style="color: #c2c2c2;">
        和
    text>
    <text onclick="navToPrivacy">
        《App隱私協議》
    text>
div>

login.js

import router from '@system.router';

export default {
    data: {
        title: 'World'
    },
    navToPrivacy(){
        router.push({
            uri: "pages/privacy/privacy"/*跳轉到隱私頁面*/
        })
    },
    navToAgreement(){
        router.push({
            uri: "pages/agreement/agreement"/*跳轉到服務條款頁面*/
        })
    }
}

定義兩個函數，當點擊“服務條款”或者“隱私條款”，通過onClick調用跳轉函數，再通過router的push（）方法去跳轉，uri后的內容可以去config.json中找。

config.json

  "js": [
      {
        "pages": [
          "pages/login/login",
          "pages/privacy/privacy",
          "pages/index/index",
          "pages/nav/nav",
          "pages/agreement/agreement"
        ],
        "name": "default",
        "window": {
          "designWidth": 720,
          "autoDesignWidth": true
        }
      }
    ]

config.json中配置著頁面的信息，和android的Androidmainfest.xml文件差不多，需要注意的是pages[]數組中哪個頁面配置在最前面，進入app時就顯示哪個頁面。具體的可以參考源碼，歡迎一起交流～～～，如果覺得文章有幫助可以下載源碼時給個star

四、源碼地址

源碼放到了gitee，歡迎star,建議大家拿到源碼后自己手動寫一遍，這樣印象會更深，學習嘛，不寒磣，多動手。
源碼地址