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

陈浩南xxx

发布于 2021-12-20 14:46

浏览

1收藏

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

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

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

文件组织

目录结构

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

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

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

应用代码文件访问规则

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

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

类型	默认值	说明
type	-	配置该JS Component的运行类型，可选值为：pageAbility：以ability的方式运行该JS Component。form：以卡片的方式运行该JS Component。
syntax	-	配置该JS Component的语法风格，可选值为：hml：以hml/css/js风格进行编写。ets：以声明式语法风格进行编写。

说明：

不支持同时配置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": [{
            ... 
        }]
    }
}
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.

点击事件

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

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

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

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

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

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

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

myClickHandler(): void {
    // do something
}

...

Button('add counter')
  .onClick(this.myClickHandler)
1.
2.
3.
4.
5.
6.
7.
8.

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

详细文档 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.
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.

页面跳转

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

Navigator({ target: 'pages/page2' }) {
    //子组件
  Flex() {
    Text('页面一')
      .fontSize(50)
      .fontWeight(FontWeight.Bold)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.

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

import router from '@system.router'

  onClick(() => {
      router.push({ uri: 'pages/page2' })
    })
1.
2.
3.
4.
5.

页面间数据传递

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

// FoodList.ets
@Component
struct FoodListItem {
  private foodItem: FoodData
  build() {
    Navigator({ target: 'pages/FoodDetail' }) {
      ......
    }
    .params({ foodData: this.foodItem })
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

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

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

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

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

  build() {
    ......
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.

网络请求 get post

1、声明网络请求权限

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

"reqPermissions": [
   {
      "name": "ohos.permission.INTERNET"
   }
]
1.
2.
3.
4.
5.

2、支持http明文请求

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

"default": {
  "network": {
    "cleartextTraffic": true
  }
}
1.
2.
3.
4.
5.

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')
        }
      })
  }
}
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.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.