鸿蒙HarmonyOS北向应用开发者极速入门教程（一）续-实战练习篇1

 想了解更多内容，请访问：

和华为官方合作共建的鸿蒙技术社区

https://harmonyos./#zz

三、实战练习

截图另外做文档答题。文档要求，文件名：某某研究日志日期。文件内容，题目和答题，截图代码和文字等综合展示。

1.练习题一

以下是基于DevEco Studio蛟龙腾飞北向应用开发工程师已经实现的布局、功能、代码及路径，请安装要求一模一样的流程和效果，在自己的DevEco Studio实现。这里我们可以自行选择自己想开发的设备和模板，这里我们以Phone为例，开发模板选择空特性java的开发模板，点击next进行下一步。

开发的设备有七种：

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

Phone设备中有很多种不同的模板，主要是java和js进行开发以及不同的模板样式，不同样式之间布局不一样，不同的布局所展示的效果代码已经写入其中，只需要加入想加入的元素即可。

选择好了之后点击next进行下一步。

这里是创建项目的一些项目配置，配置完成点击Finish完成创建。

完成创建后，我们进入了主界面，这里需要等待一小会，因为一些配置东西在进行下载配置。

Phone模拟器上的代码案例：

显示效果：

双击图中选中的设备就可以运行了。

显示如下：

运行效果：

点击“点击了解更多”进入下一个页面：

代码如下：

第一个布局中

 
 
 
 
    
  
  
  
  
    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="带你从传统的互联网、移动互联网时代"/>
    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="8px"
    52. 
  
  
  
  
  52.             ohos:top_margin="10px"
    53. 
  
  
  
  
  53.             ohos:text="马上创建体验个人、公司或组织的鸿蒙应用吧！"/>
    54. 
  
  
  
  
  54.         
  
  
  
  
  55.             ohos:id="$+id:jltfbutton"
    56. 
  
  
  
  
  56.             ohos:width="match_content"
    57. 
  
  
  
  
  57.             ohos:height="match_content"
    58. 
  
  
  
  
  58.             ohos:text="点击了解更多"
    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.

 第二个布局中

 
 
 
 
    
  
  
  
  
    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="你好，欢迎来到鸿蒙时代！"/>
    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="提供鸿蒙各项服务！ 马上咨询：李先生 13725519713 或 18138827525"/>
    54. 
  
  
  
  
  54.     
    55. 
  
  
  
  
  55. 
  
  
  
  
  56.

 在slice文件的类中添加点击事件进行跳转：

 
 
 
 
    
  
  
  
  
  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模拟器上的代码案例：

新建项目选择模板进行下一步。

显示效果：

点击“点击了解更多”进入下一个页面。

代码如下：

第一个页面中的布局

 
 
 
 
    
  
  
  
  
    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="带你从传统的互联网、移动互联网时代
    43. 
  
  
  
  
  43.                                跳转到万物互联的智能世界!
    44. 
  
  
  
  
  44.                                     马上创建体验个人、公司或组织的鸿蒙应用吧！"
    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="点击了解更多"
    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.

 第二个页面中的布局

 
 
 
 
    
  
  
  
  
    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="你好，欢迎来到鸿蒙时代！
    44. 
  
  
  
  
  44.                                     蛟龙腾飞，鸿蒙先行者，全心全意为你提供鸿蒙各项服务！  马上咨询：
    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.

 然后再第一个页面中加入点击事件进行跳转

 
 
 
 
    
  
  
  
  
  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模拟器上的代码案例

新建项目选择模板进行下一步。

这里选择的是js开发的模板就需要下载node.js文件在编辑器中进行配置(node.js)网上有下载教程。

显示效果：

点击“点击了解更多”进入下一个页面

代码如下：

 Index.hml

 
 
 
 
    
  
  
  
  
    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. 
  
  
  
  
  15.                 能世界!。马上创建体验个人、
    16. 
  
  
  
  
  16.             
    17. 
  
  
  
  
  17.             
    18. 
  
  
  
  
  18.                 公司或组织的鸿蒙应用吧！
    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.                  你好，欢迎来到鸿蒙时代！
      27. 
  
  
  
  
    27.              
      28. 
  
  
  
  
    28.              
      29. 
  
  
  
  
    29.                  蛟龙腾飞，鸿蒙先行者，全
      30. 
  
  
  
  
    30.              
      31. 
  
  
  
  
    31.              
      32. 
  
  
  
  
    32.                  心全意为你提供鸿蒙各项服
      33. 
  
  
  
  
    33.              
      34. 
  
  
  
  
    34.              
      35. 
  
  
  
  
    35.                  务！
      36. 
  
  
  
  
    36.              
      37. 
  
  
  
  
    37.          
      38. 
  
  
  
  
    38.      
      39. 
  
  
  
  
    39.

    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.

    在第一个页面js文件中加入跳转的代码

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

     还得在配置文件中配置相关下一个页面的位置

    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"下一个页面位置即可

    wearable模拟器上的代码案例

    新建项目选择模板进行下一步。

    显示效果：

    点击“点击了解更多”进入下一个页面

    代码如下：

    第一个页面

     
 
 
 
      
  
  
  
  
    1. Index.hml
      2. 
  
  
  
  
    2. 
  
  
  
  
      4. 
  
  
  
  
    4.     
      5. 
  
  
  
  
    5.        蛟龙腾飞
      6. 
  
  
  
  
    6.     
      7. 
  
  
  
  
    7.     
      8. 
  
  
  
  
    8.     
      9. 
  
  
  
  
    9.         带你从传统的互联网、移动互
      10. 
  
  
  
  
    10.     
      11. 
  
  
  
  
    11.     
      12. 
  
  
  
  
    12.         联网时代. 跳转到万物互联的智
      13. 
  
  
  
  
    13.     
      14. 
  
  
  
  
    14.     
      15. 
  
  
  
  
    15.          能世界!。马上创建体验个人、
      16. 
  
  
  
  
    16.     
      17. 
  
  
  
  
    17.     
      18. 
  
  
  
  
    18.         公司或组织的鸿蒙应用吧！
      19. 
  
  
  
  
    19.     
      20. 
  
  
  
  
    20.     
      21. 
  
  
  
  
    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.         你好，欢迎来到鸿蒙时代！
      8. 
   
  
  
  
    8.     
      9. 
   
  
  
  
    9.     
      10. 
   
  
  
  
    10.         蛟龙腾飞，鸿蒙先行者，全心全
      11. 
   
  
  
  
    11.     
      12. 
   
  
  
  
    12.     
      13. 
   
  
  
  
    13.         意为你提供鸿蒙各项服务！
      14. 
   
  
  
  
    14.     
      15. 
   
  
  
  
    15. 
   
  
  
  
    16.

     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.

     然后进行页面跳转的配置

    在一个页面index.js中进行配置

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

     这样了还不能跳转，“wearable”和“litewearable

    当前题目：鸿蒙HarmonyOS北向应用开发者极速入门教程（一）续-实战练习篇1
    文章路径：http://www.csdahua.cn/qtweb/news23/311023.html

    网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

    成都快上网为您推荐相关内容

    面包屑导航知识

    分类信息网站

    响应式网站　　 　成都众诚伟业　　 　gyruijie.cn　　 　四川白乌鱼　　 　微官网开发　　 　德阳发电机　　 　外贸网站设计方案　　 　成都网站设计公司　　 　南充服务器托管　　 　梓潼网站制作公司　　 　营山月子护理　　 　全网营销　　 　医药医疗网站建设方案　　 　重庆网站制作　　 　小谭建站　　 　成都网站设计　　 　服务器托管　　 　网站建设　　 　成都酒店服定制　　 　IOS开发