【HarmoryOS开发】基础知识学习

一、软件安装

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

二、掌握前端基础知识

视频学习教程：https://www.bilibili.com/video/BV1sf4y1k7dr?p=1

 三、HelloWorld入门

打开软件以后，选择创建JS开发页面

 新建成功后，会发现这个Project中有很多的文件，我们就简单的介绍一下文件的作用

 index.html

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

index.css

/* 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;
}

这样一个简单的HelloWorld页面就写好了，那么如何预览页面呢？

点击页面菜单栏中的View->Tool Windows->Previewer就可以实时监测你的页面布局了

四、实现页面之间的跳转

再创建另一个页面

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

创建完成后，可以看到“pages”文件夹下的文件目录结构如下：

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

<!-- details.hml -->
<div class="container">
    <text class="text">
        Hi there
    </text>
    <button class="button" type="capsule" value="Return" onclick="launch"></button>
</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;
}
.button {
    width: 240px;
    height: 60px;
    background-color: #007dff;
    font-size: 30px;
    text-color: white;
    margin-top: 20px;
}

打开第一个页面的“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', // 指定要跳转的页面
        })
    }
}

这样就可以实现页面的双向跳转了