DevEcoStudio3.0ETS新语法解读

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

站在用户的角度思考问题，与客户深入沟通，找到西充网站设计与西充网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站设计、网站建设、企业官网、英文网站、手机端网站、网站推广、空间域名、网站空间、企业邮箱。业务覆盖西充地区。

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

https://harmonyos.

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

他对应的页面是这样的。

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

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

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

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

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

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

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

https://harmonyos.

名称栏目：DevEcoStudio3.0ETS新语法解读
网页地址：http://www.36103.cn/qtweb/news39/32039.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容