【拓維雲創】HarmonyOS Ark js低代碼開發注意事項及登入執行個體

@toc

一，寫代碼前重點講解

1，編輯器及版本需求如下：

2，裝完對應開發工具後在建立工程時需要選上Ark,見下圖中紅色部分。

注意：假如沒有這個ark選項，就需要在編輯器中file->setting中進行配置，配置如下：

二，Ark認知和扮演角色講解

1，Ark主要是幫助我們快速的編寫我們想要的頁面，它能自動生成html,css。

2，切記Ark不能幫助我們編寫js邏輯代碼，但是它能快速幫助開發人員将頁面控件事件和開發人員編寫的JS函數相關聯，還可以快速将控件上的文字顯示與JS中的data資料相關聯。也就是說Ark是用來寫頁面和布局并關聯事件函數以及資料顯示的。具體函數和資料變量還是得開發人員提前寫好。

三，本次開發基礎知識講解

1，CSS布局中幾個重要的布局。

flex-direction: column or row;  /* 縱橫 or 橫向布局 */
justify-content: center;     /* 居中排列 */
align-items: center;    /* 居中排列 */
text-align: center; /* 居中排列 */           

具體解釋說明參考，請點選此處！

2，harmonyos中js頁面結構如下

• 1-1，page由data和函數構成。

  data格式如下

  data: {
      title: ""，
  test：{
    date: "2021.11.03",
  }
  },           

改變key對應的value值後，與之想關聯的地方顯示也會跟着改變。

• 1-2，函數又分為自定義函數和系統可繼承函數。

  自定義函數，自己随便增加。可繼承函數需要看參考文檔，但是編輯器開發有個快捷方式，輸入on後一般會彈出函數提示，如onActive?()等提示的全是寫上後，無需主動調用，系統在特定的動作或條件下會自動調用。

  ::: hljs-center

頁面生命周期及可被系統主動調用的函數如下，具體請點選跳轉檢視

:::

四，字元串使用

• 1，配表形式，在i18n中的多語言對應的json檔案中配置字元串。

  配置檔案格式如下:

  

  使用如下:

  

• 2,直接輸入方式。這個就解釋了，建議大家都使用第一種。

  五，界面跳轉及傳參、參數接收使用

  

  參數在目标頁面的js中使用如下：

  

  六，開發執行個體簡單步驟如下：

  官方執行個體參考文檔點這裡

• 1,開始制作想要界面index和test界面

  

  

  

  

注意：眼尖的同學可能發現了，Index界面arkUI和實際效果顯示中登入頁面幾個字位置有偏差，懷疑是目前版本的一個BUG。

• 2，實際示範效果如下

  

  

登入沒居中，是以隻能手動修改css使其居中

• 3，登入界面方法2

  

  效果圖如下：

  

想了解更多關于鴻蒙的内容，請通路：

51CTO和華為官方合作共建的鴻蒙技術社群

https://harmonyos.51cto.com/#bkwz