当前位置：首页 > 数据库

DevEco Studio 3.0 ETS新语法解读

想了解更多内容，语法请访问：

和华为官方合作共建的解读鸿蒙技术社区

https://harmonyos.51cto.com

DevEco Studio 3.0

最新版本的 DevEco Studio 3.0发布了在鸿蒙里面有一个新的名词叫ets, 什么是ets呢可以理解为一门新的语言它随之也完善了ts一些功能支持。

开门见山，语法先贴经验 :

box({ 样式属性||接受变量||不写 }){ box容器内子元素 }.box需要写的解读样式属性

先说一下ets的模板创建

第一步

下载 3.0的IDE

下载地址:https://developer.harmonyos.com/cn/develop/deveco-studio#download

安装时会自动下载对应的 SDK

如果没有的可以在setting里搜索SDK

(我也看过这个ets的 sdk包,其实就是自己封装的一系列ts

例如我的ets api 存放路径就是 D:\backup\n021823\AppData\Local\OpenHarmony\Sdk\ets\3.0.0.0\component,

如何查找路径如上图，有兴趣的语法朋友可以看看如下图)：

第二步

文件新建新的模板 NEW Project。

拉到下面选择最后一个 [standard]Empty Ability 完成创建。亿华云计算解读

下面大家看看结构和页面。语法

page下面的解读每个 .ets文件都是一个单独的页面,它们的语法和java的命令式很相像。

着重看 build函数 page下每个ets都是语法一个页面 ,每个页面都有一个build函数。

import router from @system.router; async function routePage() { let options = { uri: pages/second } try { await router.push(options) } catch (err) { console.error(`fail callback,解读 code: ${ err.code}, msg: ${ err.msg}`) } } @Entry @Component struct Index { =========手动分割线============ build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { //这里首先是一个大的容器 flex 里面的属性代表它的布局方式 Text(Hello World) //接下来的text (Hello World) 或者同级的Button() 都是容器里面的子节点内容 .fontSize(50) //此处为text的字体样式 .fontWeight(FontWeight.Bold) Button() { //button 节点 Text(next page) // button里又包含了一个 text 文本节点 .fontSize(25) .fontWeight(FontWeight.Bold) }.type(ButtonType.Capsule) .margin({ // button的css样式 top: 20 }) .backgroundColor(#0D9FFB) .onClick(() => { //点击跳转事件 routePage() }) } .width(100%) // flex层级的css修饰样式 .height(100%) } =========手动分割线============ }

他对应的页面是高防服务器这样的。