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

Tablet 模拟器上的代码案例

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

显示效果：

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

代码如下

第一个页面的布局

<?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()); 
    } 
 
 
});

Lite wearable模拟器上的代码案例

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

显示效果：

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

代码如下：

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="点击了解更多" onclick="jltfclick"/> 
</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

深圳市蛟龙腾飞网络科技有限公司

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

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

https://harmonyos.51cto.com/#zz

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

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