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));
})