HarmonyOS Ark js低代碼開(kāi)發(fā)注意事項(xiàng)及登錄實(shí)例
想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
一，寫(xiě)代碼前重點(diǎn)講解
1，編輯器及版本需求如下：
2，裝完對(duì)應(yīng)開(kāi)發(fā)工具后在新建工程時(shí)需要選上Ark,見(jiàn)下圖中紅色部分。
注意：假如沒(méi)有這個(gè)ark選項(xiàng)，就需要在編輯器中file->setting中進(jìn)行配置，配置如下：
二，Ark認(rèn)知和扮演角色講解
1，Ark主要是幫助我們快速的編寫(xiě)我們想要的頁(yè)面，它能自動(dòng)生成html,css。
2，切記Ark不能幫助我們編寫(xiě)js邏輯代碼，但是它能快速幫助開(kāi)發(fā)人員將頁(yè)面控件事件和開(kāi)發(fā)人員編寫(xiě)的JS函數(shù)相關(guān)聯(lián)，還可以快速將控件上的文字顯示與JS中的data數(shù)據(jù)相關(guān)聯(lián)。也就是說(shuō)Ark是用來(lái)寫(xiě)頁(yè)面和布局并關(guān)聯(lián)事件函數(shù)以及數(shù)據(jù)顯示的。具體函數(shù)和數(shù)據(jù)變量還是得開(kāi)發(fā)人員提前寫(xiě)好。
三，本次開(kāi)發(fā)基礎(chǔ)知識(shí)講解
1，CSS布局中幾個(gè)重要的布局。
- flex-direction: column or row; /* 縱橫 or 橫向布局 */
- justify-content: center; /* 居中排列 */
- align-items: center; /* 居中排列 */
- text-align: center; /* 居中排列 */
具體解釋說(shuō)明參考，請(qǐng)點(diǎn)擊此處!
2，harmonyos中js頁(yè)面結(jié)構(gòu)，如下
1-1，page由data和函數(shù)構(gòu)成。
data格式如下
- data: {
- title: ""，
- test：{
- date: "2021.11.03",
- }
- },
改變key對(duì)應(yīng)的value值后，與之想關(guān)聯(lián)的地方顯示也會(huì)跟著改變。
1-2，函數(shù)又分為自定義函數(shù)和系統(tǒng)可繼承函數(shù)。
自定義函數(shù)，自己隨便增加。可繼承函數(shù)需要看參考文檔，但是編輯器開(kāi)發(fā)有個(gè)快捷方式，輸入on后一般會(huì)彈出函數(shù)提示，如onActive?()等提示的全是寫(xiě)上后，無(wú)需主動(dòng)調(diào)用，系統(tǒng)在特定的動(dòng)作或條件下會(huì)自動(dòng)調(diào)用。
頁(yè)面生命周期及可被系統(tǒng)主動(dòng)調(diào)用的函數(shù)如下，具體請(qǐng)點(diǎn)擊跳轉(zhuǎn)查看。
四，字符串使用
1，配表形式，在i18n中的多語(yǔ)言對(duì)應(yīng)的json文件中配置字符串。
配置文件格式如下:
使用如下:
2,直接輸入方式。這個(gè)就解釋了，建議大家都使用第一種。
五，界面跳轉(zhuǎn)及傳參、參數(shù)接收使用
參數(shù)在目標(biāo)頁(yè)面的js中使用如下：
六，開(kāi)發(fā)實(shí)例簡(jiǎn)單步驟如下：
官方實(shí)例參考文檔點(diǎn)這里
1,開(kāi)始制作想要界面index和test界面
**注意：**眼尖的同學(xué)可能發(fā)現(xiàn)了，Index界面arkUI和實(shí)際效果顯示中登錄頁(yè)面幾個(gè)字位置有偏差，懷疑是當(dāng)前版本的一個(gè)BUG。
2，實(shí)際演示效果，如下：
登錄沒(méi)居中，所以只能手動(dòng)修改css使其居中。
3，登錄界面方法2
效果圖如下：
想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
