HarmonyOS北向应用开发者 极速入门教程（一）

小嵌

HarmonyOS北向应用开发者 极速入门教程（一）, 说明：一个完整优秀的应用服务需要产品经理、UIUE、前端工程师、后端工程师、测试工程师等团队协作才能完成，本教程适合有JAVA与JS知识基础的开发者使用，按照本教程练习完成，即可以初步进行鸿蒙操作系统基于
Dev
E
co Studio 应用服务代码开发工作。 本教程中如发现有错误请留言勘正，有更好的完善想法者，布置的作业与心得等愿意上交者，请跟贴留言。本教程为本公司团队实践工作中原创，欢迎引用，但是引用中请注明来源：蛟龙腾飞。 目录 一、 注册华为账户 二、 安装 DevEco Studio 1.系统要求 2.DevEco Studio 下载安装 三、 实战练习 1.练习题一 图片文字代码，照搬照抄我们给的七个案例。 2.练习题二 按照提示，自由发挥，大胆尝试。 2.练习题三 全面体验，不要怕弄坏DevEco Studio ！
一、注册华为账户 我们首先需要一个华为的账号 并进行实名认证 ， 考注册华为账号链接：
https://developer.huawei.com/consumer/cn/doc/20300
。 如果已经有账户并认证过的，本步骤忽略。
二、安装
Dev
E
co Studio
1.系统要求

图片1.png （19.87 KB, 下载次数: 0）

下载附件  保存到相册  

23 分钟前 上传

图片2.png （20.24 KB, 下载次数: 0）

下载附件  保存到相册  

23 分钟前 上传 2.
Dev
E
co Studio
下载安装 我们可以进入官方地址下载
Dev
E
co Studio
。 下载地址 ：https://developer.HarmonyOS.com/cn/develop/deveco-studio#download 点击链接进入官网我们可以看到两个版本的操作系统下载，这里可以根据自己的操作系统进行下载，这里我用的是Windows的，这里我就演示Windows的下载过程。

图片3.png （96.61 KB, 下载次数: 0）

下载附件  保存到相册  

22 分钟前 上传 这里我们点击Windows版的进行下载，这里会弹到一个登陆界面，这里就用我们刚刚注册号的华为账号进行登陆即可下载。

图片4.png （30 KB, 下载次数: 0）

下载附件  保存到相册  

22 分钟前 上传 下载完成后我们在对应的路径中找到下载的安装包，解压。

图片5.png （21.96 KB, 下载次数: 0）

下载附件  保存到相册  

22 分钟前 上传 打开解压的文件然后进行安装。

图片6.png （19.33 KB, 下载次数: 0）

下载附件  保存到相册  

21 分钟前 上传 安装欢迎界面，点击next进行下一步。

图片7.png （34.76 KB, 下载次数: 0）

下载附件  保存到相册  

21 分钟前 上传 这里可以自主选择安装的路径，路径尽量别使用汉字，然后点击next进行下一步。

图片8.png （23.64 KB, 下载次数: 0）

下载附件  保存到相册  

21 分钟前 上传 我们勾选第一个，可以在桌面上创建一个快捷键，方便打开应用，然后点击next进行下一步。

图片9.png （22.2 KB, 下载次数: 0）

下载附件  保存到相册  

21 分钟前 上传 这里默认就好了，然后点击install进行安装 。

图片10.png （25.46 KB, 下载次数: 0）

下载附件  保存到相册  

20 分钟前 上传 这里静静等待安装好，点击next进行下一步。

图片11.png （18.4 KB, 下载次数: 0）

下载附件  保存到相册  

20 分钟前 上传 这里就安装好了，我们可以在桌面上看到按照的Studio，这里我们可以双击打开看看 。

图片12.png （14.83 KB, 下载次数: 0）

下载附件  保存到相册  

20 分钟前 上传 点开我们这里不需要导入什么东西，直接选择ok就好了，然后会弹出一个协议，这里的协议我们把√打上，然后点击Agree进入APP 。

图片13.png （13.47 KB, 下载次数: 0）

下载附件  保存到相册  

20 分钟前 上传 创建项目

图片14.png （39.81 KB, 下载次数: 0）

下载附件  保存到相册  

19 分钟前 上传
三、实战练习 截图另外做文档答题。文档要求，文件名：某某研究日志日期。文件内容，题目和答题，截图代码和文字等综合展示。 1.练习题一 以 下是基于DevEco Studio 蛟龙腾飞北向应用开发工程师已经实现的布局、功能、代码及路径，请安装要求一模一样的流程和效果，在自己的DevEco Studio 实现。 这里我们可以自行选择自己想开发的设备和模板，这里我们以Phone为例，开发模板选择空特性java的开发模板，点击next进行下一步 。 开发的设备有七种： Phone Tablet Car Tv Wearable Lite wearable smart vision Phone 设备 中有很多种不同的模板，主要是java和js进行开发以及不同的模板样式，不同样式之间布局不一样，不同的布局所展示的效果代码已经写入其中，只需要加入想加入的元素即可。

图片15.png （45.81 KB, 下载次数: 0）

下载附件  保存到相册  

19 分钟前 上传 选择好了之后点击next进行下一步。 这里是创建项目的一些项目配置，配置完成点击Finish完成创建。

图片16.png （43.89 KB, 下载次数: 0）

下载附件  保存到相册  

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

图片7.png （34.76 KB, 下载次数: 0）

下载附件  保存到相册  

19 分钟前 上传

P
hone模拟器上的代码案例

图片18.png （518.03 KB, 下载次数: 0）

下载附件  保存到相册  

18 分钟前 上传 显示效果：

图片19.png （95.36 KB, 下载次数: 0）

下载附件  保存到相册  

17 分钟前 上传

图片20.png （36.88 KB, 下载次数: 0）

下载附件  保存到相册  

17 分钟前 上传

图片21.png （223.42 KB, 下载次数: 0）

下载附件  保存到相册  

17 分钟前 上传

图片22.png （227.35 KB, 下载次数: 0）

下载附件  保存到相册  

16 分钟前 上传 双击图中选中的设备就可以运行了 显示如下：

图片23.png （266.46 KB, 下载次数: 0）

下载附件  保存到相册  

16 分钟前 上传

图片24.png （377.15 KB, 下载次数: 0）

下载附件  保存到相册  

16 分钟前 上传
运行效果：

图片25.png （68.55 KB, 下载次数: 0）

下载附件  保存到相册  

16 分钟前 上传 点击“点击了解更多”进入下一个页面

图片26.png （63.65 KB, 下载次数: 0）

下载附件  保存到相册  

16 分钟前 上传 代码如下： 第一个布局中 <?xml version=“1.0“ encoding=“utf-8“?>

<Directionallayout

     xmlns:ohos=“http://schemas.huawei.com/res/ohos“

     ohos:height=“match_parent“

     ohos:width=“match_parent“

     ohos:orientation=“vertical“>



     <DirectionalLayout

         ohos:width=“match_parent“

         ohos:weight=“1“>

         <Text

             ohos:width=“match_content“

             ohos:height=“match_content“

             ohos:text=“ 蛟龙腾飞“

             ohos:text_size=“80px“

             ohos:top_margin=“280px“

             ohos:left_margin=“50px“/>

     </DirectionalLayout>

     <DirectionalLayout

         ohos:weight=“1“

         ohos:width=“match_parent“>

         <Image

             ohos:width=“1080px“

             ohos:height=“468px“

             ohos:image_src=“$media:index12.jpg“/>



     </DirectionalLayout>

     <DirectionalLayout

         ohos:width=“match_parent“

         ohos:weight=“3“>

         <Text

             ohos:width=“match_content“

             ohos:height=“match_content“

             ohos:text_size=“60px“

             ohos:multiple_lines=“true“

             ohos:left_margin=“8px“

             ohos:text=“ 带你从传统的互联网、移动互联网时代“/>

         <Text

             ohos:width=“match_content“

             ohos:height=“match_content“

             ohos:text_size=“60px“

             ohos:multiple_lines=“true“

             ohos:left_margin=“8px“

             ohos:top_margin=“10px“

             ohos:text=“ 跳转到万物互联的智能世界!“/>

         <Text

             ohos:width=“match_content“

             ohos:height=“match_content“

             ohos:text_size=“60px“

             ohos:multiple_lines=“true“

             ohos:left_margin=“8px“

             ohos:top_margin=“10px“

             ohos:text=“ 马上创建体验个人、公司或组织的鸿蒙应用吧！“/>

         <Button

             ohos:id=“$+id:jltfbutton“

             ohos:width=“match_content“

             ohos:height=“match_content“

             ohos:text=“ 点击了解更多“

             ohos:text_color=“red“

             ohos:text_size=“100px“

             ohos:top_margin=“400px“

             ohos:left_margin=“420px“/>

     </DirectionalLayout>



</DirectionalLayout> 第二个布局中 <?xml version=“1.0“ encoding=“utf-8“?>

<DirectionalLayout

     xmlns:ohos=“http://schemas.huawei.com/res/ohos“

     ohos:height=“match_parent“

     ohos:width=“match_parent“

     ohos:orientation=“vertical“>



     <DirectionalLayout

         ohos:width=“match_parent“

         ohos:weight=“1“>

         <Text

             ohos:width=“match_content“

             ohos:height=“match_content“

             ohos:text=“ 蛟龙腾飞“

             ohos:text_size=“80px“

             ohos:top_margin=“280px“

             ohos:left_margin=“50px“/>

     </DirectionalLayout>

     <DirectionalLayout

         ohos:weight=“1“

         ohos:width=“match_parent“>

         <Image

             ohos:width=“1080px“

             ohos:height=“468px“

             ohos:image_src=“$media:index13.jpg“/>



     </DirectionalLayout>

     <DirectionalLayout

         ohos:width=“match_parent“

         ohos:weight=“3“>

         <Text

             ohos:width=“match_content“

             ohos:height=“match_content“

             ohos:text_size=“60px“

             ohos:multiple_lines=“true“

             ohos:left_margin=“8px“

             ohos:text=“ 你好，欢迎来到鸿蒙时代！“/>

         <Text

             ohos:width=“match_content“

             ohos:height=“match_content“

             ohos:text_size=“60px“

             ohos:multiple_lines=“true“

             ohos:left_margin=“8px“

             ohos:top_margin=“10px“

             ohos:text=“ 蛟龙腾飞，鸿蒙先行者，全心全意为你“/>

         <Text

             ohos:width=“match_content“

             ohos:height=“match_content“

             ohos:text_size=“60px“

             ohos:multiple_lines=“true“

             ohos:left_margin=“10px“

             ohos:top_margin=“10px“

             ohos:text=“ 提供鸿蒙各项服务！ 马上咨询：李先生 13725519713 或 18138827525“/>

     </DirectionalLayout>



</DirectionalLayout> 在slice文件的类中 添加点击事件进行跳转

图片27.png （372.1 KB, 下载次数: 0）

下载附件  保存到相册  

15 分钟前 上传 Button button = （Button） findComponentById（ResourceTable.
Id_jltfbutton）;

button.setClickedListener（new Component.ClickedListener（） {

     @Override

     public void onClick（Component component） {

         present（new JltfAbilitySlice（）,new Intent（））;

     }

}）;
TV模拟器上的代码案例 新建项目选择模板进行下一步。

图片28.png （45.16 KB, 下载次数: 0）

下载附件  保存到相册  

15 分钟前 上传 显示效果：

图片29.png （216.39 KB, 下载次数: 0）

下载附件  保存到相册  

15 分钟前 上传 点击“点击了解更多”进入下一个页面

图片30.png （188.8 KB, 下载次数: 0）

下载附件  保存到相册  

15 分钟前 上传 代码如下： 第一个页面中的布局 <?xml version=“1.0“ encoding=“utf-8“?>

<DirectionalLayout

     xmlns:ohos=“http://schemas.huawei.com/res/ohos“

     ohos:height=“match_parent“

     ohos:width=“match_parent“

     ohos:orientation=“vertical“>



    <DirectionalLayout

        ohos:width=“match_parent“

        ohos:height=“160px“

        >

        <Text

            ohos:width=“match_content“

            ohos:height=“match_content“

            ohos:text=“ 蛟龙腾飞“

            ohos:text_size=“25fp“

            ohos:top_margin=“40px“

            ohos:left_margin=“40px“/>



    </DirectionalLayout>

     <DirectionalLayout

         ohos:width=“match_parent“

         ohos:height=“920px“

         ohos:orientation=“horizontal“>

         <DirectionalLayout

             ohos:height=“match_parent“

             ohos:width=“820px“>

             <Image

                 ohos:width=“600px“

                 ohos:height=“600px“

                 ohos:top_margin=“60px“

                 ohos:left_margin=“100px“

                 ohos:image_src=“$media:index6“/>

         </DirectionalLayout>

         <DirectionalLayout

             ohos:height=“match_parent“

             ohos:width=“1100px“>

             <Text

                 ohos:width=“match_content“

                 ohos:height=“match_content“

                 ohos:multiple_lines=“true“

                 ohos:text=“ 带你从传统的互联网、移动互联网时代

                                跳转到万物互联的智能世界!

                                      马上创建体验个人、公司或组织的鸿蒙应用吧！“

                 ohos:text_size=“25fp“

                 ohos:top_margin=“240px“

                 ohos:left_margin=“10px“/>

             <Button

                 ohos:id=“$+id:jltfbutton“

                 ohos:width=“match_content“

                 ohos:height=“match_content“

                 ohos:text=“ 点击了解更多“

                 ohos:text_size=“30fp“

                 ohos:top_margin=“290px“

                ohos:left_margin=“680px“

                 ohos:text_color=“red“/>

         </DirectionalLayout>



     </DirectionalLayout>



</DirectionalLayout> 第二个页面中的布局 <?xml version=“1.0“ encoding=“utf-8“?>

<DirectionalLayout

     xmlns:ohos=“http://schemas.huawei.com/res/ohos“

     ohos:height=“match_parent“

     ohos:width=“match_parent“

     ohos:orientation=“vertical“>



     <DirectionalLayout

         ohos:width=“match_parent“

         ohos:height=“160px“

         >

         <Text

             ohos:width=“match_content“

             ohos:height=“match_content“

             ohos:text=“ 蛟龙腾飞“

             ohos:text_size=“25fp“

             ohos:top_margin=“40px“

             ohos:left_margin=“40px“/>



     </DirectionalLayout>

     <DirectionalLayout

         ohos:width=“match_parent“

         ohos:height=“920px“

         ohos:orientation=“horizontal“>

         <DirectionalLayout

             ohos:id=“$+id:direction1“

             ohos:height=“match_parent“

             ohos:width=“820px“>

             <Image

                 ohos:width=“600px“

                 ohos:height=“600px“

                 ohos:top_margin=“60px“

                 ohos:left_margin=“100px“

                 ohos:image_src=“$media:index7“/>

         </DirectionalLayout>

         <DirectionalLayout

             ohos:height=“match_parent“

             ohos:width=“1100px“>

             <Text

                 ohos:width=“match_content“

                 ohos:height=“match_content“

                 ohos:multiple_lines=“true“

                 ohos:text=“ 你好，欢迎来到鸿蒙时代！

                                      蛟龙腾飞，鸿蒙先行者，全心全意为你提供鸿蒙各项服务！   马上咨询：

                                               李先生:13725519713 或 18138827525“

                 ohos:text_size=“25fp“

                 ohos:top_margin=“240px“

                 ohos:left_margin=“10px“/>

         </DirectionalLayout>



     </DirectionalLayout>



</DirectionalLayout> 然后再第一个页面中加入点击事件进行跳转 Button button = （Button） findComponentById（ResourceTable.
Id_jltfbutton）;



   button.setClickedListener（new Component.ClickedListener（） {

         @Override

         public void onClick（Component component） {



             present（new JltfAbilitySlice（）,new Intent（））;

         }





     }）;
S
mart
vision模拟器上的代码案例 新建项目选择模板进行下一步。

图片31.png （39.96 KB, 下载次数: 0）

下载附件  保存到相册  

14 分钟前 上传 这里选择的是js开发的模板就需要下载node.js文件在编辑器中进行配置（node.js）网上有下载教程。

图片32.png （274.96 KB, 下载次数: 0）

下载附件  保存到相册  

14 分钟前 上传 显示效果：

图片33.png （63.31 KB, 下载次数: 0）

下载附件  保存到相册  

14 分钟前 上传 点击“点击了解更多”进入下一个页面

图片34.png （64.09 KB, 下载次数: 0）

下载附件  保存到相册  

13 分钟前 上传 代码如下： Index.hml <div class=“container“>

     <text class=“jltftxt“>

        蛟龙腾飞

     </text>

     <div class=“container1“>

         <image src=“/common/index27.jpg“ class=“jltfimg“/>

         <div class=“container2“>

             <text class=“jltftxt1“>

                 带你从传统的互联网、移动互

             </text>

             <text class=“jltftxt2“>

                 联网时代. 跳转到万物互联的智

             </text>

             <text class=“jltftxt3“>

                 能世界! 。马上创建体验个人、

             </text>

             <text class=“jltftxt4“>

                 公司或组织的鸿蒙应用吧！

             </text>

             <input class=“jltfbtn“type=“button“ value=“ 点击了解更多“/>

         </div>



     </div>



</div> Index.css .
container {

     flex-direction: column;

     width: 960px;

     height: 480px;

     justify-content: center;

     align-items: center;

}

.container1 {

     flex-direction: row;

     width: 960px;

     height: 400px;

}

.
container2 {

     margin-left: 30px;

     flex-direction: column;

     width: 600px;

     height: 400px;

}

.jltftxt {

      margin-left: -700px;

      margin-bottom: 10px;

     font-size: 45px;

}

.jltftxt1 {

     margin-top: 45px;

}

.jltftxt4 {

     margin-left: 5px;

}

.jltfimg {

     margin-top: 40px;

     width: 300px;

     height: 282px;

     margin-left: 40px;

}

.jltfbtn {

     height: 60px;

     width: 280px;

     margin-left: 260px;

     margin-top: 50px;

}

.
jltftxt1,.jltftxt2,.
jltftxt3,.jltftxt4{

     font-size: 40px;

     margin-left: 20px;

} Index.js
import router
from \“@system.router\“




export default {

     data: {



     },

     jltfclick（） {

         router.replace（{

             uri:\“pages/jltfindex/jltfindex\“

         }）;

     }

} jltfIndex.hml <div class=“container“>

     <text class=“jltftxt“>

          蛟龙腾飞

     </text>

      <div class=“container1“>

     <image src=“/common/index28.jpg“ class=“jltfimg“/>

          <div class=“container2“>

              <text class=“jltftxt1“>

                   你好，欢迎来到鸿蒙时代！

              </text>

              <text class=“jltftxt2“>

                   蛟龙腾飞，鸿蒙先行者，全

              </text>

              <text class=“jltftxt3“>

                   心全意为你提供鸿蒙各项服

              </text>

              <text class=“jltftxt4“>

                   务！

              </text>

          </div>

      </div>

</div> jltfIndex.css .
container {

     flex-direction: column;

     width: 960px;

     height: 480px;

     justify-content: center;

     align-items: center;

}

.container1 {

     flex-direction: row;

     width: 960px;

     height: 400px;

}

.container2 {

     margin-left: 5px;

     flex-direction: column;

     width: 600px;

     height: 400px;

}

.jltftxt {

     margin-left: -700px;

     margin-bottom: 10px;

     font-size: 45px;

}

.jltftxt1 {

     margin-top: 50px;

}

.jltfimg {

     margin-top: 20px;

     width: 357px;

     height: 321px;

     margin-left: 20px;

}

.jltftxt1,.jltftxt2,.jltftxt3,.jltftxt4{

     font-size: 45px;

     margin-left: 20px;

} jltfIndex.js
export default {

     data: {

     }

} 在第一个页面js文件中加入跳转的代码 jltfclick（） {

         router.replace（{

             uri:\“pages/jltfindex/jltfindex\“

         }）;

     }

还得在配置文件中配置相关下一个页面的位置 config.json 找到图中js的位置 “js“: [

   {

     “pages“: [

       “pages/index/index“,

       “pages/jltfindex/jltfindex“

     ],

     “name“: “default“

   }

] 加入“pages/jltfindex/jltfindex“ 下一个页面位置即可
wearable模拟器上的代码案例

图片35.png （454.82 KB, 下载次数: 0）

下载附件  保存到相册  

13 分钟前 上传 新建项目选择模板进行下一步。

图片36.png （43.27 KB, 下载次数: 0）

下载附件  保存到相册  

13 分钟前 上传 显示效果：

图片37.png （79.06 KB, 下载次数: 0）

下载附件  保存到相册  

13 分钟前 上传
点击“点击了解更多”进入下一个页面

图片38.png （66.6 KB, 下载次数: 0）

下载附件  保存到相册  

13 分钟前 上传 代码如下： 第一个页面 Index.hml <div class=“container“>

     <text class=“jltftxt“>

        蛟龙腾飞

     </text>

     <image src=“/common/index22.png“ class=“jltfimg“/>

     <text class=“jltftxt1“>

          带你从传统的互联网、移动互

     </text>

     <text class=“jltftxt2“>

          联网时代. 跳转到万物互联的智

     </text>

     <text class=“jltftxt3“>

           能世界! 。马上创建体验个人、

     </text>

     <text class=“jltftxt4“>

          公司或组织的鸿蒙应用吧！

     </text>

     <input class=“jltfbtn“type=“button“ value=“点击了解更多“/>

</div> Index.css .container {

     flex-direction: column;

     width: 454px;

     height: 454px;

     justify-content: center;

     align-items: center;

}

.jltftxt {

      margin-left: -180px;

      margin-bottom: 10px;

}

.jltftxt1 {

     width: 400px;

     font-size: 30px;



}

.jltftxt4 {

     margin-left: 5px;

}

.jltfimg {

     width: 138px;

     height: 103px;

     margin-left: 5px;

}

.jltfbtn {

     height: 60px;

     width: 280px;

     margin-bottom: -60px;

}

.jltftxt1,.jltftxt2,.jltftxt3,.jltftxt4{

     font-size: 30px;

} Index.js
import router
from \“@system.router\“




export default {

     data: {



     },

     jltfclick（） {

         router.replace（{

             uri:\“pages/jltfindex/jltfindex\“

         }）;

     }

} Jltfidnex.hml <div class=“container“>

     <text class=“jltftxt“>

          蛟龙腾飞

     </text>

     <image src=“/common/index16.jpg“ class=“jltfimg“/>

     <text class=“jltftxt1“>

          你好，欢迎来到鸿蒙时代！

     </text>

     <text class=“jltftxt2“>

          蛟龙腾飞，鸿蒙先行者，全心全

     </text>

     <text class=“jltftxt3“>

          意为你提供鸿蒙各项服务！

     </text>



</div> Jltfindex.css .container {

     flex-direction: column;

     width: 454px;

     height: 454px;

     justify-content: center;

     align-items: center;

}

.jltftxt {

     margin-left: -180px;

     margin-bottom: 10px;

}

.jltftxt1 {

     width: 400px;

     font-size: 30px;

     margin-left: 30px;

}

.jltfimg {

     width: 413px;

     height: 103px;

     margin-left: 8px;

}

.jltfbtn {

     width: 200px;

     margin-bottom: -70px;

}

.jltftxt1,.jltftxt2,.jltftxt3,.jltftxt4{

     font-size: 30px;

} Jltfindex.js
export default {

     data: {

     }

} 然后进行页面跳转的配置 在一个页面index.js 中进行配置 jltfclick（） {

         router.replace（{

             uri:\“pages/jltfindex/jltfindex\“

         }）;

     }

这样了还不能跳转，“wearable”和“litewearable”有不同，在litewearable中这样就可以进行跳转了，但是在wearable中还需要在config.json 中进行配置，添加跳转的页面的地址 “js“: [

   {

     “pages“: [

       “pages/index/index“,

       “pages/jltfindex/jltfindex“

     ],

     “name“: “default“,

     “window“: {

       “designWidth“: 454,

       “autoDesignWidth“: false

     }

   }

] 找到图中位置添加 “pages/jltfindex/jltfindex“ 就可以了
car模拟器上的代码案例 新建项目选择模板进行下一步。

图片39.png （40.65 KB, 下载次数: 0）

下载附件  保存到相册  

12 分钟前 上传
显示效果：

图片40.png （50.33 KB, 下载次数: 0）

下载附件  保存到相册  

12 分钟前 上传 点击“点击了解更多”进入下一个页面

图片41.png （45.6 KB, 下载次数: 0）

下载附件  保存到相册  

12 分钟前 上传 代码如下： 第一个页面的布局 <?xml version=“1.0“ encoding=“utf-8“?>

<DirectionalLayout

     xmlns:ohos=“http://schemas.huawei.com/res/ohos“

     ohos:height=“match_parent“

     ohos:width=“match_parent“

     ohos:orientation=“vertical“>



     <DirectionalLayout

         ohos:width=“match_parent“

         ohos:weight=“1“>

         <Text

             ohos:width=“match_content“

             ohos:height=“match_content“

             ohos:text=“ 蛟龙腾飞“

             ohos:text_size=“20fp“

             ohos:top_margin=“40px“

             ohos:left_margin=“80px“/>



     </DirectionalLayout>

     <DirectionalLayout

         ohos:width=“match_parent“

         ohos:weight=“4“

         ohos:orientation=“horizontal“>

         <DirectionalLayout

             ohos:height=“match_parent“

             ohos:weight=“1“>

             <Image

                 ohos:width=“526px“

                 ohos:height=“504px“

                 ohos:top_margin=“-50px“

                 ohos:left_margin=“20px“

                 ohos:image_src=“$media:index20“/>

         </DirectionalLayout>

         <DirectionalLayout

             ohos:height=“match_parent“

             ohos:weight=“2“>

             <Text

                 ohos:width=“match_content“

                 ohos:height=“match_content“

                 ohos:multiple_lines=“true“

                 ohos:text=“ 带你从传统的互联网、移动互联网时代

                                跳转到万物互联的智能世界!

                                            马上创建体验个人、公司或组织的鸿蒙应用吧！“

                 ohos:text_size=“20fp“

                 ohos:top_margin=“20px“

                 ohos:left_margin=“60px“/>

             <Button

                 ohos:id=“$+id:jltfbutton“

                 ohos:width=“match_content“

                 ohos:height=“match_content“

                 ohos:text=“ 点击了解更多“

                 ohos:text_size=“25fp“

                 ohos:top_margin=“60px“

                 ohos:left_margin=“650px“

                 ohos:text_color=“red“/>

         </DirectionalLayout>



     </DirectionalLayout>



</DirectionalLayout> 第二个页面的布局 <?xml version=“1.0“ encoding=“utf-8“?>

<DirectionalLayout

     xmlns:ohos=“http://schemas.huawei.com/res/ohos“

     ohos:height=“match_parent“

     ohos:width=“match_parent“

     ohos:orientation=“vertical“>



     <DirectionalLayout

         ohos:width=“match_parent“

        ohos:weight=“1“

         >

         <Text

             ohos:width=“match_content“

             ohos:height=“match_content“

             ohos:text=“ 蛟龙腾飞“

             ohos:text_size=“20fp“

             ohos:top_margin=“40px“

             ohos:left_margin=“80px“/>



     </DirectionalLayout>

     <DirectionalLayout

         ohos:width=“match_parent“

         ohos:weight=“4“

         ohos:orientation=“horizontal“>

         <DirectionalLayout

             ohos:height=“match_parent“

             ohos:weight=“1“>

             <Image

                 ohos:width=“357px“

                 ohos:height=“360px“

                 ohos:top_margin=“60px“

                 ohos:left_margin=“100px“

                 ohos:image_src=“$media:index4“/>

         </DirectionalLayout>

         <DirectionalLayout

             ohos:height=“match_parent“

             ohos:weight=“2“>

             <Text

                 ohos:width=“match_content“

                 ohos:height=“match_content“

                 ohos:multiple_lines=“true“

                 ohos:text=“ 你好，欢迎来到鸿蒙时代！

                                      蛟龙腾飞，鸿蒙先行者，全心全意为你提供鸿蒙各项服务!“

                 ohos:text_size=“20fp“

                 ohos:top_margin=“60px“

                 ohos:left_margin=“10px“/>

         </DirectionalLayout>



     </DirectionalLayout>



</DirectionalLayout> 然后绑定布局进行跳转 Button button = （Button） findComponentById（ResourceTable.
Id_jltfbutton）;



button.setClickedListener（new Component.ClickedListener（） {

     @Override

     public void onClick（Component component） {



         present（new jltftabletSlice（）,new Intent（））;

     }





}）;
T
ablet
模拟器上的代码案例 新建项目选择模板进行下一步。

图片42.png （41.46 KB, 下载次数: 0）

下载附件  保存到相册  

11 分钟前 上传 显示效果：

图片43.png （65.29 KB, 下载次数: 0）

下载附件  保存到相册  

11 分钟前 上传 点击“点击了解更多”进入下一个页面

图片44.png （48.63 KB, 下载次数: 0）

下载附件  保存到相册  

11 分钟前 上传 代码如下 第一个页面的布局 <?xml version=“1.0“ encoding=“utf-8“?>

<DirectionalLayout

     xmlns:ohos=“http://schemas.huawei.com/res/ohos“

     ohos:height=“match_parent“

     ohos:width=“match_parent“

     ohos:orientation=“vertical“>



     <DirectionalLayout

         ohos:width=“match_parent“

         ohos:weight=“1“>

         <Text

             ohos:width=“match_content“

             ohos:height=“match_content“

             ohos:text=“ 蛟龙腾飞“

             ohos:text_size=“40fp“

             ohos:top_margin=“180px“

             ohos:left_margin=“80px“/>



     </DirectionalLayout>

     <DirectionalLayout

         ohos:width=“match_parent“

         ohos:weight=“4“

         ohos:orientation=“horizontal“>

         <DirectionalLayout

             ohos:height=“match_parent“

             ohos:weight=“1“>

             <Image

                 ohos:width=“600px“

                 ohos:height=“600px“

                 ohos:top_margin=“160px“

                 ohos:left_margin=“100px“

                 ohos:image_src=“$media:index6“/>

         </DirectionalLayout>

         <DirectionalLayout

             ohos:height=“match_parent“

             ohos:weight=“2“>

             <Text

                 ohos:width=“match_content“

                 ohos:height=“match_content“

                 ohos:multiple_lines=“true“

                 ohos:text=“ 带你从传统的互联网、移动互联网时代

                                跳转到万物互联的智能世界!

                                            马上创建体验个人、公司或组织的鸿蒙应用吧！“

                 ohos:text_size=“35fp“

                 ohos:top_margin=“240px“

                 ohos:left_margin=“60px“/>

             <Button

                 ohos:id=“$+id:jltfbutton“

                 ohos:width=“match_content“

                 ohos:height=“match_content“

                 ohos:text=“ 点击了解更多“

                 ohos:text_size=“40fp“

                 ohos:top_margin=“380px“

                 ohos:left_margin=“1000px“

                 ohos:text_color=“red“/>

         </DirectionalLayout>



     </DirectionalLayout>



</DirectionalLayout> 第二个页面的布局 <?xml version=“1.0“ encoding=“utf-8“?>

<DirectionalLayout

     xmlns:ohos=“http://schemas.huawei.com/res/ohos“

     ohos:height=“match_parent“

     ohos:width=“match_parent“

     ohos:orientation=“vertical“>



     <DirectionalLayout

         ohos:width=“match_parent“

        ohos:weight=“1“

         >

         <Text

             ohos:width=“match_content“

             ohos:height=“match_content“

             ohos:text=“ 蛟龙腾飞“

             ohos:text_size=“40fp“

             ohos:top_margin=“180px“

             ohos:left_margin=“80px“/>



     </DirectionalLayout>

     <DirectionalLayout

         ohos:width=“match_parent“

         ohos:weight=“4“

         ohos:orientation=“horizontal“>

         <DirectionalLayout

             ohos:height=“match_parent“

             ohos:weight=“1“>

             <Image

                 ohos:width=“600px“

                 ohos:height=“600px“

                 ohos:top_margin=“60px“

                 ohos:left_margin=“100px“

                 ohos:image_src=“$media:index7“/>

         </DirectionalLayout>

         <DirectionalLayout

             ohos:height=“match_parent“

             ohos:weight=“2“>

             <Text

                 ohos:width=“match_content“

                 ohos:height=“match_content“

                 ohos:multiple_lines=“true“

                 ohos:text=“ 你好，欢迎来到鸿蒙时代！

                                      蛟龙腾飞，鸿蒙先行者，全心全意为你提供鸿蒙各项服务!“

                 ohos:text_size=“35fp“

                 ohos:top_margin=“240px“

                 ohos:left_margin=“10px“/>

         </DirectionalLayout>



     </DirectionalLayout>



</DirectionalLayout> 然后再第一个页面中添加点击事件进行跳转 Button button = （Button） findComponentById（ResourceTable.
Id_jltfbutton）;



button.setClickedListener（new Component.ClickedListener（） {

     @Override

     public void onClick（Component component） {



         present（new jltftabletSlice（）,new Intent（））;

     }





}）;
L
ite
wearable模拟器上的代码案例 新建项目选择模板进行下一步。

图片45.png （40.01 KB, 下载次数: 0）

下载附件  保存到相册  

11 分钟前 上传 显示效果：

图片46.png （78.42 KB, 下载次数: 0）

下载附件  保存到相册  

10 分钟前 上传 点击“点击了解更多”进入下一个页面

图片47.png （68.52 KB, 下载次数: 0）

下载附件  保存到相册  

10 分钟前 上传 代码如下： Index.hml <div class=“container“>

     <text class=“jltftxt“>

        蛟龙腾飞

     </text>

     <image src=“/common/index22.jpg“ class=“jltfimg“/>

     <text class=“jltftxt1“>

          带你从传统的互联网、移动互

     </text>

     <text class=“jltftxt2“>

          联网时代. 跳转到万物互联的智

     </text>

     <text class=“jltftxt3“>

           能世界! 。马上创建体验个人、

     </text>

     <text class=“jltftxt4“>

          公司或组织的鸿蒙应用吧！

     </text>

     <input class=“jltfbtn“type=“button“ value=“ 点击了解更多“/>

</div> Index.css .
container {

     flex-direction: column;

     width: 454px;

     height: 454px;

     justify-content: center;

     align-items: center;

}

.jltftxt {

      margin-left: -180px;

      margin-bottom: 10px;

}

.jltftxt1 {

     width: 400px;

     font-size: 30px;



}

.jltfimg {

     width: 138px;

     height:103px;

     margin-left: 5px;

}

.jltfbtn {

     width: 200px;

     margin-bottom: -70px;

} Index.js
import router
from \“@system.router\“




export default {

     data: {



     },

     jltfclick（） {

         router.replace（{

             uri:\“pages/jltfindex/jltfindex\“

         }）;

     }

} Jltfindex.hml <div class=“container“>

     <text class=“jltftxt“>

          蛟龙腾飞

     </text>

     <image src=“/common/index16.jpg“ class=“jltfimg“/>

     <text class=“jltftxt1“>

          你好，欢迎来到鸿蒙时代！

     </text>

     <text class=“jltftxt2“>

          蛟龙腾飞，鸿蒙先行者，全心全

     </text>

     <text class=“jltftxt3“>

          意为你提供鸿蒙各项服务！       </div> Jltfindex.css .
container {

     flex-direction: column;

     width: 454px;

     height: 454px;

     justify-content: center;

     align-items: center;

}

.jltftxt {

     margin-left: -180px;

     margin-bottom: 10px;

}

.jltftxt1 {

     width: 400px;

     font-size: 30px;



}

.jltfimg {

     width: 413px;

     height:103px;

     margin-left: 8px;

}

.jltfbtn {

     width: 200px;

     margin-bottom: -70px;

} Jltfindex.js
export default {

     data: {

     }

} 在第一个页面中添加跳转的代码 在第一个页面js文件中加入如下代码即可 jltfclick（） {

     router.replace（{

         uri:\“pages/jltfindex/jltfindex\“

     }）;

} 2. 练习题二 还是基于“练习一”题目中的图片和文字内容，7种设备中用其他不同的模板样式尝试实现一下和“练习一”模板样式不一样的效果，尽可能每种设备实现一种不同的布局和效果呈现，作业要求，样式截图与全部代码。 3. 点击和尝试DevEco Studio 里的每个菜单栏,概览这个DevEco Studio 的各项功能结构。结合前面的练习，写一个100字以上的Deveco Studio 体验心得。 具体编辑器使用的细节可以参考如下链接和内容。
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/tools_overview-0000001053582387

图片48.png （17.06 KB, 下载次数: 0）

下载附件  保存到相册  

10 分钟前 上传 HarmonyOS北向应用开发者极速入门教程（一）.pdf
（2.12 MB, 下载次数: 0） 8 分钟前 上传 点击文件名下载附件

下载积分: 积分 -1 分



本教程为深圳市蛟龙腾飞网络科技有限公司版权所有，引用者请注明来源：蛟龙腾飞。