【ARK UI】HarmonyOS ETS 資源管理基本使用

​程式碼實現

  • api講解

getStringArray

getStringArray(resId: number, callback: AsyncCallback<Array>): void

用戶獲取指定資源ID對應的字元串數組，使用callback形式返回字元串數組。

系統能力：SystemCapability.Global.ResourceManager
參數：
參數名 類型 必填 說明
resId number 是 資源ID值
callback AsyncCallback<Array> 是 非同步回調，用於返回獲取的字元串數組
示例：
  //todo 獲取ResourceManager對象
    resourceManager.getResourceManager((error, mgr) => {
      if(error!=null){
        //todo 獲取ResourceManager失敗
        console.log("ResourceManager error is " + error);
      }else{
        //todo 獲取ResourceManager成功 調用getStringArray獲取數組集合
        mgr.getStringArray($r('app.strarray.test').id, (error, value) => {
          //todo 獲取StringArray 失敗
          if (error != null) {
            console.log("error is " + error);
          } else {
            //todo 獲取StringArray 成功 並且把value轉化為string
            this.  result = value.toString();
          }
        });
      }
    });
getMediaBase64

getMediaBase64(resId: number, callback: AsyncCallback): void

用戶獲取指定資源ID對應的圖片資源Base64編碼，使用callback形式返回字元串。

系統能力：SystemCapability.Global.ResourceManager
參數：
參數名 類型 必填 說明
resId number 是 資源ID值
callback AsyncCallback 是 非同步回調，用於返回獲取的圖片資源Base64編碼
示例：
  //todo 獲取ResourceManager對象
    resourceManager.getResourceManager((error, mgr) => {
      if(error!=null){
        //todo 獲取ResourceManager失敗
        console.log("ResourceManager error is " + error);
      }else{
        //todo 獲取ResourceManager成功 調用getMediaBase64獲取base64字元串
        mgr.getMediaBase64($r('app.media.result').id, (error, value) => {
          //todo 獲取base64字元串失敗
          if (error != null) {
            console.log("error is " + error);
          } else {
            //todo 獲取base64字元串成功
            this.Base64Str=value
          }
        });
      }
    });
  • 準備工作

1.在resources\base\element新建一個strarry文件命名為strarr.json，文件內容如下

{
  "strarray": [
    {
      "name": "test",
      "value": [
        {
          "value": "this is value One"
        },
        {
          "value": "this is value Two"
        },
        {
          "value": "this is value Three"
        }
      ]
    }
  ]
}

2.準備一張圖片（如下圖所示）並且放在resources\base\media文件目錄下，取名為result.png

cke_5768.png​

  • 繪畫組件並實現功能

繪畫三個「text」組件，顯示內容分別為「讀取數組集合」、「結果：」、「載入圖片」和一個「Image」組件用於顯示「載入圖片」顯示的base64字元型，分別實現「讀取數組集合」、和「載入圖片」的點擊功能，具體詳細的內容描述看程式碼注釋

import resourceManager from '@ohos.resourceManager';
@Entry
@Component
struct Index {
  @State Base64Str:string=""
  @State result:string=""
  //todo 載入圖片獲取base64點擊事件函數
  public getMediaBase64(){
    //todo 獲取ResourceManager對象
    resourceManager.getResourceManager((error, mgr) => {
      if(error!=null){
        //todo 獲取ResourceManager失敗
        console.log("ResourceManager error is " + error);
      }else{
        //todo 獲取ResourceManager成功 調用getMediaBase64獲取base64字元串
        mgr.getMediaBase64($r('app.media.result').id, (error, value) => {
          //todo 獲取base64字元串失敗
          if (error != null) {
            console.log("error is " + error);
          } else {
            //todo 獲取base64字元串成功
            this.Base64Str=value
          }
        });
      }
    });
  }
//todo 實現讀取數組集點擊事件函數
  public getStringArray(){
    //todo 獲取ResourceManager對象
    resourceManager.getResourceManager((error, mgr) => {
      if(error!=null){
        //todo 獲取ResourceManager失敗
        console.log("ResourceManager error is " + error);
      }else{
        //todo 獲取ResourceManager成功 調用getStringArray獲取數組集合
        mgr.getStringArray($r('app.strarray.test').id, (error, value) => {
          //todo 獲取StringArray 失敗
          if (error != null) {
            console.log("error is " + error);
          } else {
            //todo 獲取StringArray 成功 並且把value轉化為string
            this.  result = value.toString();
          }
        });
      }
    });
  }
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text('讀取數組集合')
        .fontSize(20)
      .width("100%")
      .textAlign(TextAlign.Center)
      .backgroundColor("#ed6262")
      //todo 實現讀取數組集合點擊事件
      .onClick(this.getStringArray.bind(this))
      //todo 顯示結果
      Text('結果：'+this.result)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
      .margin({top:10})
      Text('載入圖片')
        .fontSize(20)
        .margin({top:10})
      .width("100%")
        .backgroundColor("#ed6262")
        .textAlign(TextAlign.Center)
      //todo 實現載入圖片點擊事件
      .onClick(this.getMediaBase64.bind(this))
      //todo 顯示圖片結果
      Image(this.Base64Str)
        .width(100).height(100)
        .backgroundColor("#ed6262")
        .margin({top:10})
    }
    .width('100%')
    .height('100%')
  }
}

預覽效果如下

cke_12595.png​

 

運行效果

cke_18078.png​

​

欲了解更多更全技術文章，歡迎訪問//developer.huawei.com/consumer/cn/forum/?ha_source=zzh

Tags:

VirMach 便宜 VPS