【HarmonyOS】培训第一课笔记

一,软件安装

华为操作系统DevEco Studio和SDK下载与升级 | HarmonyOS开发者华为鸿蒙DevEco Studio是面向全场景的一站式集成开发环境,,在鸿蒙官网下载或升级操作系统开发工具DevEco Studio最新版本,SDK配置和下载,2.1支持Mac、Windows操作系统。https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta

选择适合自己的版本进行安装,不要装错了。

二,前端知识补充

【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili【需源码及文档资料,看UP主页简介或私信UP】感谢各位姥爷们的每一次三连及转发、评论、关注1、HTML:HTML概述、W3C概述、B/S架构系统原理、table、背景色与背景图片、超链接、列表、表单、框架等 2、CSS:层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化 3、JavaScript核心语法、内置支https://www.bilibili.com/video/BV1sf4y1k7dr?p=1主要学习P1-P16

菜鸟教程:

官方文档资料:

 文档中心https://developer.harmonyos.com/cn/docs/documentation/doc-guides/document-outline-0000001064589184

三,入门程序HelloWorld介绍

打开DevEco Studio程序,选择并创建JS开发模板

 创建工程项目

 JS FA 应用的 JS 模块 (entry/src/main/js/module) 的典型开发目录结构如下:

 

目录结构中文件分类如下:

  • .hml 结尾的 HML 模板文件,这个文件用来描述当前页面的文件布局结构。
  • .css 结尾的 CSS 样式文件,这个文件用于描述页面样式。
  • .js 结尾的 JS 文件,这个文件用于处理页面和用户的交互。

各个文件夹的作用:

  • app.js 文件用于全局 JavaScript 逻辑和应用生命周期管理。
  • pages 目录用于存放所有组件页面。
  • common 目录用于存放公共资源文件,比如:媒体资源和 JS 文件。
  • i18n 目录用于配置不同语言场景资源内容,比如:应用文本词条,图片路径等资源,注意 i18n 是开发保留文件夹,不可重命名。

HelloWorld预览

点击页面菜单栏中的View->Tool Windows->Previewer进行预览

四,实现页面跳转

创建另一个页面

在Project窗口,打开“entry > src > main > js > default”,右键点击“pages”文件夹,选择“New > JS Page”,命名为“details”。

打开“details.hml”文件,添加一个文本,示例代码如下:

<!-- details.hml -->
<div class="container">
  <text class="text">
    Hi there
  </text>
</div>

打开“details.css”文件,设置文本的样式,示例代码如下:

/* details.css */
.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100%;
}
.text {
    font-size: 42px;
    text-align: center;
}

打开第一个页面的“index.js”文件,导入router模块,页面路由router根据页面的uri来找到目标页面,从而实现跳转。示例代码如下:

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

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

同理,“details.js”文件,导入router模块,页面路由router根据页面的uri来找到目标页面,从而实现跳转。示例代码如下:

// details.js
import router from '@system.router';
 
export default {
    launch() {
        router.push ({
            uri:'pages/index/index', // 指定要跳转的页面
        })
    }
}

实现页面间的双向跳转

 

 

  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
评论

打赏作者

被拐走的空想

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值