鸿蒙开发第二节

最新推荐文章于 2025-04-15 00:00:00 发布

原创最新推荐文章于 2025-04-15 00:00:00 发布 · 1.2k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为

一.DevEco Studio简单配置

1.打开DevEco Studio时不要重新打开之前的项目

File->Settings...

打开设置界面，System Settings ->Reopen projects on startup 取消选中->点击Apply ->点击OK

退出DevEco Studio，重新打开DevEco Studio，不会直接打开之前的项目

点击之前的项目，打开

2.设置主题、字体等

2.1设置主题

另一种进入设置界面的方式，点击右上角齿轮，点击Settings...

Appearance->Theme :可下拉选择多种主题默认Darcula

2.2设置字体

Editor->Font

Size:16

Apply ->OK

字体变大

2.3取消双击Shift键搜索选中的内容

Advanced Settings 滑动滚动条滑动至User Interface 选中Disable double modifier key shortcuts->点击Apply->点击OK

2.4代码片段设置

复制需要重复大量编写的文字，点击右上角设置按钮

点击Settings...进入设置界面，点击Editor->点击Live Templates

点击+号->点击Live Template

在Template text:中输入模板文字->在Description:中输入描述内容->在Abbreviation:中输入快捷键

点击Define选择需要定义的文件，这里勾选Everywhere为全选。

选中Reformat according to style 格式化模板->点击Apply->点击OK

在需要输入诗词的地方输入p，自动出现pm1(上一步骤设置的快捷键)，点击pm1

诗词自动输入

二.ArkTS基本组成

1.页面跳转(声明式开发范式)

1.1新建第一个页面

pages->New->Page

进入New Page界面，修改Page name:First->点击Finish

First.ets页面内容如下所示：

@Entry
@Component
struct First {


  build() {
    Column(){
      Text('HarmonyOS4.0')
        .fontSize(30)
      Button('click...')
        .width('40%')
        .height(50)
        .onClick(()=>{
          //去第二个页面
        })

    }
    .width('100%')
    .height('100%')
  }
}

First.ets预览效果如下所示：

1.2新建第二个页面

以新建第一个页面的方式创建第二个页面

Second.ets页面内容如下所示：

import router from '@ohos.router'
@Entry
@Component
struct Second {
  build() {
    Column(){
      Text('ArkTS...')
        .fontSize(50)
    }
    .width('100%')
    .height('100%')
    .onClick(()=>{
      router.back()//点击一整个页面 返回上一页面
    })
  }
}

1.3修改第一个页面

第一个页面First.ets的内容

import router from '@ohos.router'
@Entry
@Component
struct First {
  build() {
    Column(){
      Text('HarmonyOS4.0')
        .fontSize(30)
      Button('click...')
        .width('40%')
        .height(50)
        .onClick(()=>{
          //点击去第二个页面
          router.pushUrl({
            url:"pages/Second"
          })
        })

    }
    .width('100%')
    .height('100%')
  }
}

重点：

router.pushUrl({
            url:"pages/Second"
          })

需要从第一页跳转至第二页，必须要知晓第二页的路由

路由文件resources下面的base目录下的profile目录下的main_pages.json

main_pages.json内容如下：

{
  "src": [
    "pages/Index",
    "pages/First",
    "pages/Second"
  ]
}

"pages/Second"为第二页的页面路由，直接复制粘贴至代码处即可

2.页面跳转(类web开发范式)

2.1新建第一个页面

创建一个新项目Create Project->Next进入Configure Your Project界面

在Configure Your Project界面，修改Project name:->修改Model:->修改Language:->点击Finish

等待项目启动成功，先来看一下类web开发范式的结构

一个页面分为3个文件

index.css css文件写样式

index.hml 释义：hml为harmony mark language 鸿蒙标记语言的缩写

index.hml文件写页面内容，页面包含的组件

index.js js文件写数据写交互

index.hml也可预览

路由config.json文件，index页面的路由

2.2新建第二个页面

pages->New->Page

修改Page name:->Finish

two.hml内容如下：

<div class="container">
    <text class="title">
        JS
    </text>
</div>

修改一下文本内容JS的字体大小，样式在two.css文件中，修改.title中的font-size:60px

two.css

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.title {
    font-size: 60px;
    text-align: center;
    width: 100%;
    height: 40%;
    margin: 10px;
}

字体会变大

2.3修改第一个页面

打开index.hml,内容如下：写跳转按钮

<div class="container">
    <text class="title">
        Harmony
    </text>
    <button class="btn">goTwo...</button>
</div>

在index.css中设置button的样式

.btn {
   font-size: 50px;
    width: 50%;
    background-color: aqua;
}

在index.js中写交互，写跳转函数goTwo

    //跳转函数
    goTwo() {
        //官方推荐写法 但是无法跳转
        // router.pushUrl({
        //     url:"pages/two/two"
        // })
        //使用下面过时的方式实现跳转
        router.push({
            url:"pages/two/two"
        })
    }

注意：url的内容去config.json文件中去复制

在index.hml中写入button点击需要使用的函数

<div class="container">
    <text class="title">
        Harmony
    </text>
    <button class="btn" on:click="goTwo">goTwo...</button>
</div>

点击刷新按钮，点击第一个页面的button按钮是否能够跳转至第二页，答案是可以的。

2.4修改第二个页面

第二个页面实现点击页面返回至第一页面

打开two.js文件写返回函数

import router from '@ohos.router';
export default {
    data: {
        title: ""
    },
    onInit() {
        this.title = "Hello World";
    },
    //返回函数
    back(){
        router.back()
    }
}

打开two.hml文件，为整个页面添加点击需要执行的函数

<div class="container"on:click="back">
    <text class="title">
        JS
    </text>
</div>

点击刷新按钮，点击第一个页面的button按钮够跳转至第二页，第二页点击页面返回至第一个页面。

3.页面跳转（低代码开发:针对零基础，未学过任何的一门计算机语言）

3.1新建第一个页面

创建一个新项目Create Project->Next进入Configure Your Project界面

修改Project name->选中Enable Super Visual(打开超级视角)->点击Finish

项目自动打开index.visual文件

打开Index.ets文件修改文字内容

@Entry
@Component
struct Index {

  @State message: string = '第一页'

  /**
   * In low-code mode, do not add anything to the build function, as it will be
   * overwritten by the content generated by the .visual file in the build phase.
   */
  build() {

  }
}

拖拽Button组件至页面

选中Button并修改Label属性

属性面板可以根据需求进行设置

3.2新建第二个页面

pages->New->Visual->Page

进入Configure Visual Page界面，修改Visual name->点击Finish

打开Two.ets更改文字内容

3.3修改第一个页面

打开Index.ets添加Button的点击事件

url为main_pages.json第二页的路由

Index.ets内容如下：

import router from '@ohos.router'
@Entry
@Component
struct Index {
 
  @State message: string = '第一页'
 
  /**
   * In low-code mode, do not add anything to the build function, as it will be
   * overwritten by the content generated by the .visual file in the build phase.
   */
  build() {
 
  }
  skipTwo(){
    router.pushUrl({
      url:"pages/Two"
    })
  }
}

打开Index.visual->点击事件面板->OnClick选中this.skipTwo

打开Index.ets文件，点击预览，点击页面的点击跳转按钮看是否能够跳转至第二页，答案是肯定的。

3.4修改第二个页面

打开Two.ets文件，为整个页面添加返回的事件

import router from '@ohos.router'
@Entry
@Component
struct Two {
  @State message: string = '第二页'

  /**
   * In low-code mode, do not add anything to the build function, as it will be
   * overwritten by the content generated by the .visual file in the build phase.
   */
  build() {

  }
  //返回上一页面
  back(){
    router.back()
  }
}

打开Two.visual文件，选中整个页面，添加OnClick事件