鸿蒙开发系统的初步学习

通过视频的学习,简单的了解了鸿蒙这个系统。准确来说,是为了前端开发而建立的一个平台。

HarmonyOS应用程序创建后所看到的应用代码结构,entry -> src -> main -> config.json文件

目前只是简单的学习了页面跳转这一个最为基础也是最为常用的一个功能。

转变为

 第一步找到

点击中间的index.hml ,将原有代码替换为下列代码。

<!-- 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.js

import router from '@system.router';
export default {
    data: {
        title: ""
    },
    launch() {
        router.push({
            uri:'pages/me/me'
        })
    }
}

接着是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;
}

以上我们的第一个页面就设置好了,接着我们来建立第二个页面

 右键点击pges

 选中JS Page

 自己英文输入第二个名字。完成后按finish。最后预览页面的跳转,右侧边栏的Previewer。

 快去尝试吧!      还可以试着自己将页面再次跳转回来。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页
评论

打赏作者

曾鲸

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

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

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

打赏作者

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

抵扣说明:

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

余额充值