小白福利！教你用低程式碼實現一個簡單的頁面跳轉功能
一、介紹
HUAWEI DevEco Studio（後文簡稱：IDE）自2020年9月首次釋出以來，經10次迭代升級，不斷為HarmonyOS應用開發增強能力。3月31日，IDE再度升級到DevEco Studio 3.0 Beta3版本。新版本具有一站式資訊獲取、多裝置工程模板、實時動態雙向預覽、全新構建工具一鍵編譯打包、一鍵式自動化簽名、低程式碼開發等能力。
其中低程式碼開發是IDE為開發者提供的視覺化介面開發方式，具有豐富的UI介面編輯功能。開發者可自由拖拽元件、快速預覽介面效果、所見即所得、有效降低時間成本和提升構建UI介面的效率。
接下來就由開發者賈佳豪為大家展示如何用低程式碼實現一個簡單的頁面跳轉功能，讓你一看就會，一做就對！
二、效果預覽
首先我們先看一下效果圖。如圖1所示，效果圖主要由兩個頁面組成，點選第一個頁面的“一鍵入門”按鈕即可跳轉到第二個頁面，再點選第二個頁面的“返回”按鈕即可返回到第一個頁面。
圖1 效果圖
下面讓我們跟隨賈佳豪的開發指導，一起動手嘗試一下吧。
三、開發過程
1. 安裝DevEco Studio
根據HarmonyOS應用開發官網文件安裝DevEco Studio 3.0 Beta3 for OpenHarmony。
DevEco Studio 3.0 Beta3 for OpenHarmony地址：
https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony
2. 建立新工程
工具下載完成後，我們就可以開始建立支援低程式碼開發的新工程了，操作如下：
(1) 開啟DevEco Studio建立一個新工程 (File > New >Create Project) 。
(2) 如圖2所示，在工程模板選擇Empty Ability，然後點選Next進行下一步。
(3) 填寫工程配置資訊，開啟Enable Super Visual開關，UI Syntax選擇JS，其餘配置保持預設即可。
(4) 最後在工程配置資訊介面，點Finish，工程的建立就完成啦。
圖2 建立新工程
新工程建立完成後，我們再瞭解一下低程式碼工程目錄中的index.js和index.visual檔案。
圖3 低程式碼工程目錄
index.js是低程式碼頁面的邏輯描述檔案（如紅框所示），它定義了頁面裡所用到的所有的邏輯關係，比如資料、事件等，後文預覽中實現頁面跳轉就是在此檔案中定義。
注：使用低程式碼頁面開發時，其關聯js檔案的同級目錄中不能包含hml和css頁面，否則出現編譯錯誤。
index.visual是儲存低程式碼頁面的資料模型檔案（如藍框所示），雙擊該檔案即可開啟低程式碼頁面，進行視覺化開發設計。
如果建立了多個低程式碼頁面，則pages目錄下會生成多個頁面資料夾及對應的js或visual檔案（如黃框所示），後文的“開發第二個頁面”部分將會具體介紹。
瞭解完index.js和index.visual檔案，下面我們正式進入低程式碼開發。
3. 開發第一個頁面
我們先開發第一個頁面，如圖4所示，第一個頁面是在容器中展示“低程式碼入門”文字和“一鍵入門”按鈕，它們分別可以通過Div、Text、和Button元件來實現。下面一起跟隨開發步驟完成第一個頁面的開發。
圖4 第一個頁面
步驟1：刪除畫布原有模板元件。
如圖5所示，新工程建立完成後，第一個頁面會預設顯示文字（Hello World） ，它是由容器元件和文字元件構成的，可以直接使用，但為了讓大家清晰地看到每個元件的使用方法，我們開啟index.visual檔案，選中畫布中的元件，單擊滑鼠右鍵，選擇Delete刪除畫布原有模板元件，從零開始。
圖5 刪除畫布原有模板元件
步驟2：新增Div容器元件：
刪除畫布原有模板元件後，我們重新給畫布新增Div容器，並設定Div容器的樣式和屬性。
(1) 如圖6所示，選中UI Control中的Div元件，將其拖至畫布。
(2) 點選右側屬性樣式欄中的樣式圖示(General)，設定Div元件的高度Height為100%，使其佔滿螢幕。
(3) 點選右側屬性樣式欄中的樣式圖示(Flex)，設定Div元件的FlexDirection樣式為column，使Div的主軸垂直；設定Div元件的JustifyContent樣式為center，使得其子元件在主軸上居中顯示；設定Div元件的Alignltems樣式為center，使得其子元件在交叉軸上居中顯示。
圖6 設定容器樣式和屬性
步驟3：新增Text文字元件：
接下來我們在Div容器中加入text元件，以便新增文字。
(1) 如圖7所示，選中UI Control中的Text元件，將其拖至Div元件的中央區域。
(2) 點選右側屬性樣式欄中的屬性圖示（Properties），設定Text元件的Content屬性為“低程式碼入門” 。
(3) 點選右側屬性樣式欄中的樣式圖示（ Feature），設定元件的FontSize樣式為60px, 使得其文字放大；設定元件的TextAlign樣式為center，使得元件文字居中顯示。
(4) 再選中畫布上的Text元件，拖動放大。
圖7 新增文字
步驟4：新增Button按鈕元件：
接下來我們在文字下面新增Button元件，為頁面增加一個按鈕。
(1) 如圖8所示，選中UI Control中的Button元件，將其拖至Text元件下面。
(2) 點選右側屬性樣式欄中的屬性圖示（Properties），設Button元件的Value屬性為"一鍵入門"。
(3) 點選右側屬性樣式欄中的樣式圖示 （Feature），設定元件的FontSize樣式為40px，使得其文字放大；再選中畫布上的Button元件，拖動放大。
圖8 新增按鈕
步驟5：檢視預覽效果：
如圖9所示，所有步驟完成後，開啟預覽器檢視效果。
圖9 第一個預覽效果圖
簡單幾步就完成第一個頁面開發，是不是超級簡單？接下來讓我們一起開發第二個頁面。
4. 開發第二個頁面
在開發第二個頁面之前需要先建立第二個頁面的second.js和second.visual檔案，用於儲存 第二個頁面的邏輯和資料。如圖10所示，右鍵點選pages資料夾，選擇New >Visual，命名為second，單擊Finish，就完成了第二個頁面的second.js和second.visual檔案的建立。
圖10 第二個頁面的second.js和second.visual檔案
由於第二個頁面的第一個頁面的開發步驟一模一樣，故此處不再贅述，直接為大家展示第二個頁面效果（如圖11所示）：
圖11 第二個頁面效果圖
兩個頁面完成之後，那麼如何實現兩個頁面之間的跳轉呢？請繼續往下看。
5. 第一個頁面的跳轉
在第一個頁面中，將跳轉按鈕繫結onclick方法，點選按鈕時，即可跳轉到第二頁。操作如下：
(1) 首先需要在index.viusal中，給畫布上的Button元件選擇onclick方法。操作如圖12所示，開啟index.visual，選中畫布上的Button元件。點選右側屬性樣式欄中的事件圖示（Events），滑鼠點選Click事件的輸入框，選擇onclick方法。
圖12 onclick設定
(2) 然後在index.js當中繫結onclick方法，並在onclick方法中寫入router模組，index.js程式碼如下：
import router from '@system.router';
export default {
// 繫結onclick方法
onclick () {
// 寫入router模組
router.push({
uri: 'pages/second/second', // 指定要跳轉的頁面
})
}
}
完成上述兩步後，即可實現從第一個頁面跳轉到第二個頁面。
6. 第二個頁面的返回
接下來我們看下如何從第二個頁面返回到第一個頁面，和上一個跳轉類似，在第二個頁面中，返回按鈕繫結back方法，點選按鈕時，即可返回到第一頁。操作如下：
(1) 如圖13所示，首先開啟second.visual，選中畫布上的Button元件，點選右側屬性樣式欄中的事件圖示（Events），點選Click事件的輸入框，選擇back。
圖13 back設定
(2) 然後在second.js中繫結back方法，並在back方法中寫入router模組，second.js 程式碼如下：
import router from '@system.router';
export default {
// 繫結back方法
back(){
// 寫入router模組
router.back()
}
}
7. 檢視最終效果
至此，我們的兩個頁面已經開發好，頁面跳轉也已經設定好，接下來就可以點選預覽器檢視最終效果啦（如圖14所示）。
圖14 最終效果
四、結語
以上就是使用低程式碼實現一個簡單的頁面跳轉功能的全部介紹啦，感興趣的小夥伴趕緊動手嘗試一下吧，期待大家用低程式碼開發出更多精彩、有趣的應用。
搜尋
複製