日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
鴻蒙HarmonyOS北向應用開發(fā)者極速入門教程（一）續(xù)-實戰(zhàn)練習篇2

 想了解更多內(nèi)容，請訪問：

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

https://harmonyos./#zz

Tablet 模擬器上的代碼案例

新建項目選擇模板進行下一步。

顯示效果：

點擊“點擊了解更多”進入下一個頁面

代碼如下

第一個頁面的布局 

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.   
  
  
  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    4.   
  
  
  
  4.     ohos:height="match_parent" 
    5.   
  
  
  
  5.     ohos:width="match_parent" 
    6.   
  
  
  
  6.     ohos:orientation="vertical"> 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.       
  
  
  
  9.         ohos:width="match_parent" 
    10.   
  
  
  
  10.         ohos:weight="1"> 
    11.   
  
  
  
  11.           
  
  
  
  12.             ohos:width="match_content" 
    13.   
  
  
  
  13.             ohos:height="match_content" 
    14.   
  
  
  
  14.             ohos:text="蛟龍騰飛" 
    15.   
  
  
  
  15.             ohos:text_size="40fp" 
    16.   
  
  
  
  16.             ohos:top_margin="180px" 
    17.   
  
  
  
  17.             ohos:left_margin="80px"/> 
    18.   
  
  
  
  18.  
    19.   
  
  
  
  19.      
    20.   
  
  
  
  20.       
  
  
  
  21.         ohos:width="match_parent" 
    22.   
  
  
  
  22.         ohos:weight="4" 
    23.   
  
  
  
  23.         ohos:orientation="horizontal"> 
    24.   
  
  
  
  24.           
  
  
  
  25.             ohos:height="match_parent" 
    26.   
  
  
  
  26.             ohos:weight="1"> 
    27.   
  
  
  
  27.               
  
  
  
  28.                 ohos:width="600px" 
    29.   
  
  
  
  29.                 ohos:height="600px" 
    30.   
  
  
  
  30.                 ohos:top_margin="160px" 
    31.   
  
  
  
  31.                 ohos:left_margin="100px" 
    32.   
  
  
  
  32.                 ohos:image_src="$media:index6"/> 
    33.   
  
  
  
  33.          
    34.   
  
  
  
  34.           
  
  
  
  35.             ohos:height="match_parent" 
    36.   
  
  
  
  36.             ohos:weight="2"> 
    37.   
  
  
  
  37.               
  
  
  
  38.                 ohos:width="match_content" 
    39.   
  
  
  
  39.                 ohos:height="match_content" 
    40.   
  
  
  
  40.                 ohos:multiple_lines="true" 
    41.   
  
  
  
  41.                 ohos:text="帶你從傳統(tǒng)的互聯(lián)網(wǎng)、移動互聯(lián)網(wǎng)時代 
    42.   
  
  
  
  42.                                跳轉(zhuǎn)到萬物互聯(lián)的智能世界! 
    43.   
  
  
  
  43.                                           馬上創(chuàng)建體驗個人、公司或組織的鴻蒙應用吧！" 
    44.   
  
  
  
  44.                 ohos:text_size="35fp" 
    45.   
  
  
  
  45.                 ohos:top_margin="240px" 
    46.   
  
  
  
  46.                 ohos:left_margin="60px"/> 
    47.   
  
  
  
  47.               
  
  
  
  48.                 ohos:id="$+id:jltfbutton" 
    49.   
  
  
  
  49.                 ohos:width="match_content" 
    50.   
  
  
  
  50.                 ohos:height="match_content" 
    51.   
  
  
  
  51.                 ohos:text="點擊了解更多" 
    52.   
  
  
  
  52.                 ohos:text_size="40fp" 
    53.   
  
  
  
  53.                 ohos:top_margin="380px" 
    54.   
  
  
  
  54.                 ohos:left_margin="1000px" 
    55.   
  
  
  
  55.                 ohos:text_color="red"/> 
    56.   
  
  
  
  56.          
    57.   
  
  
  
  57.  
    58.   
  
  
  
  58.      
    59.   
  
  
  
  59.  
    60.   
  
  
  
  60.  
    61.

 第二個頁面的布局 

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.   
  
  
  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    4.   
  
  
  
  4.     ohos:height="match_parent" 
    5.   
  
  
  
  5.     ohos:width="match_parent" 
    6.   
  
  
  
  6.     ohos:orientation="vertical"> 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.       
  
  
  
  9.         ohos:width="match_parent" 
    10.   
  
  
  
  10.        ohos:weight="1" 
    11.   
  
  
  
  11.         > 
    12.   
  
  
  
  12.           
  
  
  
  13.             ohos:width="match_content" 
    14.   
  
  
  
  14.             ohos:height="match_content" 
    15.   
  
  
  
  15.             ohos:text="蛟龍騰飛" 
    16.   
  
  
  
  16.             ohos:text_size="40fp" 
    17.   
  
  
  
  17.             ohos:top_margin="180px" 
    18.   
  
  
  
  18.             ohos:left_margin="80px"/> 
    19.   
  
  
  
  19.  
    20.   
  
  
  
  20.      
    21.   
  
  
  
  21.       
  
  
  
  22.         ohos:width="match_parent" 
    23.   
  
  
  
  23.         ohos:weight="4" 
    24.   
  
  
  
  24.         ohos:orientation="horizontal"> 
    25.   
  
  
  
  25.           
  
  
  
  26.             ohos:height="match_parent" 
    27.   
  
  
  
  27.             ohos:weight="1"> 
    28.   
  
  
  
  28.               
  
  
  
  29.                 ohos:width="600px" 
    30.   
  
  
  
  30.                 ohos:height="600px" 
    31.   
  
  
  
  31.                 ohos:top_margin="60px" 
    32.   
  
  
  
  32.                 ohos:left_margin="100px" 
    33.   
  
  
  
  33.                 ohos:image_src="$media:index7"/> 
    34.   
  
  
  
  34.          
    35.   
  
  
  
  35.           
  
  
  
  36.             ohos:height="match_parent" 
    37.   
  
  
  
  37.             ohos:weight="2"> 
    38.   
  
  
  
  38.               
  
  
  
  39.                 ohos:width="match_content" 
    40.   
  
  
  
  40.                 ohos:height="match_content" 
    41.   
  
  
  
  41.                 ohos:multiple_lines="true" 
    42.   
  
  
  
  42.                 ohos:text="你好，歡迎來到鴻蒙時代！ 
    43.   
  
  
  
  43.                                     蛟龍騰飛，鴻蒙先行者，全心全意為你提供鴻蒙各項服務!" 
    44.   
  
  
  
  44.                 ohos:text_size="35fp" 
    45.   
  
  
  
  45.                 ohos:top_margin="240px" 
    46.   
  
  
  
  46.                 ohos:left_margin="10px"/> 
    47.   
  
  
  
  47.          
    48.   
  
  
  
  48.  
    49.   
  
  
  
  49.      
    50.   
  
  
  
  50.  
    51.   
  
  
  
  51.  
    52.

 然后再第一個頁面中添加點擊事件進行跳轉(zhuǎn)

 
 
 
 
    
  
  
  
  
  1. Button button = (Button) findComponentById(ResourceTable.Id_jltfbutton); 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. button.setClickedListener(new Component.ClickedListener() { 
    4.   
  
  
  
  4.     @Override 
    5.   
  
  
  
  5.     public void onClick(Component component) { 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.         present(new jltftabletSlice(),new Intent()); 
    8.   
  
  
  
  8.     } 
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11. }); 
    12.

 Lite wearable模擬器上的代碼案例

新建項目選擇模板進行下一步。

顯示效果：

點擊“點擊了解更多”進入下一個頁面

代碼如下：

Index.hml

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.      
    3.   
  
  
  
  3.        蛟龍騰飛 
    4.   
  
  
  
  4.      
    5.   
  
  
  
  5.      
    6.   
  
  
  
  6.      
    7.   
  
  
  
  7.         帶你從傳統(tǒng)的互聯(lián)網(wǎng)、移動互 
    8.   
  
  
  
  8.      
    9.   
  
  
  
  9.      
    10.   
  
  
  
  10.         聯(lián)網(wǎng)時代. 跳轉(zhuǎn)到萬物互聯(lián)的智 
    11.   
  
  
  
  11.      
    12.   
  
  
  
  12.      
    13.   
  
  
  
  13.          能世界!。馬上創(chuàng)建體驗個人、 
    14.   
  
  
  
  14.      
    15.   
  
  
  
  15.      
    16.   
  
  
  
  16.         公司或組織的鴻蒙應用吧！ 
    17.   
  
  
  
  17.      
    18.   
  
  
  
  18.      
    19.
 

 Index.css

 
 
 
 
    
  
  
  
  
  1. .container { 
    2.   
  
  
  
  2.     flex-direction: column; 
    3.   
  
  
  
  3.     width: 454px; 
    4.   
  
  
  
  4.     height: 454px; 
    5.   
  
  
  
  5.     justify-content: center; 
    6.   
  
  
  
  6.     align-items: center; 
    7.   
  
  
  
  7. } 
    8.   
  
  
  
  8. .jltftxt { 
    9.   
  
  
  
  9.      margin-left: -180px; 
    10.   
  
  
  
  10.      margin-bottom: 10px; 
    11.   
  
  
  
  11. } 
    12.   
  
  
  
  12. .jltftxt1 { 
    13.   
  
  
  
  13.     width: 400px; 
    14.   
  
  
  
  14.     font-size: 30px; 
    15.   
  
  
  
  15.  
    16.   
  
  
  
  16. } 
    17.   
  
  
  
  17. .jltfimg { 
    18.   
  
  
  
  18.     width: 138px; 
    19.   
  
  
  
  19.     height:103px; 
    20.   
  
  
  
  20.     margin-left: 5px; 
    21.   
  
  
  
  21. } 
    22.   
  
  
  
  22. .jltfbtn { 
    23.   
  
  
  
  23.     width: 200px; 
    24.   
  
  
  
  24.     margin-bottom: -70px; 
    25.   
  
  
  
  25. } 
    26.

 Index.js

 
 
 
 
    
  
  
  
  
  1. import router from '@system.router' 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. export default { 
    4.   
  
  
  
  4.     data: { 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.     }, 
    7.   
  
  
  
  7.     jltfclick() { 
    8.   
  
  
  
  8.         router.replace({ 
    9.   
  
  
  
  9.             uri:'pages/jltfindex/jltfindex' 
    10.   
  
  
  
  10.         }); 
    11.   
  
  
  
  11.     } 
    12.   
  
  
  
  12. } 
    13.

 Jltfindex.hml

  
 
 
 
    
   
  
  
  
  1.  
    2.    
  
  
  
  2.      
    3.    
  
  
  
  3.         蛟龍騰飛 
    4.    
  
  
  
  4.      
    5.    
  
  
  
  5.      
    6.    
  
  
  
  6.      
    7.    
  
  
  
  7.         你好，歡迎來到鴻蒙時代！ 
    8.    
  
  
  
  8.      
    9.    
  
  
  
  9.      
    10.    
  
  
  
  10.         蛟龍騰飛，鴻蒙先行者，全心全 
    11.    
  
  
  
  11.      
    12.    
  
  
  
  12.      
    13.    
  
  
  
  13.         意為你提供鴻蒙各項服務！        
    14.    
  
  
  
  14.  
    15.
 

 Jltfindex.css

 
 
 
 
    
  
  
  
  
  1. .container { 
    2.   
  
  
  
  2.     flex-direction: column; 
    3.   
  
  
  
  3.     width: 454px; 
    4.   
  
  
  
  4.     height: 454px; 
    5.   
  
  
  
  5.     justify-content: center; 
    6.   
  
  
  
  6.     align-items: center; 
    7.   
  
  
  
  7. } 
    8.   
  
  
  
  8. .jltftxt { 
    9.   
  
  
  
  9.     margin-left: -180px; 
    10.   
  
  
  
  10.     margin-bottom: 10px; 
    11.   
  
  
  
  11. } 
    12.   
  
  
  
  12. .jltftxt1 { 
    13.   
  
  
  
  13.     width: 400px; 
    14.   
  
  
  
  14.     font-size: 30px; 
    15.   
  
  
  
  15.  
    16.   
  
  
  
  16. } 
    17.   
  
  
  
  17. .jltfimg { 
    18.   
  
  
  
  18.     width: 413px; 
    19.   
  
  
  
  19.     height:103px; 
    20.   
  
  
  
  20.     margin-left: 8px; 
    21.   
  
  
  
  21. } 
    22.   
  
  
  
  22. .jltfbtn { 
    23.   
  
  
  
  23.     width: 200px; 
    24.   
  
  
  
  24.     margin-bottom: -70px; 
    25.   
  
  
  
  25. } 
    26.

 Jltfindex.js

 
 
 
 
    
  
  
  
  
  1. export default { 
    2.   
  
  
  
  2.     data: { 
    3.   
  
  
  
  3.     } 
    4.   
  
  
  
  4. } 
    5.

 在第一個頁面中添加跳轉(zhuǎn)的代碼

在第一個頁面js文件中加入如下代碼即可

 
 
 
 
    
  
  
  
  
  1. jltfclick() { 
    2.   
  
  
  
  2.     router.replace({ 
    3.   
  
  
  
  3.         uri:'pages/jltfindex/jltfindex' 
    4.   
  
  
  
  4.     }); 
    5.   
  
  
  
  5. } 
    6.

 2. 練習題二

還是基于“練習一”題目中的圖片和文字內(nèi)容，7種設備中用其他不同的模板樣式嘗試實現(xiàn)一下和“練習一”模板樣式不一樣的效果，盡可能每種設備實現(xiàn)一種不同的布局和效果呈現(xiàn)，作業(yè)要求，樣式截圖與全部代碼。

3. 點擊和嘗試DevEco Studio里的每個菜單欄,概覽這個DevEco Studio的各項功能結(jié)構(gòu)。結(jié)合前面的練習，寫一個100字以上的Deveco Studio體驗心得。

具體編輯器使用的細節(jié)可以參考如下鏈接和內(nèi)容。

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/tools_overview-0000001053582387

深圳市蛟龍騰飛網(wǎng)絡科技有限公司

?著作權(quán)歸作者和HarmonyOS技術(shù)社區(qū)共同所有，如需轉(zhuǎn)載，請注明出處，否則將追究法律責任

想了解更多內(nèi)容，請訪問：

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

https://harmonyos./#zz


網(wǎng)站題目：鴻蒙HarmonyOS北向應用開發(fā)者極速入門教程（一）續(xù)-實戰(zhàn)練習篇2
轉(zhuǎn)載注明：http://m.5511xx.com/article/ccojghj.html