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

发布于 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:以声明式语法风格进行编写。

 #星光计划2.0#  TS扩展的声明式开发常用记录(持续增加)-开源基础软件社区 说明:

  • 不支持同时配置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)
  }
}
  1. 路由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.jsonmodule 字段下配置权限

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

2、支持http明文请求

默认支持https,如果要支持http,在 entry 下的 config.jsondeviceConfig 字段下配置

"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组件

 #星光计划2.0#  TS扩展的声明式开发常用记录(持续增加)-开源基础软件社区
UI更多详细:ets容器组件代码示例参考

标签
已于2021-12-21 16:01:29修改
5
收藏 1
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐