华为鸿蒙北向应用开发DAY8——来自软通教育项目实训

EternalDrive

已于 2022-11-09 10:48:15 修改

阅读量933

点赞数 1

文章标签： harmonyos 华为

于 2022-06-13 20:12:44 首次发布

本文链接：https://blog.csdn.net/EternalDrive/article/details/125266640

版权

在软通教育的华为鸿蒙北向应用开发实训中，学员开始实际项目制作，目标是创建基本页面。本周已完成视频学习，并尝试独立完成HML和JS页面，CSS部分则在理解基础上进行个性化调整。项目包括加载页面、主页面、课程页面和个人中心，每个页面都包含HML、JS和CSS结构。

摘要由CSDN通过智能技术生成

正式开始做项目，本周目标是做出基本页面，等下周老师发布接口后完成整个实习

看了所有的视频

全程就是老师边讲边做，hml和js页面会在老师讲完自己试着做，但是css页面的样式是基本照着老师写的，在一些细节上自己修饰了一下，最终倒成品倒是相差不大。

刚进入时的加载页面：

倒计时结束或者点击跳过都会来到主页面

hml:

<div class="container">
<div style="width: 100%; justify-content: flex-end;">
    <text class="jump" onclick="jump">
        跳过{
  {time}}s
    </text>
</div>
    <div class="company">
        <image src="common/images/isoftstoneedu.png">
        </image>
    </div>
</div>

js:

import router from '@system.router';
export default {
    data: {
        time:3
    },
    onInit(){
        var intervalId=setInterval(()=>{
            if(this.time>0)
                    this.time--
            else{
                    clearInterval(intervalId)
                    router.replace({
                        uri: 'pages/MainPage/MainPage'
                    });
            }
        },1000);
    },
    jump(){
        router.replace({
            uri: 'pages/MainPage/MainPage'
        });
    }
}

css:

.container {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-image: url("common/images/welcome.jpg");
}
.jump{
    width: 68px;
    height: 28px;
    margin-right: 15px;
    margin-top: 15px;
    text-align: center;
    font-size: 14px;
    color: white;
    background-color: #ABABAB;
    border-radius: 20px;
}
.company{
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 50px;
    justify-content: center;
    align-items: center;
}
.company image{
    width: 50%;
    height: 100px;
    object-fit: contain;
}

课程页面：

hml:

<div class="container">
    <div class="search">
        <input type="text" maxlength="20" headericon="common/icon/search.png" placeholder="请输入搜索关键字"/>
    </div>
    <div class="rotation">
        <swiper index="0" indicator="true" autoplay="true" loop="true" digital="false"
        cachedsize="-1" scrolleffect="spring">
            <div for="{
  {swiperImages}}">
                <image src="{
  {$item}}"/>
            </div>
        </swiper>
    </div>
    <div class="quick-entry">
        <div onclick="forward({
  {$item.url}})" for="{
  {quickStart}}">
            <image src="{
  {$item.icon}}"></image>
            <text>{
  {$item.name}}</text>
        </div>
    </div>
    <div class="see-more">
        <text>明星班级</text>
        <div>
            <text>查看更多</text>
            <image src="common/icon/ge.png"/>
        </div>
    </div>
    <div class="hot-classes">
        <div for="{
  {classes}}">
            <div class="class-cover" style="background-image: url('{
  {$item.cover}}');">
            </div>
            <div class="class-detail">
                <text>{
  {$item.className}}</text>
                <div>
                    <text>班主任:{
  {$item.teachers[0]}}</text>
                    <text>班级人数:{
  {$item.studentNum}}</text>
                </div>
            </div>
        </div>
    </div>

    <div class="see-more">
        <text>热门课程</text>
        <div>
            <text>查看更多</text>
            <image src="common/icon/ge.png"/>
        </div>
    </div>

    <div class="hot-courses">
        <div for="{
  {courses}}">
            <div class="course-cover" style="background-image: url('{
  {$item.cover}}');">
                <rating numstars="5" rating="{
  {$item.score}}"></ratin