鸿蒙开发第二节

一.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事件

打开Index.ets页面，预览效果，点击按钮跳转至第二页，点击第二页返回至第一页。