鸿蒙培训一

学习视频网址：鸿蒙2.x系统应用开发 前端基础入门教程-12集全完结_哔哩哔哩_bilibili技术胖-华为鸿蒙系统应用 OpenHarmony JS 前端开发 基础入门教程-完结鸿蒙2.x系统应用开发 前端基础入门教程-12集全完结_哔哩哔哩_bilibili

p2视频：HelloWorld体验

1、创建工程项目

2、“你好 世界”文字是从entry->src->main->i18n->zh-CN得到的，想要修改文字内容时，可以在这里修改

 3、如何预览？

 

p3视频：应用开发目录结构及文件使用规则介绍

1、应用开发目录介绍

应用级别：

   

页面：（index是首页的意思）

 

 2、JS模块的应用开发目录结构：

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

(1).hml 结尾的 HML 模板文件，这个文件用来描述当前页面的文件布局结构。

(2).css 结尾的 CSS 样式文件，这个文件用于描述页面样式。

(3).js 结尾的 JS 文件，这个文件用于处理页面和用户的交互。

各个文件夹的作用：

(1)app.js 文件用于全局 JavaScript 逻辑和应用生命周期管理。

(2)pages 目录用于存放所有组件页面。

(3)common 目录用于存放公共资源文件，比如：媒体资源和 JS 文件。

(4)i18n 目录用于配置不同语言场景资源内容，比如：应用文本词条，图片路径等资源，注意 i18n 是开发保留文件夹，不可重命名。

3、文件使用规则：

应用资源可通过绝对路径或相对路径的方式进行访问，本开发框架中绝对路径以 "/" 开头，相对路径以 "./" 或 "../" ，具体访问规则如下：

        引用代码文件，需使用相对路径，比如：../common/utils.js。

        引用资源文件，推荐使用绝对路径。比如：/common/xxx.png。

        公共代码文件和资源文件推荐放在 common 下，通过以上两条规则进行访问。

        CSS 样式文件中通过 url() 函数创建 数据类型，如：url(/common/xxx.png)。

        如果代码文件A和文件B位于同一目录，则代码文件B引用资源文件时可使用相对路径，也可使用绝对路径。

        如果代码文件A和文件B位于不同目录，则代码文件B引用资源文件时必须使用绝对路径。因为Webpack打包时，代码文件B的目录会发生变化。

 

1、如何创建一个新的页面?

点pages创建一个新的JS页面，因为我们是在JS模块开发的。

学习地址：华为鸿蒙JS快速入门：文档中心

 实现页面跳转：.js是实现页面跳转功能的

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

打开“index.css”文件，设置按钮的样式，示例代码如下：