HarmonyOS Ark js低代碼開發注意事項及登錄實例
一,寫代碼前重點講解
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?()等提示的全是寫上后,無需主動調用,系統在特定的動作或條件下會自動調用。
頁面生命周期及可被系統主動調用的函數如下,具體請點擊跳轉查看。

四,字符串使用
1,配表形式,在i18n中的多語言對應的json文件中配置字符串。
配置文件格式如下:

使用如下:

2,直接輸入方式。這個就解釋了,建議大家都使用第一種。
五,界面跳轉及傳參、參數接收使用

參數在目標頁面的js中使用如下:

六,開發實例簡單步驟如下:
官方實例參考文檔點這里
1,開始制作想要界面index和test界面




**注意:**眼尖的同學可能發現了,Index界面arkUI和實際效果顯示中登錄頁面幾個字位置有偏差,懷疑是當前版本的一個BUG。
2,實際演示效果,如下:


登錄沒居中,所以只能手動修改css使其居中。

3,登錄界面方法2

效果圖如下:
