#星光计划1.0# DevEco Studio 3.0 ETS新语法解读 原创 精华

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%')
  }
=========手动分割线============
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.