HarmonyOS（二）入门

本文转载自查看原文 2021-12-18 16:18 130 web开发相关

本文档跟随HarmonyOS直播课程，只记录个人认为的重点，如果有兴趣可以添加相关微信群，或前往官网、开发者论坛了解信息！

一、新建HelloWorld项目

src/main/js/default/pages/index/index.hml 可修改页面内容

src/main/config.json ： bundleName 包名

源代码：

Demo：https://developer.harmonyos.com/cn/documentation/codelabs/

文档：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/harmonyos-overview-0000000000011903

API：https://developer.harmonyos.com/cn/docs/documentation/doc-references/reference-document-outline-0000001115016824

开发者论坛：https://developer.huawei.com/consumer/cn/forum/block/application

二、eTS语言

web开发中：

原生JS命令式UI：组件+样式+数据+页面数据+手动绑定。手动绑定，命令式

VUE响应式UI：组件+样式+数据页面+自动绑定，页面跟随数据改变

React声明式UI：声明组件+声明样式+声明数据页面+自动绑定

HarmonyOS开发中：

Java命令式UI： xml配置页面，java配置数据页面绑定

JS响应式UI： html配置组件，css配置样式，js配置页面数据绑定（自动）

eTS声明式UI：声明组件、样式、数据，自动绑定。在实际代码中，声明式表现为链式调用

——>代码量减少

——>JS与eTS有自动数据页面绑定，强于Java手动绑定

——>js与eTS在UI方面有所不同，接口方面是共用的

就个人而言，我觉得用Java去写UI简直无稽之谈……所以后面如果有机会的话尽量多使用eTS吧，声明式的语法也是蛮香的

Demo：制作动画小风车

1. 添加相关组件：风车图片、文字、滑动框

2. 为组件添加动画事件

注意事项：

新建项目时选择eTS，SDK版本为7，7开始才支持eTS，6以及之前是不支持的。同样云真机的选择也需要用支持SDK7的，只支持到6的不可用

页面开始：src/main/ets/default/pages/index.ets

index.ets文件如下

@Entry
@Component
struct Index {
  // eTS中定义变量并赋值
  @State private angle:number=0
  @State private imageSize:number=1
  @State private speed:number=5
  @State private interval:number=0


  //装饰器，抽取封装成函数：
  //https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-component-based-builder-0000001134858596
  @Builder
  DecribeText(text:string, speed:number){
    Column() {
    Text(text+speed.toFixed(1)).margin({top:30})
      .fontSize(20) // 字体大小
      .fontWeight(FontWeight.Bold) //加粗


  }
  }


  build() {  //组件
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Image($rawfile('windmill.jpeg'))  //Image组件
      .objectFit(ImageFit.Contain)
      .width('150')
      .height('150')
      .margin({top:-50, bottom:150, right:15})
      .rotate({x:0,y:0,z:1,angle:this.angle}) //图形变换
      .scale({x:this.imageSize, y:this.imageSize}) //旋转数值


//      Text('速度：'+ this.speed.toFixed(0)).margin({top:30})  //toFixed() 设置小数点位数
//      .fontSize(20) // 字体大小
//      .fontWeight(FontWeight.Bold) //加粗
      this.DecribeText('速度：',this.speed)  //组件化引用


      Slider({
        value:this.speed,
        min:1,
        max:10,
        step:1, //步进格数
        style:SliderStyle.OutSet //滑动条样式
      }).showTips(true)
      .blockColor(Color.Gray)
      .onChange((value:number)=>{
        this.speed=value
      }) //点击或移动时，触发了onChang事件，将把改变的value赋给speed，speed以累加的形式、15mm的时间间隔赋给angle


//      Text('缩放：'+ this.imageSize.toFixed(1)).margin({top:30})
//        .fontSize(20) // 字体大小
//        .fontWeight(FontWeight.Bold) //加粗
      this.DecribeText('缩放',this.imageSize)
      //实现缩放
      Slider({
        value:this.imageSize,
        min:0.5,
        max:2.5,
        step:0.1, //步进格数
        style:SliderStyle.OutSet //滑动条样式
      }).showTips(true)
        .blockColor(Color.Gray)
        .onChange((value:number)=>{
          this.imageSize=value
        })
    }
    .margin({left:30, right:30})  //全局样式
  }


  speedChang(){
    var that = this
    //定时器，重复调用函数
    this.interval = setInterval(function(){
      that.angle+= that.speed
    }, 15)
  }


  //页面初始化时运行
  onPageShow(){
    this.speedChang()
  }
}

页面跳转的实现

通过Ability实现页面跳转功能：

Ability是一个应用所具备能力的抽象
一个应用具备多个能力，即可能具备多个Ability
应用支持以Ability单元来部署

Page Ability：前端页面

Service Ability：后端功能的实现

Data Ability：不同应用的数据管理，且可跨设备访问

实现页面跳转的基础是需要有多个页面，所以在写案例时，应创建多个页面（同一项目下）或项目（不同项目）。注意：页面跳转需调用系统能力的功能，无法使用预览，需启动项目

页面路由

同项目下跳转

使用路由接口router，调用其函数完成页面跳转（JS-API-系统功能-页面路由）：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/lite-wearable-routes-0000000000629875

引入模块

import router from '@system.router';

基本功能：

router.push：跳转至页面

route.replace：使用其他页面覆盖本页面，无法使用back返回原页

router.back：返回上层页面

router.clear：清除历史页面，使本页面为顶层页面

toPage2withParams(){ //携带参数跳转页面
    router.push({
        uri :'pages/page2/page2',
        params:{
            title:'HuaWei'
        }
    })
}

Page Ability之间的跳转（跨项目、跨设备）

引入模块

import featureAbility from '@ohos.ability.featureAbility';

在页面组件所调用的函数中引入startAbility（链接）内代码，启动Ability。跳转页面的话只需要bundleName和ablityName即可。

var str = {
    "want": {
        "bundleName": "com.example.jsability04_2",  //包名，跳转页面所需参数
        "abilityName": "com.example.jsability04_2.MainAbility", //Ability名 跳转页面所需参数
        "entities": [
            "entity.com.example.mytest.ENTITIES"
        ]
    },
    "abilityStartSetting": {}
};
featureAbility.startAbility(str)
    .then((data) => {
        console.info('Operation successful. Data: ' + JSON.stringify(data))
    }).catch((error) => {
    console.error('Operation failed. Cause: ' + JSON.stringify(error));
})

通过action实现

使用意图常量，调用系统能力（一个项目中可以有多个Action）

引入模块

import wantConstant from '@ohos.ability.wantConstant';

在Ability的action一栏设置为："action": wantConstant.Action.ACTION_MANAGE_APPLICATIONS_SETTINGS，即可跳转至应用管理页面。

var str = {
    "want": {
        "action": wantConstant.Action.ACTION_MANAGE_APPLICATIONS_SETTINGS,  //调用系统能力
        "parameters": {},
    },
    "abilityStartSetting": {}
};
featureAbility.startAbility(str)
    .then((data) => {
        console.info('Operation successful. Data: ' + JSON.stringify(data))
    }).catch((error) => {
    console.error('Operation failed. Cause: ' + JSON.stringify(error));
})