Harmony OS学习笔记1

Open Harmony技术架构

Open Harmony整体遵从分层设计，从下向上依次为内核层、系统服务层、框架层和应用层。前端领域的发力点核心在于应用层中拓展应用、三方应用的构建服务，需要靠企业和开发者不断去扩展。

应用层介绍

开发环境搭建

工程文件创建

开发目录

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

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

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

文件使用规则

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

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

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

预览操作

首尾页通过button跳转

编写第一个页面
第一个页面内有一个文本和一个按钮，通过text和button组件来实现。
在Project窗口，选择“entry > src > main > js > default > pages > index”，打开“index.hml”文件，添加一个文本和一个按钮，示例代码如下：
首页HTML代码：

<!-- details.hml -->
<!-- 添加一个文本为Hi there~ -->
<div class="container">
    <text class="text">
        Hi there~
    </text>
<!-- 添加一个按钮，按钮样式设置为胶囊型，文本显示为Next，绑定launch事件 -->
    <button class="button" type="capsule" value="BACK" onclick="launch"></button>
</div>

首页CSS代码：

/* index.css */
.container {
    flex-direction: column; /* 设置容器内的项目纵向排列 */
    justify-content: center; /* 设置项目位于容器主轴的中心 */
    align-items: center; /* 项目在交叉轴居中 */
    width:100%;
    height:100%;
}
/* 对class="text"的组件设置样式 */
.text{
    font-size: 50px;
}
/* 对class="button"的组件设置样式 */
.button {
    width: 240px;
    height: 60px;
    background-color: #9966FF; /*按钮颜色设置为紫色*/
    font-size: 35px;/*字体大小调节*/
    text-color: white;/*字体颜色调节*/
    margin-top: 20px;
}

首页JS代码：

// index.js
import router from '@system.router';//导入router模块，页面路由router根据页面的uri来找到目标页面

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

如何创建第二页
在Project窗口，打开“entry > src > main > js > default”，右键点击“pages”文件夹，选择“New > JS Page”，命名为“details”，单击回车键。

次页HTML代码：

<!-- details.hml -->
<!-- 添加一个文本为Hi there~ -->
<div class="container">
    <text class="text">
        Hi there~
    </text>
<!-- 添加一个按钮，按钮样式设置为胶囊型，文本显示为Next，绑定launch事件 -->
    <button class="button" type="capsule" value="BACK" onclick="launch"></button>
</div>

首页CSS代码：

/* details.css */
.container {
    flex-direction: column;/* 设置容器内的项目纵向排列 */
    justify-content: center;/* 设置项目位于容器主轴的中心 */
    align-items: center;/* 项目在交叉轴居中 */
    width:100%;
    height:100%;
}
.text {
    font-size: 50px;
    text-align: center;
}
/* 对class="button"的组件设置样式 */
.button {
    width: 240px;
    height: 60px;
    background-color: #3c9eff;
    font-size: 35px;
    text-color: white;
    margin-top: 20px;
}

首页JS代码：

// index.js
import router from '@system.router';//导入router模块，页面路由router根据页面的uri来找到目标页面

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