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%)   } =========手动分割线============ } 

他对应的页面是WordPress模板这样的。

按照如此的语法语法结构 结合代码模块里的注释去看 在 一个函数 写结构 样式 js逻辑 是不是显得非常杂乱,稍微不注意 就写错了节点。

如果我想在容器里面再包一个容器 布局 那就需要套娃 和嵌套回调地狱一样 从前有座山 山里有座庙,解读庙里有个和尚讲故事 讲的故事是 从前有座山~~~~~~~~~~~~

最后总结一下 这个ETS 的语法就是box({ 样式属性||接受变量||不写 }){ box容器内子元素 }.box需要写的样式属性。

按照这种写法 一般大一点的语法页面成百上千的个节点那不敢想象。

我觉得的解读把这种写法对开发者很不友善，期待迭代改进。语法

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

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

https://harmonyos.51cto.com

云服务器提供商