鸿蒙第一次任务

软件安装：HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者

前端基础知识学习（p1~p16）：【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili

鸿蒙学习：鸿蒙2.x系统应用开发 前端基础入门教程-12集全完结_哔哩哔哩_bilibili

官方资料：文档中心

本次观看鸿蒙学习p1~p3 

---

• 初步使用

新建一个空的项目

预览器位置 

目录介绍 

• 简单制作一个往复页面

                                                          

---

               

index部分内容

<!-- index.hml -->
<div class="container">
<!-- 添加一个文本 -->
    <text class="text">
        Hello World
    </text>
<!-- 添加一个按钮，按钮样式设置为胶囊型，文本显示为Next，绑定launch事件 -->
    <button class="button" type="capsule" value="Next" onclick="launch"></button>
</div>

/* index.css */
.container {
    flex-direction: column; /* 设置容器内的项目纵向排列 */
    justify-content: center; /* 设置项目位于容器主轴的中心 */
    align-items: center; /* 项目在交叉轴居中 */
    width:100%;
    height:100%;
}
/* 对class="text"的组件设置样式 */
.text {
    font-size: 42px;
}
/* 对class="button"的组件设置样式 */
.button {
    width: 240px;
    height: 60px;
    background-color: #007dff;
    font-size: 30px;
    text-color: white;
    margin-top: 20px;

// index.js
import router from '@system.router';

export default {
    launch() {
        router.push ({
            uri:'pages/ditel/ditel', // 指定要跳转的页面
        })
    }
}

---

ditel部分内容

<!-- ditel.hml -->
<div class="container">
    <text class="text">
        Hi there
    </text>
    <button class="button" type="capsule" value="Return" onclick="launch"></button>
</div>

/* ditel.css */
.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100%;
}
.text {
    font-size: 42px;
    text-align: center;
}
.button{
    width: 240px;
    height: 60px;
    background-color: #007dff;
    font-size: 30px;
    text-color: white;
    margin-top: 20px;
}

// ditel.js
import router from '@system.router';

export default {
    launch() {
        router.push ({
            uri:'pages/index/index', // 指定要跳转的页面
        })
    }
}

 相关内容材料链接：使用JS语言开发（传统代码方式）-快速入门-入门-HarmonyOS应用开发