??想了解更多內(nèi)容，請(qǐng)?jiān)L問：??

??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??

??https://ost.51cto.com??

本文來自O(shè)penHarmony成長計(jì)劃啃論文俱樂部11組PIMF(Preeminent Input Method Framework)，PIMF即卓越的輸入法框架。筆者閱讀文檔嘗試使用DevEco Studio 3.0 Beta3 for OpenHarmony進(jìn)行低代碼開發(fā)OpenHarmony應(yīng)用。

前言

OpenHarmony 3.1 Release于2022年3月30日發(fā)布后，3月31日華為發(fā)布了最新的IDE工具 DevEco Studio 3.0 Beta3 for OpenHarmony 。(DevEco Studio 3.0 Beta3是支撐OpenHarmony應(yīng)用及服務(wù)開發(fā)的第一個(gè)版本，改變了之前HarmonyOS和OpenHarmony共用IDE的局面)。

DevEco Studio 3.0 Beta3作為支撐OpenHarmony應(yīng)用及服務(wù)開發(fā)的IDE，具有以下能力特點(diǎn)：

• 智能代碼編輯：代碼高亮、代碼智能補(bǔ)齊、代碼錯(cuò)誤檢查、代碼自動(dòng)跳轉(zhuǎn)、代碼格式化、代碼查找，提升代碼編寫效率。
• 低代碼開發(fā)：豐富的UI界面編輯能力，支持自由拖拽組件和可視化數(shù)據(jù)綁定，可快速預(yù)覽效果，所見即所得，同時(shí)支持卡片零碼化開發(fā)，提升界面開發(fā)效率。
• 多端雙向?qū)崟r(shí)預(yù)覽：支持UI界面代碼的雙向預(yù)覽、實(shí)時(shí)預(yù)覽，動(dòng)態(tài)預(yù)覽、組件預(yù)覽以及多端設(shè)備預(yù)覽，便于快速查看代碼運(yùn)行效果。
• 全新構(gòu)建體系：通過Hvigor編譯構(gòu)建工具，一鍵完成應(yīng)用及服務(wù)的編譯和打包，更好地支持eTS/JS開發(fā)。
• 一站式信息獲?。?/strong>基于開發(fā)者了解、學(xué)習(xí)、開發(fā)、求助的用戶旅程，在DevEco Studio中提供一站式的信息獲取平臺(tái)，高效支撐開發(fā)者活動(dòng)。
• 高效代碼調(diào)試：提供TS、JS 、C/C++代碼的斷點(diǎn)設(shè)置，單步執(zhí)行、變量查看等調(diào)試能力，提升應(yīng)用及服務(wù)的問題分析效率。

成果(實(shí)現(xiàn)一個(gè)簡單的頁面跳轉(zhuǎn))

搭建開發(fā)環(huán)境

1.官方文檔指導(dǎo)??華為官網(wǎng)??

2.遇到SDK無法下載的問題??51cto相關(guān)帖子??

3.使用低代碼開發(fā)應(yīng)用或服務(wù)有以下兩種開發(fā)方式:

直接創(chuàng)建一個(gè)支持低代碼開發(fā)的新工程以進(jìn)行開發(fā)。 本文以此方式為例進(jìn)行說明。

在已有工程中，創(chuàng)建Visual文件來進(jìn)行開發(fā)。

接下來我們以創(chuàng)建一個(gè)低代碼開發(fā)的新工程為例進(jìn)行說明。

創(chuàng)建支持低代碼開發(fā)的新工程

1.打開工程創(chuàng)建向?qū)?File > New >Create Project) ,創(chuàng)建一個(gè)新工程。

2.工程模板選擇"Empty Ability",然后點(diǎn)擊Next進(jìn)行下一步。

3.填寫工程配置信息，打開"Enable Super Visual"開關(guān)，UI Syntax選擇"JS"，其余配置保持默認(rèn)即可。

4.最后在工程配置信息界面，點(diǎn)Fish,完成工程創(chuàng)建。

關(guān)于低代碼工程的目錄介紹如下:

• entry > src > main > js > MainAbility > pages > index > 。 index.js: 低代碼頁面的邏輯描述文件，定義了頁面里所用到的所有的邏輯關(guān)系，比如數(shù)據(jù)、事件等。如果創(chuàng)建了多個(gè)低代碼頁面，則pages目錄下會(huì)生成多個(gè)頁面文件夾及對(duì)應(yīng)的js文件。

使用低代碼頁面開發(fā)時(shí)，其關(guān)聯(lián)js文件的同級(jí)目錄中不能包含hml和css頁面,否則出現(xiàn)編譯錯(cuò)誤。

• entry > src > main > supervisual > MainAbility > pages > index > index.visual: visual文件存儲(chǔ)低代碼頁面的數(shù)據(jù)模型，雙擊該文件即可打開低代碼頁面，進(jìn)行可視化開發(fā)設(shè)計(jì)。如果創(chuàng)建了多個(gè)低代碼頁面，則pages目錄下會(huì)生成多個(gè)頁面文件夾及對(duì)應(yīng)的visual文件。

編寫第一個(gè)頁面

工程同步完成后，第個(gè)頁面已有一個(gè)容器、文本(Hello World)顯示。

為了更詳細(xì)地了解低代碼開發(fā)，我們刪除畫布原有模板組件，從零開始完成頁面的添加、設(shè)置。

第一個(gè)頁面內(nèi)有一個(gè)容器、文本和一個(gè)按鈕，通過Div、 Text和Button組件來實(shí)現(xiàn)。

1、刪除畫布原有模板組件。

• 打開"index.visual"文件，選中畫布中的組件，單擊鼠標(biāo)右鍵,選擇Delete刪除畫布原有模板組件。

2、添加容器，設(shè)置Div容器的樣式和屬性。

• 選中UI Control中的Div組件，將其拖至畫布。
• 點(diǎn)擊右側(cè)屬性樣式欄中的樣式圖標(biāo)(General)，設(shè)置Div組件的高度Height為100%，使其占滿屏幕。
• 點(diǎn)擊右側(cè)屬性樣式欄中的樣式圖標(biāo)(Flex)， 設(shè)置Div組件的FlexDirection樣式為column,使Div的主軸垂直;設(shè)置Div組件的JustifyContent樣式為center,使得其子組件在主軸上居中顯示;設(shè)置Div組件的Alignltems樣式為center, 使得其子組件在交叉軸上居中顯示。

3、添加文本。

• 選中UI Control中的Text組件，將其拖至Div組件的中央?yún)^(qū)域。
• 點(diǎn)擊右側(cè)屬性樣式欄中的屬性圖標(biāo)(Properties),設(shè)置Text組件的Content屬性為“低代碼入門”。
• 點(diǎn)擊右側(cè)屬性樣式欄中的樣式圖標(biāo)。(Feature) ,設(shè)置組件的FontSize樣式為60px, 使得其文字放大;設(shè)置組件的TextAlign樣式為center, 使得組件文字居中顯示。
• 再選中畫布上的Text組件，拖動(dòng)放大。

4、添加按鈕。

• 選中UI Control中的Button組件，將其拖至Text組件下面。
• 點(diǎn)擊右側(cè)屬性樣式欄中的屬性圖標(biāo)(Properties),設(shè)Button組件的Value屬性為"一鍵入門"。
• 點(diǎn)擊右側(cè)屬性樣式欄中的樣式圖標(biāo) (Feature) , 設(shè)置組件的FontSize樣式為40px,使得其文字放大。
• 再選中畫布上的Button組件，拖動(dòng)放大。

5、打開預(yù)覽器查看效果。

編寫第二個(gè)頁面

1、創(chuàng)建第二個(gè)頁面。

• 在"Project"窗口，打開"entry > src > main > js > MainAbility",右鍵點(diǎn)擊pages"文件夾，選擇"New >Visual",命名為"second", 單擊Finish",即完成第二個(gè)頁面的創(chuàng)建。

2、接下來操作步驟和編寫第一個(gè)的頁面一模一樣，操作略，第二個(gè)頁面效果如下：

實(shí)現(xiàn)頁面跳轉(zhuǎn)

頁面間的導(dǎo)航可以通過頁面路由router來實(shí)現(xiàn)。頁面路由router根據(jù)頁面uri找到目標(biāo)頁面，從而實(shí)現(xiàn)跳轉(zhuǎn)。使用頁面路由請(qǐng)導(dǎo)入router模塊。

1、第一個(gè)頁面跳轉(zhuǎn)到第二個(gè)頁面。

在第一個(gè)頁面中， 跳轉(zhuǎn)按鈕綁定onclick方法， 點(diǎn)擊按鈕時(shí)，跳轉(zhuǎn)到第二頁。需同時(shí)處理js文件及visual文件

index.js示例如下：

export default {
    onclick (){
        router.push({uri:'pages/second/second',})
    }
}

• “index.viusal”:打開"index.visual", 選中畫布上的Button組件。點(diǎn)擊右側(cè)屬性樣式欄中的事件圖標(biāo)(Events) ,鼠標(biāo)點(diǎn)擊Click事件的輸入框，選擇onclick,如下所示:

2、第二個(gè)頁面返回到第一個(gè)頁面。

在第二個(gè)頁面中，返回按鈕綁定back方法，點(diǎn)擊按鈕時(shí)，返回到第一頁。

需同時(shí)處理js文件及visua文件。

second.js示例如下：

export default {
   back() {
       router.back()
   }
}

• “second.viusal”: 打開"second.visual", 選中畫布上的Button組件。 點(diǎn)擊右側(cè)屬性樣式欄中的事件圖標(biāo)(Events), 鼠標(biāo)點(diǎn)擊Click事件的輸入框，選擇back。

預(yù)覽查看效果

打開index.visual或index.js文件，點(diǎn)擊預(yù)覽器。

??想了解更多內(nèi)容，請(qǐng)?jiān)L問：??

??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??

??https://ost.51cto.com??