鴻蒙學(xué)習(xí)記錄

簡(jiǎn)介

在自學(xué)鴻蒙開(kāi)發(fā)的過(guò)程中，記錄下自己遇到的問(wèn)題以及解決辦法，持續(xù)更新?。?！

環(huán)境信息：

  • 系統(tǒng)：Mac 13.5 (22G74)
  • IDE信息：
    • DevEco Studio 3.1.1 Release
    • Build Version: 3.1.0.501, built on June 20, 2023

一、學(xué)習(xí)文檔

1、HarmonyOS 第一課

2、鴻蒙開(kāi)發(fā)者文檔指南

3、鴻蒙開(kāi)發(fā)者文檔API參考

4、華為開(kāi)發(fā)者論壇

5、鴻蒙開(kāi)發(fā)基礎(chǔ)認(rèn)證和高級(jí)認(rèn)證

6、鴻蒙應(yīng)用發(fā)布


二、遇到的問(wèn)題

1、DevEco Studio自動(dòng)生成.js、.js.map文件問(wèn)題

通過(guò)插件（ArkCompilerSupport）搞定

插件地址點(diǎn)我

參考博客

2、DevEco Studio無(wú)法自動(dòng)監(jiān)測(cè)到本地模擬器？

每次點(diǎn)擊DeviceManager啟動(dòng)模擬器后，DevEco Studio都不會(huì)自動(dòng)檢測(cè)到模擬器問(wèn)題，可以參考以下代碼片段進(jìn)行開(kāi)發(fā)環(huán)境配置。

參考華為開(kāi)發(fā)者社區(qū)論壇博客

# 鴻蒙腳本工具集
export PATH=/Users/XXX/HMOSProject/EnvInfo/sdk/openharmony/9/toolchains:$PATH
export PATH=/Users/XXX/HMOSProject/EnvInfo/ohpm/bin:$PATH
# HDC是為開(kāi)發(fā)者提供HarmonyOS應(yīng)用/服務(wù)的調(diào)試工具，為方便使用HDC工具，請(qǐng)為HDC端口號(hào)設(shè)置環(huán)境變量。
export HDC_SERVER_PORT=7035
launchctl setenv HDC_SERVER_PORT $HDC_SERVER_PORT
export HDC_SERVER_PORT

3、網(wǎng)絡(luò)請(qǐng)求如何實(shí)現(xiàn)？

  • 方法1：第三方組件：axios
  • 方法2：系統(tǒng)API：http，封裝示例如下：
import http from '@ohos.net.http';


import http from '@ohos.net.http';

// 標(biāo)準(zhǔn)網(wǎng)絡(luò)請(qǐng)求返回?cái)?shù)據(jù)結(jié)構(gòu)
export interface  SJRequestConfig extends http.HttpRequestOptions{
  url?:string; // url參數(shù)
}

// 全局配置對(duì)象
export interface SJGlobalConfig {
  // baseUrl
  baseUrl?: string;
  // 是否使用緩存：默認(rèn)為true
  usingCache?: boolean;
  // 全局header，默認(rèn)值為 'content-type': 'application/json'
  header?: Object;
  // 讀取超時(shí)時(shí)間：默認(rèn)60000，即60s
  readTimeout?: number; // default is 60s
  // 連接超時(shí)時(shí)間：默認(rèn)60000，即60s
  connectTimeout?: number; // default is 60s.
  // HTTP協(xié)議版本，默認(rèn)由系統(tǒng)決定
  usingProtocol?: http.HttpProtocol;
}

// 標(biāo)準(zhǔn)網(wǎng)絡(luò)請(qǐng)求返回?cái)?shù)據(jù)結(jié)構(gòu)
export class SJResponse<T> {
  status?: number;
  message?: string;
  data?: T;
}

// 網(wǎng)絡(luò)庫(kù)返回的錯(cuò)誤對(duì)象
export class SJError<R> {
  code:Number; // HTTP錯(cuò)誤碼
  message?:string; // HTTP錯(cuò)誤信息
  businessCode?:Number; // 業(yè)務(wù)code
  businessMessage?:string; // 業(yè)務(wù)message
  data?:R; //原始數(shù)據(jù)
}

export class SJHttp {
  request<T,R= string | Object | ArrayBuffer>(config:SJRequestConfig): Promise<T> {
    // 每一個(gè)httpRequest對(duì)應(yīng)一個(gè)HTTP請(qǐng)求任務(wù)，不可復(fù)用
    let httpRequest = http.createHttp();
    // 請(qǐng)求參數(shù)配置
    let httpResponse = httpRequest.request(config.url,config)

    return new Promise((resolve,reject)=>{
      httpResponse.then((data: http.HttpResponse) => {
        let httpCode = data.responseCode;
        if (httpCode == 200) {
          // data.result為HTTP響應(yīng)內(nèi)容，可根據(jù)業(yè)務(wù)需要進(jìn)行解析
          let resultStr = `${data.result}`
          let response:SJResponse<T> = JSON.parse(resultStr)
          if (response.status == 200) {
            resolve(response.data);
          } else {
            var sjErr:SJError<R> = new SJError();
            sjErr.code = httpCode;
            sjErr.message = "";
            sjErr.businessCode = response.status;
            sjErr.businessMessage = response.message;
            sjErr.data = data.result as R;
            reject(sjErr)
          }
        }
        var sjErr:SJError<R> = new SJError();
        sjErr.code = httpCode;
        sjErr.message = `${data.result}`;
        sjErr.businessCode = null;
        sjErr.businessMessage = null;
        sjErr.data = data.result as R;
        reject(sjErr)
      }).catch((err) => {
        console.info('error:' + JSON.stringify(err));
        // 取消訂閱HTTP響應(yīng)頭事件
        httpRequest.off('headersReceive');
        // 當(dāng)該請(qǐng)求使用完畢時(shí)，調(diào)用destroy方法主動(dòng)銷(xiāo)毀。
        httpRequest.destroy();

        var sjErr:SJError<R> = new SJError();
        sjErr.code = err.code;
        sjErr.message = err.message;
        sjErr.businessCode = null;
        sjErr.businessMessage = null;
        sjErr.data = null;
        reject(sjErr)
      })
    })
  }
}

export class SJRequest {
  // 單例對(duì)象
  static instance: SJRequest = new SJRequest();
  // 全局配置對(duì)象
  public globalConfig:SJGlobalConfig;

  constructor() {
    this.globalConfig = {
      usingCache:true,
      readTimeout:60000,
      connectTimeout:60000,
      usingProtocol:http.HttpProtocol.HTTP1_1,
    }
  }

  get<T>(config:SJRequestConfig): Promise<T> {
    config.method = http.RequestMethod.GET;
    return this.request(config);
  }

  post<T>(config:SJRequestConfig): Promise<T> {
    config.method = http.RequestMethod.POST;
    return this.request(config);
  }

  delete<T>(config:SJRequestConfig): Promise<T> {
    config.method = http.RequestMethod.DELETE;
    return this.request(config);
  }

  put<T>(config:SJRequestConfig): Promise<T> {
    config.method = http.RequestMethod.PUT;
    return this.request(config);
  }

  request<T>(config:SJRequestConfig): Promise<T> {
    this.handleGlobalConfig(config);
    let sjReq = new SJHttp();
    return sjReq.request<T>(config)
  }

  private isEmpty(obj:any):boolean{
    if (obj == undefined || obj == null) {
      return true;
    }
    return false;
  }

  private handleGlobalConfig(config:SJRequestConfig):SJRequestConfig{
    let globalConfig:SJGlobalConfig = this.globalConfig;
    // 1.處理url
    let url = config.url;
    let urlBase = globalConfig.baseUrl;

    let urlLower = url.toLowerCase();
    let isHttpUrl = urlLower.startsWith('http') || urlLower.startsWith('https');
    if (!isHttpUrl) {
      config.url = `${urlBase}${url}`
    }

    // 2、處理其他參數(shù)
    if (this.isEmpty(config.usingCache)) {
      config.usingCache = globalConfig.usingCache;
    }
    if (this.isEmpty(config.header)) {
      config.header = globalConfig.header;
    }
    if (this.isEmpty(config.readTimeout)) {
      config.readTimeout = globalConfig.readTimeout;
    }
    if (this.isEmpty(config.connectTimeout)) {
      config.connectTimeout = globalConfig.connectTimeout;
    }
    if (this.isEmpty(config.usingProtocol)) {
      config.usingProtocol = globalConfig.usingProtocol;
    }
    return config;
  }
}

export class SJRequestManager {
  // 全局配置
  static configGlobal(callback:(config:SJGlobalConfig)=>void){
    callback(SJRequest.instance.globalConfig);
  }

  static get<T>(config:SJRequestConfig): Promise<T> {
    return SJRequest.instance.get(config);
  }

  static post<T>(config:SJRequestConfig): Promise<T> {
    return SJRequest.instance.post(config);
  }

  static delete<T>(config:SJRequestConfig): Promise<T> {
    return SJRequest.instance.delete(config);
  }

  static put<T>(config:SJRequestConfig): Promise<T> {
    return SJRequest.instance.put(config);
  }

  static request<T>(config:SJRequestConfig): Promise<T> {
    return SJRequest.instance.request(config);
  }
}

4、List上拉加載，下拉刷新如何實(shí)現(xiàn)？

參考第三方組件： PullToRefresh

5、頁(yè)面導(dǎo)航欄如何實(shí)現(xiàn)？

通過(guò)系統(tǒng)的Navigation組件即可實(shí)現(xiàn)

@Builder content(){
    Navigation(){
      Column() {
        this.appGridView()
        // LayoutGridDratEditPage()
      }
    }
    .mode(NavigationMode.Auto)
    .titleMode(NavigationTitleMode.Mini)
    .title('編輯應(yīng)用')
    .menus(this.rightBtns())
  }

6、grid拖動(dòng)編輯如何實(shí)現(xiàn)？有什么要注意的？

1）設(shè)置編輯模式屬性為true

//設(shè)置Grid是否進(jìn)入編輯模式，進(jìn)入編輯模式可以拖拽Grid組件內(nèi)部GridItem
.editMode(this.isEditable)

2）剛開(kāi)始拖拽的時(shí)候，設(shè)置拖拽懸浮展示的UI

//第一次拖拽此事件綁定的組件時(shí)，觸發(fā)回調(diào)
.onItemDragStart((event: ItemDragInfo, itemIndex: number) => {
   //設(shè)置拖拽過(guò)程中顯示的圖片
   return this.pixelMapBuilder()
})
//拖拽過(guò)程中展示的樣式
@Builder pixelMapBuilder() {
   Column() {
     Text(this.text).gridItemStyle()
   }
}

3）拖拽到目標(biāo)gridItem時(shí)，根據(jù)條件交換數(shù)組中的元素

//綁定此事件的組件可作為拖拽釋放目標(biāo)，當(dāng)在本組件范圍內(nèi)停止拖拽行為時(shí)，觸發(fā)回調(diào)
//itemIndex為拖拽起始位置，insertIndex為拖拽插入位置
.onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => {
  let isValidInserIndex = insertIndex < this.numbers.length;
  if (isSuccess && insertIndex < this.numbers.length) {
  // if (isSuccess && isValidInserIndex) {
    //不支持拖拽到已有內(nèi)容以外的位置
    this.changeIndex(itemIndex, insertIndex)
  } else {
    Logger.warn('griditem交換失敗');
  }
})

//交換數(shù)組中元素位置
changeIndex(index1: number, index2: number) {
  Logger.warn('交換前：' + this.numbers.toString());
  [this.numbers[index1], this.numbers[index2]] = [this.numbers[index2], this.numbers[index1]];
  Logger.warn('交換后：' + this.numbers.toString());
}

4）完整代碼如下：

@Extend(Grid) function gridStyle() {
  .columnsTemplate('1fr 1fr 1fr')
  .columnsGap(10)
  .rowsGap(10)
  .width('100%')
  .backgroundColor(0xFAEEE0)
  .height('100%')
}

@Extend(Text) function gridItemStyle() {
  .fontSize(16)
  .backgroundColor(0xF9CF93)
  .width(80)
  .height(80)
  .textAlign(TextAlign.Center)
}

@Entry
@Component
struct LayoutGridDratEditPage {
  @State numbers: String[] = ['1','2','3','4','5','6','7','8','9','10']
  scroller: Scroller = new Scroller()
  @State text: string = 'drag'
  // 是否是編輯模式
  @State isEditable: boolean = true

  //拖拽過(guò)程中展示的樣式
  @Builder pixelMapBuilder() {
    Column() {
      Text(this.text).gridItemStyle()
    }
  }

  aboutToAppear() {
    // for (let i = 1;i <= 15; i++) {
    //   this.numbers.push(i.toString())
    // }
    Logger.warn('初始化后：' + this.numbers.toString());
  }

  //交換數(shù)組中元素位置
  changeIndex(index1: number, index2: number) {
    Logger.warn('交換前：' + this.numbers.toString());
    [this.numbers[index1], this.numbers[index2]] = [this.numbers[index2], this.numbers[index1]];
    Logger.warn('交換后：' + this.numbers.toString());
  }

  build() {
      Column() {
        this.dragDemo()
        // this.animalTest()
      }
  }

  @Builder dragDemo() {
    Column({ space: 5 }) {
      Text(this.isEditable?'編輯模式':'非編輯模式').fontSize(28).fontWeight(FontWeight.Bold)
        .onClick(()=>{
          this.isEditable = !this.isEditable;
        })
      Grid(this.scroller) {
        ForEach(this.numbers, (day: string,index:number) => {
          GridItem() {
            Stack(){
              Text(day).gridItemStyle()
                // .rotate({ angle: this.rotateAngle })
                .onTouch((event: TouchEvent) => {
                  if (event.type === TouchType.Down) {
                    this.text = day
                  }
                })
              if (this.isEditable) {
                Image($r('app.media.btn_Closed')).width(15).height(15).onClick(()=>{
                  // Array
                  Logger.warn('移除前：' + this.numbers.toString());
                  this.numbers.splice(index,1)
                  Logger.warn('移除后：' + this.numbers.toString());
                })
              }
            }.alignContent(Alignment.TopEnd)
          }
        })
      }
      .gridStyle()
      .onScrollIndex((first: number) => {
        console.info(first.toString())
      })
      //設(shè)置Grid是否進(jìn)入編輯模式，進(jìn)入編輯模式可以拖拽Grid組件內(nèi)部GridItem
      .editMode(this.isEditable)
      //第一次拖拽此事件綁定的組件時(shí)，觸發(fā)回調(diào)
      .onItemDragStart((event: ItemDragInfo, itemIndex: number) => {
        //設(shè)置拖拽過(guò)程中顯示的圖片
        return this.pixelMapBuilder()
      })
      //綁定此事件的組件可作為拖拽釋放目標(biāo)，當(dāng)在本組件范圍內(nèi)停止拖拽行為時(shí)，觸發(fā)回調(diào)
      //itemIndex為拖拽起始位置，insertIndex為拖拽插入位置
      .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => {
        let isValidInserIndex = insertIndex < this.numbers.length;
        if (isSuccess && insertIndex < this.numbers.length) {
        // if (isSuccess && isValidInserIndex) {
          //不支持拖拽到已有內(nèi)容以外的位置
          this.changeIndex(itemIndex, insertIndex)
        } else {
          Logger.warn('griditem交換失敗');
        }
      })
    }
    .width('100%')
  }
}

5）注意事項(xiàng)

  • griditem最好設(shè)置寬高，否則可能拖拽不成功，具體現(xiàn)象就是onItemDrop方法中的insertIndex為-1，isSuccess為false

7、子組件占滿(mǎn)主軸方向剩余區(qū)域如何設(shè)置？

  • 方法1：在row和column的子組件中設(shè)置layoutWeight
Column() {
      Row({space:10}){
        Image($r('app.media.logo')).width(90).height(90)
        Column(){
          Text(title).fontSize('14').width('100%')
          Blank()
          Row(){
            Text('我是按鈕前文')
            Blank()
            Button('立即查看',{type:ButtonType.Capsule}).width(80).height(35).onClick(()=>{
              Logger.debug('當(dāng)前索引值：'+ index.toString() + '，當(dāng)前item：' + title)
            })
          }
          .width('100%')
          .backgroundColor(Color.Orange)
        }
        .layoutWeight(1) // 占滿(mǎn)主軸方向剩余空間
        .height(80)
        .justifyContent(FlexAlign.SpaceBetween)
        .backgroundColor(Color.Pink)
      }
      .width('100%')
      .padding(10)

      Divider().color('#F2F2F2').strokeWidth(1).margin({left:10,right:10})
    }.width('100%')
  • 方法2：使用flext布局,設(shè)置flexGrow

      Flex({direction:FlexDirection.Row,alignItems:ItemAlign.Center}){
        Flex(){
          Stack(){
            Image($r('app.media.logo')).width(90).height(90)
          }.width(90).height(90)
          // .backgroundColor(Color.Blue)
        }
        // .flexBasis(120)
        .width(120)
        // .backgroundColor(Color.Green)

        Flex({direction:FlexDirection.Column,justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Start}){
          Text(title).fontSize('14')
          Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Center}){
            Text('按鈕前文案')
            Button('立即查看',{type:ButtonType.Capsule}).width(80).height(35).onClick(()=>{
              Logger.debug('當(dāng)前索引值：'+ index.toString() + '，當(dāng)前item：' + title)
            })
          }
          .backgroundColor(Color.Orange)
        }
        .flexGrow(2) // column占滿(mǎn)剩余空間
        // .flexShrink(1)
        .backgroundColor(Color.Pink)
        .height(80)
        .margin({left:10})
      }
      .width('100%')
      .padding(10)
      // .backgroundColor(Color.Green)
      // 2、最下面的橫線(xiàn)
      Divider().color('#F2F2F2').strokeWidth(1).margin({left:10,right:10})
    }.width('100%')


二、常用快捷鍵

以下快捷鍵是能提效的，部分快捷鍵是我自定義的，大家自行參考。

1、com+shift+j【自定義成Xcode一致】

快速打開(kāi)當(dāng)前文件左側(cè)文件樹(shù)位置


image.png

2、com+7

打開(kāi)structure

3、OPT+F7

提供Find Usages代碼引用查找功能，幫助開(kāi)發(fā)者快速查看某個(gè)對(duì)象(變量、函數(shù)或者類(lèi)等)被引用的地方，用于后續(xù)的代碼重構(gòu)，可以極大的提升開(kāi)發(fā)者的開(kāi)發(fā)效率。

4、com+[ 和 com+]

代碼后退和代碼前進(jìn)

5、兩次shift

全局搜索

6、com+/

代碼注釋

7、com+左右箭頭

某行代碼，光標(biāo)移到行首和行尾

8、com+shift+上下方向鍵

某行代碼上移和下移

9、com+點(diǎn)擊（某個(gè)屬性或者方法）

快速跳轉(zhuǎn)到定義的位置，一般可以配合com+[ 或 com+]使用

10、com+刪除按鈕

快速刪除某行

11、com+D

復(fù)制某行或者某段代碼

12、com+上下箭頭【自定義的，默認(rèn)沒(méi)有】

快速滾動(dòng)到文件頂部和底部<BR>
需要自定義快捷鍵，在自定義快捷鍵界面中的Scroll To Top和Scroll To Bottom自定義快捷鍵


三、待解決問(wèn)題？

1、網(wǎng)絡(luò)庫(kù)繞過(guò)https自簽名證書(shū)如何實(shí)現(xiàn)？

2、網(wǎng)絡(luò)庫(kù)封裝之code status問(wèn)題？

3、網(wǎng)絡(luò)庫(kù)封裝之全局配置無(wú)效的問(wèn)題？

4、網(wǎng)絡(luò)庫(kù)封裝之異常問(wèn)題？

5、web組件繞過(guò)https自簽名證書(shū)如何實(shí)現(xiàn)？

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀(guān)點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容