软件安装: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', // 指定要跳转的页面
})
}
}