> 文档中心 > 鸿蒙第一次任务

鸿蒙第一次任务

软件安装: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应用开发

香烟价格网