[文章]

HarmonyOS北向应用开发者 极速入门教程(一)

2021-1-12 15:49:41  324 Harmonyos 鸿蒙 应用开发
分享
2
说明:一个完整优秀的应用服务需要产品经理、UIUE、前端工程师、后端工程师、测试工程师等团队协作才能完成,本教程适合有JAVA与JS知识基础的开发者使用,按照本教程练习完成,即可以初步进行鸿蒙操作系统基于DevEco Studio应用服务代码开发工作。本教程中如发现有错误请留言勘正,有更好的完善想法者,布置的作业与心得等愿意上交者,请跟贴留言。本教程为本公司团队实践工作中原创,欢迎引用,但是引用中请注明来源:蛟龙腾飞。
目录
一、注册华为账户
二、安装 DevEco Studio
1.系统要求
2.DevEco Studio 下载安装
三、实战练习
1.练习题一 图片文字代码,照搬照抄我们给的七个案例。
2.练习题二 按照提示,自由发挥,大胆尝试。
2.练习题三 全面体验,不要怕弄坏DevEco Studio
一、注册华为账户
我们首先需要一个华为的账号并进行实名认证考注册华为账号链接:https://developer.huawei.com/consumer/cn/doc/20300
如果已经有账户并认证过的,本步骤忽略。
二、安装DevEco Studio
1.系统要求
图片1.png 图片2.png
2.DevEco Studio 下载安装
我们可以进入官方地址下载DevEco Studio
下载地址https://developer.HarmonyOS.com/cn/develop/deveco-studio#download
点击链接进入官网我们可以看到两个版本的操作系统下载,这里可以根据自己的操作系统进行下载,这里我用的是Windows的,这里我就演示Windows的下载过程。
图片3.png
这里我们点击Windows版的进行下载,这里会弹到一个登陆界面,这里就用我们刚刚注册号的华为账号进行登陆即可下载。
图片4.png
下载完成后我们在对应的路径中找到下载的安装包,解压。 图片5.png
打开解压的文件然后进行安装。
图片6.png
安装欢迎界面,点击next进行下一步。
图片7.png
这里可以自主选择安装的路径,路径尽量别使用汉字,然后点击next进行下一步。
图片8.png
我们勾选第一个,可以在桌面上创建一个快捷键,方便打开应用,然后点击next进行下一步。
图片9.png
这里默认就好了,然后点击install进行安装
图片10.png
这里静静等待安装好,点击next进行下一步。
图片11.png
这里就安装好了,我们可以在桌面上看到按照的Studio,这里我们可以双击打开看看 图片12.png
点开我们这里不需要导入什么东西,直接选择ok就好了,然后会弹出一个协议,这里的协议我们把√打上,然后点击Agree进入APP
图片13.png
创建项目
图片14.png
三、实战练习
截图另外做文档答题。文档要求,文件名:某某研究日志日期。文件内容,题目和答题,截图代码和文字等综合展示。
1.练习题一
下是基于DevEco Studio蛟龙腾飞北向应用开发工程师已经实现的布局、功能、代码及路径,请安装要求一模一样的流程和效果,在自己的DevEco Studio实现。这里我们可以自行选择自己想开发的设备和模板,这里我们以Phone为例,开发模板选择空特性java的开发模板,点击next进行下一步
开发的设备有七种:
Phone
Tablet
Car
Tv
Wearable
Lite wearable
smart vision
Phone设备中有很多种不同的模板,主要是java和js进行开发以及不同的模板样式,不同样式之间布局不一样,不同的布局所展示的效果代码已经写入其中,只需要加入想加入的元素即可。
图片15.png
选择好了之后点击next进行下一步。
这里是创建项目的一些项目配置,配置完成点击Finish完成创建。
图片16.png
完成创建后,我们进入了主界面,这里需要等待一小会,因为一些配置东西在进行下载配置
图片7.png
Phone模拟器上的代码案例
图片18.png
显示效果:
图片19.png
图片20.png
图片21.png
图片22.png
双击图中选中的设备就可以运行了
显示如下:
图片23.png
图片24.png
运行效果:
图片25.png
点击“点击了解更多”进入下一个页面
图片26.png
代码如下:
第一个布局中
<?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
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
显示效果:
图片29.png
点击“点击了解更多”进入下一个页面
图片30.png
代码如下:
第一个页面中的布局
<?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());
        }


    });
Smartvision模拟器上的代码案例
新建项目选择模板进行下一步。
图片31.png
这里选择的是js开发的模板就需要下载node.js文件在编辑器中进行配置(node.js)网上有下载教程。
图片32.png
显示效果:
图片33.png
点击“点击了解更多”进入下一个页面
图片34.png
代码如下:
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
新建项目选择模板进行下一步。
图片36.png
显示效果:
图片37.png
点击“点击了解更多”进入下一个页面
图片38.png
代码如下:
第一个页面
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.png
点击“点击了解更多”进入下一个页面
图片41.png
代码如下:
第一个页面的布局
<?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());
    }


});
Tablet模拟器上的代码案例
新建项目选择模板进行下一步。
图片42.png
显示效果:
图片43.png
点击“点击了解更多”进入下一个页面
图片44.png
代码如下
第一个页面的布局
<?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());
    }


});
Litewearable模拟器上的代码案例
新建项目选择模板进行下一步。
图片45.png
显示效果:
图片46.png
点击“点击了解更多”进入下一个页面
图片47.png
代码如下:
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
HarmonyOS北向应用开发者极速入门教程(一).pdf (2.12 MB, 下载次数: 7)
绿波电龙 2021-1-12 16:05:11
李总的文章越来越优秀了!
回复

举报

樊明键 2021-1-13 11:07:19
DevEco Studio这个IDE 怎么就支持一下C做移植开发底层呢?
回复

举报

李洋 7 天前
谢谢鼓励。
回复

举报

李洋 7 天前
移植这块暂时应该是没有进编辑器的。
回复

举报

Signx 4 天前
所以,本质上跟传统的安卓和小程序,H5等开发有什么区别呢?
回复

举报

李洋 前天 11:05
不同的赛道,一个新的趋势。可以理解为网站开发和APP开发的区别。现在是传统的APP开发和鸿蒙开发之间的区别。
回复

举报

评论

您需要登录后才可以回帖 登录 | 注册

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容图片侵权或者其他问题,请联系本站作侵删。 侵权投诉
发文章