#星光计划2.0# TS扩展的声明式开发常用记录（持续增加）

【本文正在参与51CTO HarmonyOS技术社区创作者激励计划-星光计划2.0】

文档地址 zh-cn/application-dev/reference/arkui-ts/Readme-CN.md · OpenHarmony/docs - Gitee.com

把最常用的列举出来；更详细的需要看上面文档；

文件组织

目录结构

各个文件夹和文件的作用：

• app.ets文件用于全局应用逻辑和应用生命周期管理。
• pages目录用于存放所有组件页面。
• common目录用于存放公共代码文件，比如：自定义组件和公共方法。

应用代码文件访问规则

应用代码文件可通过如下方式访问：

• 使用相对路径引用代码文件，比如：上一级目录：…/common/utils/utils.ets，当前目录：./common/utils/utils.ets。
• 使用当前模块根路径引用代码文件，比如：common/utils/utils.ets。
• 公共代码文件推荐放在common目录下。

说明：

• 不支持同时配置type类型为form，syntax类型为ets。

示例

config.json:

{
    "app": {
        "bundleName": "com.example.player",
        "version": {
            "code": 1,
            "name": "1.0"
        },
        "vendor": "example"
    },
    "module": {
        "js": [{
            "name": "default",
            "pages": [
                "pages/index",
                "pages/detail"
            ],
            "window": {
                "designWidth": 720
            },
            "mode": {
                "type": "pageAbility",
                "syntax": "ets"
            },
        }],
        "abilities": [{
            ... 
        }]
    }
}

点击事件

通过事件方法可以配置组件支持的事件。

• 使用lambda表达式配置组件的事件方法：

  // Counter is a private data variable defined in the component.
  Button('add counter')
      .onClick(() => {
          this.counter += 2
      })
  

• 使用匿名函数表达式配置组件的事件方法：

  此时要求我们使用bind，以确保函数体中的this引用包含的组件。

  // Counter is a private data variable defined in the component.
  Button('add counter')
      .onClick(function () {
          this.counter += 2
      }.bind(this))
  

• 使用组件的成员函数配置组件的事件方法：

  myClickHandler(): void {
      // do something
  }
  
  ...
  
  Button('add counter')
    .onClick(this.myClickHandler)
  

自定义组件生命周期回调函数

详细文档 zh-cn/application-dev/reference/arkui-ts/ts-custom-component-lifecycle-callbacks.md · OpenHarmony/docs - Gitee.com

@Entry
@Component
struct Page2 {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text('页面二')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .height('100%')
  }

  aboutToAppear() {
    console.log("etsDemo-->aboutToAppear()");
  }

  aboutToDisappear() {
    console.log("etsDemo-->aboutToDisappear()");
  }

  onPageShow() {
    console.log("etsDemo-->onPageShow()");
  }

  onPageHide() {
    console.log("etsDemo-->onPageHide()");
  }

  onBackPress() {
    console.log("etsDemo-->onBackPress()");
  }
}


12-20 11:27:16.929 30442-4685/com D 03B00/JSApp:  app Log: etsDemo-->aboutToAppear()
12-20 11:27:17.316 30442-4685/com D 03B00/JSApp:  app Log: etsDemo-->onPageShow()
12-20 11:27:19.381 30442-4685/com D 03B00/JSApp:  app Log: etsDemo-->onBackPress()
12-20 11:27:19.381 30442-4685/com D 03B00/JSApp:  app Log: etsDemo-->onPageHide()
12-20 11:27:19.765 30442-4685/com D 03B00/JSApp:  app Log: etsDemo-->aboutToDisappear()

页面跳转

1. 路由容器组件Navigator，包装了页面路由的能力，指定页面target后，使其包裹的子组件都具有路由能力。

Navigator({ target: 'pages/page2' }) {
    //子组件
  Flex() {
    Text('页面一')
      .fontSize(50)
      .fontWeight(FontWeight.Bold)
  }
}

2. 路由RouterAPI接口，通过在页面上引入router，可以调用router的各种接口，从而实现页面路由的各种操作。

import router from '@system.router'

  onClick(() => {
      router.push({ uri: 'pages/page2' })
    })

页面间数据传递

1.Navigator设置其params属性，params属性接受key-value的Object。

// FoodList.ets
@Component
struct FoodListItem {
  private foodItem: FoodData
  build() {
    Navigator({ target: 'pages/FoodDetail' }) {
      ......
    }
    .params({ foodData: this.foodItem })
  }
}

FoodGridItem调用的routerAPI同样有携带参数跳转的能力，使用方法和Navigator类似。

router.push({
  uri: 'pages/FoodDetail',
  params: { foodData: this.foodItem }
})

2.获取foodData对应的value。调用router.getParams().foodData来获取到FoodCategoryList页面跳转来时携带的foodDate对应的数据。

@Entry
@Component
struct FoodDetail {
  private foodItem: FoodData = router.getParams().foodData

  build() {
    ......
  }
}

网络请求 get post

1、声明网络请求权限

在 entry 下的 config.json 中 module 字段下配置权限

"reqPermissions": [
   {
      "name": "ohos.permission.INTERNET"
   }
]

2、支持http明文请求

默认支持https，如果要支持http，在 entry 下的 config.json 中 deviceConfig 字段下配置

"default": {
  "network": {
    "cleartextTraffic": true
  }
}

3 示例

// 导入模块
import http from '@ohos.net.http';

@Entry
@Component
struct HttpDemo {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Button('get请求')
        .onClick(() => {
          this.getRequest()
        })

      Button('post请求')
        .margin({ top: 10 })
        .onClick(() => {
          this.postRequest()
        })
    }
    .width('100%')
    .height('100%')
  }


// 请求方式：GET
  getRequest() {
    // 每一个httpRequest对应一个http请求任务，不可复用
    let httpRequest = http.createHttp()
    let url = 'http://apis.juhe.cn/simpleWeather/query?key=397c9db4cb0621ad0313123dab416668&city=北京'
    httpRequest.request(url, (err, data) => {
      if (!err) {
        if (data.responseCode == 200) {
          console.info('=====data.result=====' + JSON.stringify(data.result))
        } else {
          console.info('=====data.responseCode=====' + data.responseCode)
        }
      } else {
        // 请求失败
        console.info('=====http get request fail')
      }
    })
  }

// 请求方式：POST
  postRequest() {
    // 每一个httpRequest对应一个http请求任务，不可复用
    let httpRequest = http.createHttp()
    let url = 'http://apis.juhe.cn/simpleWeather/query'
    httpRequest.request(url,
      {
        method: http.POST,
        extraData: {
          'key': '397c9db4cb0621ad0313123dab416668',
          'city': '北京'
        }
      },
      (err, data) => {
        if (!err) {
          if (data.responseCode == 200) {
            console.info('=====post data.result=====' + JSON.stringify(data.result))
          }
        } else {
          // 请求失败，弹出提示
          console.info('=====http post request fail')
        }
      })
  }
}

UI组件

UI更多详细：ets容器组件代码示例参考