Harmony在线教育app平台开发开发日志——day3

1.JS UI框架

1.框架结构‘
其主要包含四层框架

HarmonyOS中的JS UI框架采用的是单向数据流的操作

2.HML，CSS，JS复习

这里为大家介绍先介绍一个学习html，css，js的一个网址菜鸟教程

菜鸟教程中都有对html各类命令的操作以及操作的实例，这里就不在一个一个的叙述
下面是我根据视频对前端进行的一个小的修改尝试

<div class="container">
    <text class="title">
        {{ $t('strings.hello') }} {{ title }}
    </text>
    <text>{{msg}}</text>
    <text>{{hobby[0]}}:{{hobby[1]}}</text>
    <text>student age is {{student.age}}</text><text>student name is  {{student.name}}</text><text>student sex is{{student.sex}}</text>
</div>

export default {
    data: {
        title: "",
        msg:"this is my message",
        hobby:["play","reading"],
        student:{
             name:"张三",
             age:18,
             sex:"男"
        }

    },
    onInit() {
        this.title = this.$t('strings.world');
    }
}

2.普通事件绑定

/* xxx.css */
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 454px;
    height: 454px;
}
.title {
    font-size: 30px;
    text-align: center;
    width: 200px;
    height: 100px;
}
.box {
    width: 454px;
    height: 200px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.btn {
    width: 200px;
    border-radius: 0;
    margin-top: 10px;
    margin-left: 10px;
}

/* xxx.js */
export default {
    data: {
        count: 0
    },
    increase() {
        this.count++;
    },
    decrease() {
        this.count--;
    },
    multiply(multiplier) {
        this.count = multiplier * this.count;
    }
}

<!-- xxx.hml -->
<div class="container">
    <text class="title">{{count}}</text>
    <div class="box">
        <input type="button" class="btn" value="increase" onclick="increase" />
        <input type="button" class="btn" value="decrease" @click="decrease" />
    <!-- 传递额外参数 -->
        <input type="button" class="btn" value="double" @click="multiply(2)" />
        <input type="button" class="btn" value="decuple" @click="multiply(10)" />
        <input type="button" class="btn" value="square" @click="multiply(count)" />
    </div>
</div>

其他的几个案例不再一个一个的描述，每个案例都成功完成
其中css与js的内容我在菜鸟教程进行了学习，并完成了视频的观看

3.生命周期（这里只是简单的进行了了解，等后期会单独进行生命周期的学习）

页面生命周期