鸿蒙第一次任务
软件安装:HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者
前端基础知识学习(p1~p16):【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili
鸿蒙学习:鸿蒙2.x系统应用开发 前端基础入门教程-12集全完结_哔哩哔哩_bilibili
官方资料:文档中心
本次观看鸿蒙学习p1~p3
- 初步使用
新建一个空的项目
预览器位置
目录介绍
- 简单制作一个往复页面
index部分内容
Hello World
/* 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.jsimport router from '@system.router';export default { launch() { router.push ({ uri:'pages/ditel/ditel', // 指定要跳转的页面 }) }}
ditel部分内容
Hi there
/* 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.jsimport router from '@system.router';export default { launch() { router.push ({ uri:'pages/index/index', // 指定要跳转的页面 }) }}
相关内容材料链接:使用JS语言开发(传统代码方式)-快速入门-入门-HarmonyOS应用开发