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

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

新聞中心

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

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

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

https://harmonyos./#zz

三、實(shí)戰(zhàn)練習(xí)

截圖另外做文檔答題。文檔要求，文件名：某某研究日志日期。文件內(nèi)容，題目和答題，截圖代碼和文字等綜合展示。

1.練習(xí)題一

以下是基于DevEco Studio蛟龍騰飛北向應(yīng)用開發(fā)工程師已經(jīng)實(shí)現(xiàn)的布局、功能、代碼及路徑，請(qǐng)安裝要求一模一樣的流程和效果，在自己的DevEco Studio實(shí)現(xiàn)。這里我們可以自行選擇自己想開發(fā)的設(shè)備和模板，這里我們以Phone為例，開發(fā)模板選擇空特性java的開發(fā)模板，點(diǎn)擊next進(jìn)行下一步。

開發(fā)的設(shè)備有七種：

  • Phone
  • Tablet
  • Car
  • Tv
  • Wearable
  • Lite wearable
  • smart vision

Phone設(shè)備中有很多種不同的模板，主要是java和js進(jìn)行開發(fā)以及不同的模板樣式，不同樣式之間布局不一樣，不同的布局所展示的效果代碼已經(jīng)寫入其中，只需要加入想加入的元素即可。

選擇好了之后點(diǎn)擊next進(jìn)行下一步。

這里是創(chuàng)建項(xiàng)目的一些項(xiàng)目配置，配置完成點(diǎn)擊Finish完成創(chuàng)建。

完成創(chuàng)建后，我們進(jìn)入了主界面，這里需要等待一小會(huì)，因?yàn)橐恍┡渲脰|西在進(jìn)行下載配置。

Phone模擬器上的代碼案例：

顯示效果：

雙擊圖中選中的設(shè)備就可以運(yùn)行了。

顯示如下：

運(yùn)行效果：

點(diǎn)擊“點(diǎn)擊了解更多”進(jìn)入下一個(gè)頁(yè)面：

代碼如下：

第一個(gè)布局中

 
 
 
 
    
  
  
  
  
    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.     
  
  
  
  
  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="80px"
    16. 
  
  
  
  
  16.             ohos:top_margin="280px"
    17. 
  
  
  
  
  17.             ohos:left_margin="50px"/>
    18. 
  
  
  
  
  18.     
    19. 
  
  
  
  
  19.     
  
  
  
  
  20.         ohos:weight="1"
    21. 
  
  
  
  
  21.         ohos:width="match_parent">
    22. 
  
  
  
  
  22.         
  
  
  
  
  23.             ohos:width="1080px"
    24. 
  
  
  
  
  24.             ohos:height="468px"
    25. 
  
  
  
  
  25.             ohos:image_src="$media:index12.jpg"/>
    26. 
  
  
  
  
  26. 
  
  
  
  
  27.     
    28. 
  
  
  
  
  28.     
  
  
  
  
  29.         ohos:width="match_parent"
    30. 
  
  
  
  
  30.         ohos:weight="3">
    31. 
  
  
  
  
  31.         
  
  
  
  
  32.             ohos:width="match_content"
    33. 
  
  
  
  
  33.             ohos:height="match_content"
    34. 
  
  
  
  
  34.             ohos:text_size="60px"
    35. 
  
  
  
  
  35.             ohos:multiple_lines="true"
    36. 
  
  
  
  
  36.             ohos:left_margin="8px"
    37. 
  
  
  
  
  37.             ohos:text="帶你從傳統(tǒng)的互聯(lián)網(wǎng)、移動(dòng)互聯(lián)網(wǎng)時(shí)代"/>
    38. 
  
  
  
  
  38.         
  
  
  
  
  39.             ohos:width="match_content"
    40. 
  
  
  
  
  40.             ohos:height="match_content"
    41. 
  
  
  
  
  41.             ohos:text_size="60px"
    42. 
  
  
  
  
  42.             ohos:multiple_lines="true"
    43. 
  
  
  
  
  43.             ohos:left_margin="8px"
    44. 
  
  
  
  
  44.             ohos:top_margin="10px"
    45. 
  
  
  
  
  45.             ohos:text="跳轉(zhuǎn)到萬(wàn)物互聯(lián)的智能世界!"/>
    46. 
  
  
  
  
  46.         
  
  
  
  
  47.             ohos:width="match_content"
    48. 
  
  
  
  
  48.             ohos:height="match_content"
    49. 
  
  
  
  
  49.             ohos:text_size="60px"
    50. 
  
  
  
  
  50.             ohos:multiple_lines="true"
    51. 
  
  
  
  
  51.             ohos:left_margin="8px"
    52. 
  
  
  
  
  52.             ohos:top_margin="10px"
    53. 
  
  
  
  
  53.             ohos:text="馬上創(chuàng)建體驗(yàn)個(gè)人、公司或組織的鴻蒙應(yīng)用吧！"/>
    54. 
  
  
  
  
  54.         
  
  
  
  
  55.             ohos:id="$+id:jltfbutton"
    56. 
  
  
  
  
  56.             ohos:width="match_content"
    57. 
  
  
  
  
  57.             ohos:height="match_content"
    58. 
  
  
  
  
  58.             ohos:text="點(diǎn)擊了解更多"
    59. 
  
  
  
  
  59.             ohos:text_color="red"
    60. 
  
  
  
  
  60.             ohos:text_size="100px"
    61. 
  
  
  
  
  61.             ohos:top_margin="400px"
    62. 
  
  
  
  
  62.             ohos:left_margin="420px"/>
    63. 
  
  
  
  
  63.     
    64. 
  
  
  
  
  64. 
  
  
  
  
  65.

 第二個(gè)布局中

 
 
 
 
    
  
  
  
  
    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.     
  
  
  
  
  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="80px"
    16. 
  
  
  
  
  16.             ohos:top_margin="280px"
    17. 
  
  
  
  
  17.             ohos:left_margin="50px"/>
    18. 
  
  
  
  
  18.     
    19. 
  
  
  
  
  19.     
  
  
  
  
  20.         ohos:weight="1"
    21. 
  
  
  
  
  21.         ohos:width="match_parent">
    22. 
  
  
  
  
  22.         
  
  
  
  
  23.             ohos:width="1080px"
    24. 
  
  
  
  
  24.             ohos:height="468px"
    25. 
  
  
  
  
  25.             ohos:image_src="$media:index13.jpg"/>
    26. 
  
  
  
  
  26. 
  
  
  
  
  27.     
    28. 
  
  
  
  
  28.     
  
  
  
  
  29.         ohos:width="match_parent"
    30. 
  
  
  
  
  30.         ohos:weight="3">
    31. 
  
  
  
  
  31.         
  
  
  
  
  32.             ohos:width="match_content"
    33. 
  
  
  
  
  33.             ohos:height="match_content"
    34. 
  
  
  
  
  34.             ohos:text_size="60px"
    35. 
  
  
  
  
  35.             ohos:multiple_lines="true"
    36. 
  
  
  
  
  36.             ohos:left_margin="8px"
    37. 
  
  
  
  
  37.             ohos:text="你好，歡迎來(lái)到鴻蒙時(shí)代！"/>
    38. 
  
  
  
  
  38.         
  
  
  
  
  39.             ohos:width="match_content"
    40. 
  
  
  
  
  40.             ohos:height="match_content"
    41. 
  
  
  
  
  41.             ohos:text_size="60px"
    42. 
  
  
  
  
  42.             ohos:multiple_lines="true"
    43. 
  
  
  
  
  43.             ohos:left_margin="8px"
    44. 
  
  
  
  
  44.             ohos:top_margin="10px"
    45. 
  
  
  
  
  45.             ohos:text="蛟龍騰飛，鴻蒙先行者，全心全意為你"/>
    46. 
  
  
  
  
  46.         
  
  
  
  
  47.             ohos:width="match_content"
    48. 
  
  
  
  
  48.             ohos:height="match_content"
    49. 
  
  
  
  
  49.             ohos:text_size="60px"
    50. 
  
  
  
  
  50.             ohos:multiple_lines="true"
    51. 
  
  
  
  
  51.             ohos:left_margin="10px"
    52. 
  
  
  
  
  52.             ohos:top_margin="10px"
    53. 
  
  
  
  
  53.             ohos:text="提供鴻蒙各項(xiàng)服務(wù)！ 馬上咨詢：李先生 13725519713 或 18138827525"/>
    54. 
  
  
  
  
  54.     
    55. 
  
  
  
  
  55. 
  
  
  
  
  56.

 在slice文件的類中添加點(diǎn)擊事件進(jìn)行跳轉(zhuǎn)：

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

 TV模擬器上的代碼案例：

新建項(xiàng)目選擇模板進(jìn)行下一步。

顯示效果：

點(diǎn)擊“點(diǎn)擊了解更多”進(jìn)入下一個(gè)頁(yè)面。

代碼如下：

第一個(gè)頁(yè)面中的布局

 
 
 
 
    
  
  
  
  
    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.    
  
  
  
  
  9.        ohos:width="match_parent"
    10. 
  
  
  
  
  10.        ohos:height="160px"
    11. 
  
  
  
  
  11.        >
    12. 
  
  
  
  
  12.        
  
  
  
  
  13.            ohos:width="match_content"
    14. 
  
  
  
  
  14.            ohos:height="match_content"
    15. 
  
  
  
  
  15.            ohos:text="蛟龍騰飛"
    16. 
  
  
  
  
  16.            ohos:text_size="25fp"
    17. 
  
  
  
  
  17.            ohos:top_margin="40px"
    18. 
  
  
  
  
  18.            ohos:left_margin="40px"/>
    19. 
  
  
  
  
  19. 
  
  
  
  
  20.    
    21. 
  
  
  
  
  21.     
  
  
  
  
  22.         ohos:width="match_parent"
    23. 
  
  
  
  
  23.         ohos:height="920px"
    24. 
  
  
  
  
  24.         ohos:orientation="horizontal">
    25. 
  
  
  
  
  25.         
  
  
  
  
  26.             ohos:height="match_parent"
    27. 
  
  
  
  
  27.             ohos:width="820px">
    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:index6"/>
    34. 
  
  
  
  
  34.         
    35. 
  
  
  
  
  35.         
  
  
  
  
  36.             ohos:height="match_parent"
    37. 
  
  
  
  
  37.             ohos:width="1100px">
    38. 
  
  
  
  
  38.             
  
  
  
  
  39.                 ohos:width="match_content"
    40. 
  
  
  
  
  40.                 ohos:height="match_content"
    41. 
  
  
  
  
  41.                 ohos:multiple_lines="true"
    42. 
  
  
  
  
  42.                 ohos:text="帶你從傳統(tǒng)的互聯(lián)網(wǎng)、移動(dòng)互聯(lián)網(wǎng)時(shí)代
    43. 
  
  
  
  
  43.                                跳轉(zhuǎn)到萬(wàn)物互聯(lián)的智能世界!
    44. 
  
  
  
  
  44.                                     馬上創(chuàng)建體驗(yàn)個(gè)人、公司或組織的鴻蒙應(yīng)用吧！"
    45. 
  
  
  
  
  45.                 ohos:text_size="25fp"
    46. 
  
  
  
  
  46.                 ohos:top_margin="240px"
    47. 
  
  
  
  
  47.                 ohos:left_margin="10px"/>
    48. 
  
  
  
  
  48.             
  
  
  
  
  49.                 ohos:id="$+id:jltfbutton"
    50. 
  
  
  
  
  50.                 ohos:width="match_content"
    51. 
  
  
  
  
  51.                 ohos:height="match_content"
    52. 
  
  
  
  
  52.                 ohos:text="點(diǎn)擊了解更多"
    53. 
  
  
  
  
  53.                 ohos:text_size="30fp"
    54. 
  
  
  
  
  54.                 ohos:top_margin="290px"
    55. 
  
  
  
  
  55.                ohos:left_margin="680px"
    56. 
  
  
  
  
  56.                 ohos:text_color="red"/>
    57. 
  
  
  
  
  57.         
    58. 
  
  
  
  
  58. 
  
  
  
  
  59.     
    60. 
  
  
  
  
  60. 
  
  
  
  
  61.

 第二個(gè)頁(yè)面中的布局

 
 
 
 
    
  
  
  
  
    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.     
  
  
  
  
  9.         ohos:width="match_parent"
    10. 
  
  
  
  
  10.         ohos:height="160px"
    11. 
  
  
  
  
  11.         >
    12. 
  
  
  
  
  12.         
  
  
  
  
  13.             ohos:width="match_content"
    14. 
  
  
  
  
  14.             ohos:height="match_content"
    15. 
  
  
  
  
  15.             ohos:text="蛟龍騰飛"
    16. 
  
  
  
  
  16.             ohos:text_size="25fp"
    17. 
  
  
  
  
  17.             ohos:top_margin="40px"
    18. 
  
  
  
  
  18.             ohos:left_margin="40px"/>
    19. 
  
  
  
  
  19. 
  
  
  
  
  20.     
    21. 
  
  
  
  
  21.     
  
  
  
  
  22.         ohos:width="match_parent"
    23. 
  
  
  
  
  23.         ohos:height="920px"
    24. 
  
  
  
  
  24.         ohos:orientation="horizontal">
    25. 
  
  
  
  
  25.         
  
  
  
  
  26.             ohos:id="$+id:direction1"
    27. 
  
  
  
  
  27.             ohos:height="match_parent"
    28. 
  
  
  
  
  28.             ohos:width="820px">
    29. 
  
  
  
  
  29.             
  
  
  
  
  30.                 ohos:width="600px"
    31. 
  
  
  
  
  31.                 ohos:height="600px"
    32. 
  
  
  
  
  32.                 ohos:top_margin="60px"
    33. 
  
  
  
  
  33.                 ohos:left_margin="100px"
    34. 
  
  
  
  
  34.                 ohos:image_src="$media:index7"/>
    35. 
  
  
  
  
  35.         
    36. 
  
  
  
  
  36.         
  
  
  
  
  37.             ohos:height="match_parent"
    38. 
  
  
  
  
  38.             ohos:width="1100px">
    39. 
  
  
  
  
  39.             
  
  
  
  
  40.                 ohos:width="match_content"
    41. 
  
  
  
  
  41.                 ohos:height="match_content"
    42. 
  
  
  
  
  42.                 ohos:multiple_lines="true"
    43. 
  
  
  
  
  43.                 ohos:text="你好，歡迎來(lái)到鴻蒙時(shí)代！
    44. 
  
  
  
  
  44.                                     蛟龍騰飛，鴻蒙先行者，全心全意為你提供鴻蒙各項(xiàng)服務(wù)！  馬上咨詢：
    45. 
  
  
  
  
  45.                                              李先生:13725519713 或 18138827525"
    46. 
  
  
  
  
  46.                 ohos:text_size="25fp"
    47. 
  
  
  
  
  47.                 ohos:top_margin="240px"
    48. 
  
  
  
  
  48.                 ohos:left_margin="10px"/>
    49. 
  
  
  
  
  49.         
    50. 
  
  
  
  
  50. 
  
  
  
  
  51.     
    52. 
  
  
  
  
  52. 
  
  
  
  
  53.

 然后再第一個(gè)頁(yè)面中加入點(diǎn)擊事件進(jìn)行跳轉(zhuǎn)

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

Smart vision模擬器上的代碼案例

新建項(xiàng)目選擇模板進(jìn)行下一步。

這里選擇的是js開發(fā)的模板就需要下載node.js文件在編輯器中進(jìn)行配置(node.js)網(wǎng)上有下載教程。

顯示效果：

點(diǎn)擊“點(diǎn)擊了解更多”進(jìn)入下一個(gè)頁(yè)面

代碼如下：

 Index.hml

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

  • Index.css

     
 
 
 
      
  
  
  
  
    1. .container {
      2. 
  
  
  
  
    2.     flex-direction: column;
      3. 
  
  
  
  
    3.     width: 960px;
      4. 
  
  
  
  
    4.     height: 480px;
      5. 
  
  
  
  
    5.     justify-content: center;
      6. 
  
  
  
  
    6.     align-items: center;
      7. 
  
  
  
  
    7. }
      8. 
  
  
  
  
    8. .container1 {
      9. 
  
  
  
  
    9.     flex-direction: row;
      10. 
  
  
  
  
    10.     width: 960px;
      11. 
  
  
  
  
    11.     height: 400px;
      12. 
  
  
  
  
    12. }
      13. 
  
  
  
  
    13. .container2 {
      14. 
  
  
  
  
    14.     margin-left: 30px;
      15. 
  
  
  
  
    15.     flex-direction: column;
      16. 
  
  
  
  
    16.     width: 600px;
      17. 
  
  
  
  
    17.     height: 400px;
      18. 
  
  
  
  
    18. }
      19. 
  
  
  
  
    19. .jltftxt {
      20. 
  
  
  
  
    20.      margin-left: -700px;
      21. 
  
  
  
  
    21.      margin-bottom: 10px;
      22. 
  
  
  
  
    22.     font-size: 45px;
      23. 
  
  
  
  
    23. }
      24. 
  
  
  
  
    24. .jltftxt1 {
      25. 
  
  
  
  
    25.     margin-top: 45px;
      26. 
  
  
  
  
    26. }
      27. 
  
  
  
  
    27. .jltftxt4 {
      28. 
  
  
  
  
    28.     margin-left: 5px;
      29. 
  
  
  
  
    29. }
      30. 
  
  
  
  
    30. .jltfimg {
      31. 
  
  
  
  
    31.     margin-top: 40px;
      32. 
  
  
  
  
    32.     width: 300px;
      33. 
  
  
  
  
    33.     height: 282px;
      34. 
  
  
  
  
    34.     margin-left: 40px;
      35. 
  
  
  
  
    35. }
      36. 
  
  
  
  
    36. .jltfbtn {
      37. 
  
  
  
  
    37.     height: 60px;
      38. 
  
  
  
  
    38.     width: 280px;
      39. 
  
  
  
  
    39.     margin-left: 260px;
      40. 
  
  
  
  
    40.     margin-top: 50px;
      41. 
  
  
  
  
    41. }
      42. 
  
  
  
  
    42. .jltftxt1,.jltftxt2,.jltftxt3,.jltftxt4{
      43. 
  
  
  
  
    43.     font-size: 40px;
      44. 
  
  
  
  
    44.     margin-left: 20px;
      45. 
  
  
  
  
    45. }
      46.

    Index.js

     
 
 
 
      
  
  
  
  
    1. import router from '@system.router'
      2. 
  
  
  
  
    2. 
  
  
  
  
    3. export default {
      4. 
  
  
  
  
    4.     data: {
      5. 
  
  
  
  
    5. 
  
  
  
  
    6.     },
      7. 
  
  
  
  
    7.     jltfclick() {
      8. 
  
  
  
  
    8.         router.replace({
      9. 
  
  
  
  
    9.             uri:'pages/jltfindex/jltfindex'
      10. 
  
  
  
  
    10.         });
      11. 
  
  
  
  
    11.     }
      12. 
  
  
  
  
    12. }
      13. 
  
  
  
  
    13. 
  
  
  
  
    14.  
      15. 
  
  
  
  
    15. 
  
  
  
  
    16. jltfIndex.hml
      17. 
  
  
  
  
    17. 
  
  
  
  
      19. 
  
  
  
  
    19.     
      20. 
  
  
  
  
    20.         蛟龍騰飛
      21. 
  
  
  
  
    21.     
      22. 
  
  
  
  
    22.      
      23. 
  
  
  
  
    23.     
      24. 
  
  
  
  
    24.          
      25. 
  
  
  
  
    25.              
      26. 
  
  
  
  
    26.                  你好，歡迎來(lái)到鴻蒙時(shí)代！
      27. 
  
  
  
  
    27.              
      28. 
  
  
  
  
    28.              
      29. 
  
  
  
  
    29.                  蛟龍騰飛，鴻蒙先行者，全
      30. 
  
  
  
  
    30.              
      31. 
  
  
  
  
    31.              
      32. 
  
  
  
  
    32.                  心全意為你提供鴻蒙各項(xiàng)服
      33. 
  
  
  
  
    33.              
      34. 
  
  
  
  
    34.              
      35. 
  
  
  
  
    35.                  務(wù)！
      36. 
  
  
  
  
    36.              
      37. 
  
  
  
  
    37.          
  •      

  • jltfIndex.css

     
 
 
 
      
  
  
  
  
    1. .container {
      2. 
  
  
  
  
    2.     flex-direction: column;
      3. 
  
  
  
  
    3.     width: 960px;
      4. 
  
  
  
  
    4.     height: 480px;
      5. 
  
  
  
  
    5.     justify-content: center;
      6. 
  
  
  
  
    6.     align-items: center;
      7. 
  
  
  
  
    7. }
      8. 
  
  
  
  
    8. .container1 {
      9. 
  
  
  
  
    9.     flex-direction: row;
      10. 
  
  
  
  
    10.     width: 960px;
      11. 
  
  
  
  
    11.     height: 400px;
      12. 
  
  
  
  
    12. }
      13. 
  
  
  
  
    13. .container2 {
      14. 
  
  
  
  
    14.     margin-left: 5px;
      15. 
  
  
  
  
    15.     flex-direction: column;
      16. 
  
  
  
  
    16.     width: 600px;
      17. 
  
  
  
  
    17.     height: 400px;
      18. 
  
  
  
  
    18. }
      19. 
  
  
  
  
    19. .jltftxt {
      20. 
  
  
  
  
    20.     margin-left: -700px;
      21. 
  
  
  
  
    21.     margin-bottom: 10px;
      22. 
  
  
  
  
    22.     font-size: 45px;
      23. 
  
  
  
  
    23. }
      24. 
  
  
  
  
    24. .jltftxt1 {
      25. 
  
  
  
  
    25.     margin-top: 50px;
      26. 
  
  
  
  
    26. }
      27. 
  
  
  
  
    27. .jltfimg {
      28. 
  
  
  
  
    28.     margin-top: 20px;
      29. 
  
  
  
  
    29.     width: 357px;
      30. 
  
  
  
  
    30.     height: 321px;
      31. 
  
  
  
  
    31.     margin-left: 20px;
      32. 
  
  
  
  
    32. }
      33. 
  
  
  
  
    33. .jltftxt1,.jltftxt2,.jltftxt3,.jltftxt4{
      34. 
  
  
  
  
    34.     font-size: 45px;
      35. 
  
  
  
  
    35.     margin-left: 20px;
      36. 
  
  
  
  
    36. }
      37. 
  
  
  
  
    37. 
  
  
  
  
    38.  
      39.

    jltfIndex.js

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

    在第一個(gè)頁(yè)面js文件中加入跳轉(zhuǎn)的代碼

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

     還得在配置文件中配置相關(guān)下一個(gè)頁(yè)面的位置

    config.json找到圖中js的位置

     
 
 
 
      
  
  
  
  
    1. "js": [
      2. 
  
  
  
  
    2.   {
      3. 
  
  
  
  
    3.     "pages": [
      4. 
  
  
  
  
    4.       "pages/index/index",
      5. 
  
  
  
  
    5.       "pages/jltfindex/jltfindex"
      6. 
  
  
  
  
    6.     ],
      7. 
  
  
  
  
    7.     "name": "default"
      8. 
  
  
  
  
    8.   }
      9. 
  
  
  
  
    9. ]
      10.

     加入"pages/jltfindex/jltfindex"下一個(gè)頁(yè)面位置即可

    wearable模擬器上的代碼案例

    新建項(xiàng)目選擇模板進(jìn)行下一步。

    顯示效果：

    點(diǎn)擊“點(diǎn)擊了解更多”進(jìn)入下一個(gè)頁(yè)面

    代碼如下：

    第一個(gè)頁(yè)面

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

     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. }
      17. 
  
  
  
  
    17. .jltftxt4 {
      18. 
  
  
  
  
    18.     margin-left: 5px;
      19. 
  
  
  
  
    19. }
      20. 
  
  
  
  
    20. .jltfimg {
      21. 
  
  
  
  
    21.     width: 138px;
      22. 
  
  
  
  
    22.     height: 103px;
      23. 
  
  
  
  
    23.     margin-left: 5px;
      24. 
  
  
  
  
    24. }
      25. 
  
  
  
  
    25. .jltfbtn {
      26. 
  
  
  
  
    26.     height: 60px;
      27. 
  
  
  
  
    27.     width: 280px;
      28. 
  
  
  
  
    28.     margin-bottom: -60px;
      29. 
  
  
  
  
    29. }
      30. 
  
  
  
  
    30. .jltftxt1,.jltftxt2,.jltftxt3,.jltftxt4{
      31. 
  
  
  
  
    31.     font-size: 30px;
      32. 
  
  
  
  
    32. }
      33.

     Index.js

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

     Jltfidnex.hml

      
 
 
 
      
   
  
  
  
      2. 
   
  
  
  
    2.     
      3. 
   
  
  
  
    3.         蛟龍騰飛
      4. 
   
  
  
  
    4.     
      5. 
   
  
  
  
    5.     
      6. 
   
  
  
  
    6.     
      7. 
   
  
  
  
    7.         你好，歡迎來(lái)到鴻蒙時(shí)代！
      8. 
   
  
  
  
    8.     
      9. 
   
  
  
  
    9.     
      10. 
   
  
  
  
    10.         蛟龍騰飛，鴻蒙先行者，全心全
      11. 
   
  
  
  
    11.     
      12. 
   
  
  
  
    12.     
      13. 
   
  
  
  
    13.         意為你提供鴻蒙各項(xiàng)服務(wù)！
      14. 
   
  
  
  
    14.     
      15. 
   
  
  
  
    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.     margin-left: 30px;
      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. 
  
  
  
  
    26. .jltftxt1,.jltftxt2,.jltftxt3,.jltftxt4{
      27. 
  
  
  
  
    27.     font-size: 30px;
      28. 
  
  
  
  
    28. }
      29.

     Jltfindex.js

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

     然后進(jìn)行頁(yè)面跳轉(zhuǎn)的配置

    在一個(gè)頁(yè)面index.js中進(jìn)行配置

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

     這樣了還不能跳轉(zhuǎn)，“wearable”和“l(fā)itewearable
    本文名稱：鴻蒙HarmonyOS北向應(yīng)用開發(fā)者極速入門教程（一）續(xù)-實(shí)戰(zhàn)練習(xí)篇1
    文章來(lái)源：http://www.5511xx.com/article/coceico.html