【Demo見真章】跳轉到鴻蒙-在HarmonyOS手機

1、深圳市蛟龍騰飛網絡科技有限公司Demo見真章參賽作品 【Demo見真章】跳轉到鴻蒙-在HarmonyOS手機應用實現(xiàn)圖片文字布局與頁面跳轉功能【Demo見真章】跳轉到鴻蒙-在HarmonyOS手機應用實現(xiàn)圖片文字布局與頁面跳轉功能亮點說明應用頁面的圖片和文字布局與實現(xiàn)頁面的跳轉，是一個應用開發(fā)的最基本的組成部分。特別是剛開始進入鴻蒙應用服務開發(fā)領域的開發(fā)者，這是最基本的練習，熟練的掌握本部分后，對整體的IDE和后續(xù)各項開發(fā)能就會有一個比較清晰的認知和理解。本Demo是我們團隊內部新人練習基礎課程，并在實踐中取得了比較好的反饋效果，感謝能通過參賽的形式，把完整的過程和全部的代碼分享給大家，希望共

2、同學習進步。二、完整開發(fā)過程、要點說明與全部代碼分享這個項目的開發(fā)是為了讓用戶能體驗到瀏覽完本頁面后能快速的跳轉到另一個進行瀏覽，給用戶更好的體驗。項目前期的準備：比如配置好開發(fā)環(huán)境、需要準備項目需要的各類視頻素材以及頁面布局的設計等等。繪制項目需要的組件：頁面跳轉的按鈕。頁面布局：使用的是文字加視頻呈現(xiàn)的方式，用的是DirectionalLayout布局實現(xiàn)的頁面布局，從上至下的排列方式展示頁面中的內容。3.下面我們就正式進入項目開發(fā)環(huán)節(jié)，來看一下如何逐一攻破以上要點：創(chuàng)建項目成功下載安裝DevEco Studio之后，在創(chuàng)建新工程時，選擇Phone選項，選擇默認的模板（java版），將文件

3、命名為不帶中文或特殊字符的項目（如此處的jltfphoneym），最后點擊Finish。 為了保障應用能以“跳轉鴻蒙”的名字呈現(xiàn)，我們需要config.json文件中做一些小改動，找到代碼中的“l(fā)abel”：“jltfphoneym”，將其修改成label: 跳轉鴻蒙，這樣就可以實現(xiàn)將應用名稱修改為跳轉鴻蒙了。繪制頁面布局在這個要點中我們要繪制文字加圖片的代碼在entrysrcmainjavacom.example.jltfphoneymresourcsbaselayout中編寫（第一個頁面布局代碼） 第二個頁面布局代碼 代碼中圖片的所在地entrysrcmainjavacom.example

4、.jltfphoneymresourcsbasemedia中儲存著新建slice文件放綁定首頁面中的代碼entrysrcmainjavacom.example.jltfphoneymsliceMainAbilitySlicepackage com.example.jltfphoneym.slice;import com.example.jltfphoneym.ResourceTable;import ohos.aafwk.ability.AbilitySlice;import ohos.aafwk.content.Intent;import ponents.Button;import pone

5、nts.Component;public class MainAbilitySlice extends AbilitySlice Override public void onStart(Intent intent) super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); Button button = (Button) findComponentById(ResourceTable.Id_jltfbutton); button.setClickedListener(new Component.

6、ClickedListener() Override public void onClick(Component component) present(new JltfAbilitySlice(),new Intent(); ); Override public void onActive() super.onActive(); Override public void onForeground(Intent intent) super.onForeground(intent); 在布局中通過按鈕綁定點擊事件進行跳轉。跳轉到另一個的的slice中的代碼如下package com.example

7、.jltfphoneym.slice;import com.example.jltfphoneym.ResourceTable;import ohos.aafwk.ability.AbilitySlice;import ohos.aafwk.content.Intent;public class JltfAbilitySlice extends AbilitySlice Override public void onStart(Intent intent) super.onStart(intent); super.setUIContent(ResourceTable.Layout_jltf_l

8、ayout); Override public void onActive() super.onActive(); Override public void onForeground(Intent intent) super.onForeground(intent); 繪制基礎組件在這個要點中我們要跳轉按鈕的代碼在entrysrcmainjavacom.example.jltfphoneymsliceMainAbilitySlice中編寫：Button button = (Button) findComponentById(ResourceTable.Id_jltfbutton);button.setClickedListener(new Component.ClickedListener() Override public void onClick(Component component) pres