# 鸿蒙脚本工具集
export PATH=/Users/XXX/HMOSProject/EnvInfo/sdk/openharmony/9/toolchains:$PATH
export PATH=/Users/XXX/HMOSProject/EnvInfo/ohpm/bin:$PATH
# HDC是为开发者提供HarmonyOS应用/服务的调试工具，为方便使用HDC工具，请为HDC端口号设置环境变量。
export HDC_SERVER_PORT=7035
launchctl setenv HDC_SERVER_PORT $HDC_SERVER_PORT
export HDC_SERVER_PORT

3、网络请求如何实现？

方法1：第三方组件：axios
方法2：系统API：http，封装示例如下：

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


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

// 标准网络请求返回数据结构
export interface  SJRequestConfig extends http.HttpRequestOptions{
  url?:string; // url参数
}

// 全局配置对象
export interface SJGlobalConfig {
  // baseUrl
  baseUrl?: string;
  // 是否使用缓存：默认为true
  usingCache?: boolean;
  // 全局header，默认值为 'content-type': 'application/json'
  header?: Object;
  // 读取超时时间：默认60000，即60s
  readTimeout?: number; // default is 60s
  // 连接超时时间：默认60000，即60s
  connectTimeout?: number; // default is 60s.
  // HTTP协议版本，默认由系统决定
  usingProtocol?: http.HttpProtocol;
}

// 标准网络请求返回数据结构
export class SJResponse<T> {
  status?: number;
  message?: string;
  data?: T;
}

// 网络库返回的错误对象
export class SJError<R> {
  code:Number; // HTTP错误码
  message?:string; // HTTP错误信息
  businessCode?:Number; // 业务code
  businessMessage?:string; // 业务message
  data?:R; //原始数据
}

export class SJHttp {
  request<T,R= string | Object | ArrayBuffer>(config:SJRequestConfig): Promise<T> {
    // 每一个httpRequest对应一个HTTP请求任务，不可复用
    let httpRequest = http.createHttp();
    // 请求参数配置
    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响应内容，可根据业务需要进行解析
          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响应头事件
        httpRequest.off('headersReceive');
        // 当该请求使用完毕时，调用destroy方法主动销毁。
        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 {
  // 单例对象
  static instance: SJRequest = new SJRequest();
  // 全局配置对象
  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、处理其他参数
    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上拉加载，下拉刷新如何实现？

参考第三方组件： PullToRefresh

5、页面导航栏如何实现？

通过系统的Navigation组件即可实现

@Builder content(){
    Navigation(){
      Column() {
        this.appGridView()
        // LayoutGridDratEditPage()
      }
    }
    .mode(NavigationMode.Auto)
    .titleMode(NavigationTitleMode.Mini)
    .title('编辑应用')
    .menus(this.rightBtns())
  }

6、grid拖动编辑如何实现？有什么要注意的？

1）设置编辑模式属性为true

//设置Grid是否进入编辑模式，进入编辑模式可以拖拽Grid组件内部GridItem
.editMode(this.isEditable)

2）刚开始拖拽的时候，设置拖拽悬浮展示的UI

//第一次拖拽此事件绑定的组件时，触发回调
.onItemDragStart((event: ItemDragInfo, itemIndex: number) => {
   //设置拖拽过程中显示的图片
   return this.pixelMapBuilder()
})
//拖拽过程中展示的样式
@Builder pixelMapBuilder() {
   Column() {
     Text(this.text).gridItemStyle()
   }
}

3）拖拽到目标gridItem时，根据条件交换数组中的元素

//绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调
//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) {
    //不支持拖拽到已有内容以外的位置
    this.changeIndex(itemIndex, insertIndex)
  } else {
    Logger.warn('griditem交换失败');
  }
})

//交换数组中元素位置
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

  //拖拽过程中展示的样式
  @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());
  }

  //交换数组中元素位置
  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())
      })
      //设置Grid是否进入编辑模式，进入编辑模式可以拖拽Grid组件内部GridItem
      .editMode(this.isEditable)
      //第一次拖拽此事件绑定的组件时，触发回调
      .onItemDragStart((event: ItemDragInfo, itemIndex: number) => {
        //设置拖拽过程中显示的图片
        return this.pixelMapBuilder()
      })
      //绑定此事件的组件可作为拖拽释放目标，当在本组件范围内停止拖拽行为时，触发回调
      //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) {
          //不支持拖拽到已有内容以外的位置
          this.changeIndex(itemIndex, insertIndex)
        } else {
          Logger.warn('griditem交换失败');
        }
      })
    }
    .width('100%')
  }
}

5）注意事项

griditem最好设置宽高，否则可能拖拽不成功，具体现象就是onItemDrop方法中的insertIndex为-1，isSuccess为false

7、子组件占满主轴方向剩余区域如何设置？

方法1：在row和column的子组件中设置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('当前索引值：'+ index.toString() + '，当前item：' + title)
            })
          }
          .width('100%')
          .backgroundColor(Color.Orange)
        }
        .layoutWeight(1) // 占满主轴方向剩余空间
        .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布局,设置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('当前索引值：'+ index.toString() + '，当前item：' + title)
            })
          }
          .backgroundColor(Color.Orange)
        }
        .flexGrow(2) // column占满剩余空间
        // .flexShrink(1)
        .backgroundColor(Color.Pink)
        .height(80)
        .margin({left:10})
      }
      .width('100%')
      .padding(10)
      // .backgroundColor(Color.Green)
      // 2、最下面的横线
      Divider().color('#F2F2F2').strokeWidth(1).margin({left:10,right:10})
    }.width('100%')

二、常用快捷键

以下快捷键是能提效的，部分快捷键是我自定义的，大家自行参考。

1、com+shift+j【自定义成xcode一致】

快速打开当前文件左侧文件树位置

2、com+7

打开structure

3、OPT+F7

提供Find Usages代码引用查找功能，帮助开发者快速查看某个对象(变量、函数或者类等)被引用的地方，用于后续的代码重构，可以极大的提升开发者的开发效率。

4、com+[ 和 com+]

代码后退和代码前进

5、两次shift

全局搜索

6、com+/

代码注释

7、com+左右箭头

某行代码，光标移到行首和行尾

8、com+shift+上下方向键

某行代码上移和下移

9、com+点击（某个属性或者方法）

快速跳转到定义的位置，一般可以配合com+[ 或 com+]使用

10、com+删除按钮

快速删除某行

11、com+D

复制某行或者某段代码

12、com+上下箭头【自定义的，默认没有】

快速滚动到文件顶部和底部<BR>
需要自定义快捷键，在自定义快捷键界面中的Scroll To Top和Scroll To Bottom自定义快捷键

三、待解决问题？

1、网络库绕过https自签名证书如何实现？

2、网络库封装之code status问题？

3、网络库封装之全局配置无效的问题？

4、网络库封装之异常问题？

5、web组件绕过https自签名证书如何实现？

文档
对于比较好的文档做个记录，免得丢失。鸿蒙 HarmonyOS 鸿蒙官方 https://developer.ha...
鸿蒙应用开发记录
2021.2.1 主要能力demo需要从安卓项目中将核心代码迁移过来，但核心代码中含有Handler，目前不清楚H...
鸿蒙学习-权限
本文章基于SDK(API Version 5)进行开发权限分类权限的grantMode是system_gran...
鸿蒙学习-ListContainer
ListContainer是用来呈现连续、多行数据的组件，包含一系列相同类型的列表项。自有XML属性 rebou...
鸿蒙学习-ScrollView
ScrollView是一种带滚动功能的组件，它采用滑动的方式在有限的区域内显示更多的内容。 ScrollView的...
鸿蒙学习-PageFlipper
PageFlipper：翻页器，当PageFlipper有两个或多个子组件时，切换期间设置动画时，PageFlip...
鸿蒙学习-ToastDialog
ToastDialog：在窗口上方提供toast对话框，以通知操作的简单反馈。Toast对话框不可单击，它将自动消...
鸿蒙学习-Checkbox
Checkbox实现选中和取消选中的功能。从代码上看和RadioButton没有区别，但是由于SDK并没有开源，没...
鸿蒙系统的手机📱.. ‖ Updating
文/ 煜兮【学习笔记/原创】｛192/365｝华为已经官宣了正式启用鸿蒙系统，搭载华为鸿蒙系统的荣耀智慧...
记录npm 安装network getaddrinfo ENOT
前言今天借空余时间研究了一下鸿蒙系统。下载完idea编译器，安装鸿蒙SDK环境出现了安装错误，顺路记录一下，帮助...

鸿蒙学习记录

简介

环境信息：

一、学习文档

1、HarmonyOS 第一课

2、鸿蒙开发者文档指南

3、鸿蒙开发者文档API参考

4、华为开发者论坛

5、鸿蒙开发基础认证和高级认证

6、鸿蒙应用发布

二、遇到的问题

1、DevEco Studio自动生成.js、.js.map文件问题

2、DevEco Studio无法自动监测到本地模拟器？