HarmonyOS开辟实战：​UI组件使用方式-API

UI类组件

模块先容ToastUtil提供对文本提示的一系列方法DialogUtil提供对弹出框的一系列方法ActionUtil提供对操作菜单的一系列方法LoadingUtil提供全局加载工具类TipsUtil提供提示弹出工具类SelectUtil提供选择弹出工具类ConfirmUtil提供信息确认弹出工具类AlertUtil提供操作确认弹出工具类ExceptionUtil提供省市区级联选择组件Cascade提供省市区级联选择组件ImmersionUtil提供沉浸式导航设置WindowUtil提供窗口的创建关闭等功能NotificationUtil提供发送,删除通知等功能LocationUtil提供获取定位,逆编码等功能DownloadUtil统一的上传下载按钮工具PickerUtil调起选择文件、照片、音频等工具类CameraUtil调起照相工具类WinDialogUtil窗口方式弹框工具类PreviewUtil预览工具类WinLoadingUtil窗口方式全局加载工具类
UI组件相干使用API

1.ToastUtil的方法

• showToast 弹出文本消息提示框
  

1. 入参
2.   msg:提示消息
3.   options: {
4.     duration:'',
5.     bottom:'',
6.     showMode:0
7.   }  提示参数duration为显示时长，bottom为距离底部位置,showMode设置弹窗是否显示在应用之上0内,1上
8.   示例
9.   ToastUtil.showToast('提示信息');//使用默认参数
10.   ToastUtil.showToast('duration:4000,bottom:50vp', { duration: 4000, bottom: '50vp', showMode: 1 });//修改参数

复制代码

2.DialogUtil的方法

• showDialog 弹出一个Dialog提示框
  

1. 入參
2.     options: {
3.      title:标题默认为温馨提示,
4.      msg:提示消息,
5.      okText:确定按钮文本,
6.      cancelText:取消按钮文本,
7.      alignment:弹窗在竖直方向上的对齐方式,
8.      maskRect:弹窗遮蔽层区域,
9.      isModal:弹窗是否为模态窗口,
10.      offset:弹窗相对alignment所在位置的偏移量,
11.      okCallBack:确定按钮事件,
12.      cancelCallBack:取消按钮事件,不传入cancelCallBack则显示一个按钮
13.     }
14.     Button("dialog").margin({ bottom: '10vp' }).onClick(() => {
15.      DialogUtil.showDialog({
16.         msg: '这是一个弹框提示~~~~',
17.         okCallBack: this.ok,
18.         okText: '揍你',
19.         cancelText: '去吧',
20.         cancelCallBack: this.cancel
21.       });
22.     })
23.     Button("dialog一个按钮").margin({ bottom: '10vp' }).onClick(() => {
24.       DialogUtil.showDialog({
25.         msg: '不写cancelCallBack则显示一个按钮',
26.         okCallBack: this.test   //调用方法无需小括号()
27.       });
28.     })
29.     Button("dialog修改参数").margin({ bottom: '10vp' }).onClick(() => {
30.       DialogUtil.showDialog({
31.         msg: '这是一个弹框提示',
32.         okText: '同意',
33.         okCallBack: this.test, //调用方法无需小括号()
34.         cancelCallBack: this.cancel
35.       });
36.     })

复制代码

• showAlertDialog 弹出一个警告提示框
  

点击领取→纯血版全套鸿蒙HarmonyOS学习资料（安全链接，放心点击）希望这一份鸿蒙学习资料能够给各人带来资助，有需要的小伙伴自行领取~~

1. 入參
2.     options
3.     {
4.      msg:警告消息,
5.      title:提示标题默认为(警告提示),
6.      subtitle:副标题,
7.      autoCancel:点击遮罩是否自动关闭默认为(false),
8.      alignment:弹框对齐方式默认为(底部Bottom),
9.      gridCount:宽度所占用栅格数默认为10,
10.      offset:弹窗相对alignment所在位置的偏移量,
11.      buttons:弹框按钮集合,
12.      maskRect:弹窗遮蔽层区域
13.     }
14.     buttons:AlertDialogBtn 弹框按钮类只允许有两个第一个为确认按按,第二个为取消按钮
15.     buttons的类型
16.     [
17.       {
18.         value:确定按钮文本默认为确定,
19.         fontColor:文本颜色默认为#fff,
20.         backgroundColor:背景颜色默认值为#409eff,
21.         callBack:确定按钮回调事件,
22.         enabled:点击Button是否响应,
23.         defaultFocus:设置Button是否是默认焦点,
24.         style:设置Button的风格样式
25.       },//确定按钮
26.       {
27.         value:取消按钮文本默认为取消,
28.         fontColor:文本颜色默认为#fff,
29.         backgroundColor:背景颜色默认值为#dcdfe6,
30.         callBack:取消按钮回调事件,
31.         enabled:点击Button是否响应,
32.         defaultFocus:设置Button是否是默认焦点,
33.         style:设置Button的风格样式
34.       }//取消按钮
35.     ]
36.     //使用默认参数
37.     DialogUtil.showAlertDialog({
38.       msg: "这个是一个，默认警告弹框",
39.       buttons: [
40.         { callBack: this.ok }
41.       ]
42.     });
43.     //使用自定义参数
44.    DialogUtil.showAlertDialog({
45.      msg: "这个是一个警告弹框",
46.      title: '标题',
47.      alignment: DialogAlignment.Top,
48.      buttons: [
49.        { callBack: this.ok, style: DialogButtonStyle.HIGHLIGHT },
50.        { callBack: this.cancel }
51.      ]
52.    });

复制代码

3.ActionUtil的方法

• showActionMenu 表现操作菜单
  

1. 入參
2.     options: {
3.       title:标题 默认为温馨提示,
4.       btn:需要显示的菜单项,最大支持6个,
5.       showInSubWindow:某弹框需要显示在主窗口之外时，是否在子窗口显示此弹窗,
6.       isModal:弹窗是否为模态窗口，模态窗口有蒙层，非模态窗口无蒙层
7.     }
8.     Buttons:{
9.       text:菜单项标题
10.       color:菜单项颜色
11.       btnCallBack:点击菜单项对应触发的事件
12.     }
13.     //使用默认参数
14.     ActionUtil.showActionMenu({ btn: [
15.       { text: '测试1', color: '#cdcdcd', btnCallBack: this.can },
16.       { text: '测试2', color: '#108ee9', btnCallBack: this.two }
17.     ]});
18.     //使用自定义参数
19.     ActionUtil.showActionMenu({ title: '修改后的标题', btn: [
20.       { text: '测试1', color: '#cdcdcd', btnCallBack: this.can },
21.       { text: '测试2', color: '#108ee9', btnCallBack: this.two }
22.     ] });

复制代码

• showMenu 表现操作菜单便捷操作
  

1. 入參
2.     options: {
3.       title:标题,
4.       btn:菜单字符串数组 最多6个,
5.       clickCallBack:点击菜单回调函数，默认传回当前点击菜单项,
6.       showInSubWindow:某弹框需要显示在主窗口之外时，是否在子窗口显示此弹窗
7.       isModal:弹窗是否为模态窗口，模态窗口有蒙层，非模态窗口无蒙层
8.     }
9.     //使用默认参数
10.     Button("actionMenu默认标题").margin({ bottom: '10vp' }).onClick(() => {
11.       ActionUtil.showMenu({btn:["菜单1","菜单2"],clickCallBack:(data)=>{
12.         ToastUtil.showToast(data);
13.       }})
14.     })
15.     //使用自定义参数
16.     Button("actionMenu修改标题").margin({ bottom: '10vp' }).onClick(() => {
17.       ActionUtil.showMenu({title:'修改了菜单标题',btn:["菜单1","菜单2"],clickCallBack:(data)=>{
18.         ToastUtil.showToast(data);
19.       }})
20.     })

复制代码

• showActionSheet 表现一个列表选择弹窗
  

1. 入參
2.     options: {
3.       title:提示可不填,
4.       msg:内容可不填,
5.       subtitle:副标题,
6.       autoCancel:点击遮障层时，是否关闭弹窗,
7.       offset:弹窗相对alignment所在位置的偏移量,
8.       maskRect:弹窗遮蔽层区域，在遮蔽层区域内的事件不透传，在遮蔽层区域外的事件透传,
9.       showInSubWindow:某弹框需要显示在主窗口之外时，是否在子窗口显示此弹窗,
10.       isModal:弹窗是否为模态窗口，模态窗口有蒙层，非模态窗口无蒙层,
11.       alignment:弹框对齐方式默认为(底部Bottom),
12.       sheets:列表项字符串数组,
13.       clickCallBack:点击列表项回调事件,默认传回选中的当前项,
14.       backgroundColor:弹窗背板颜色,
15.       backgroundBlurStyle:弹窗背板模糊材质
16.     }
17.     //使用默认参数
18.      Button("列表选择弹窗默认参数").margin({ bottom: '10vp' }).onClick(() => {
19.        ActionUtil.showActionSheet({
20.          sheets: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
21.          clickCallBack: (data: string) => {
22.            ToastUtil.showToast(data);
23.          } });
24.      })
25.     //使用自定义参数
26.     Button("列表选择弹窗修改参数").margin({ bottom: '10vp' }).onClick(() => {
27.       ActionUtil.showActionSheet({
28.         title:'弹框的标题',
29.         msg:'弹框的消息',
30.         subtitle:'副标题',
31.         alignment:DialogAlignment.Top,
32.         sheets: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
33.         clickCallBack: (data: string) => {
34.           ToastUtil.showToast(data);
35.         } });
36.     })

复制代码

4.LoadingUtil的方法

• 入参先容
  

1. LoadOptions 全局加载入参实体
2.     options:{
3.         show:是否显示默认false,
4.         content:加载提示内容默认正在拼命加载中,请稍后...,
5.         showInSubWindow:是否显示在主窗口之外默认false,
6.         alignment:弹窗在竖直方向上的对齐方式默认Center,
7.         offset:弹窗相对alignment所在位置的偏移量默认Bottom相关y:-20,Top相关y:50
8.     }

复制代码

• 初始化
  

1. @State showLoading: boolean = false;
2.     在build中初始化该组件,show接收一个@State修饰符修饰的boolean变量
3.     LoadingUtil({
4.        options: { show: this.showLoading, alignment: DialogAlignment.Top, content: '更改了加载提示...' }
5.     });

复制代码

• show 表现加载框
  

1.    在需要显示的地方更改变量值,如发起一个axios请求时
2.     this.showLoading = true;

复制代码

• close 关闭加载框
  

1.     在需要关闭的地方更改变量值,如axios请求成功返回结果时
2.     this.showLoading = false;

复制代码

• 演示
  

1. Button("显示全局loading").margin({ bottom: '10vp' }).onClick(() => {
2.        this.showLoading = true;
3.        setTimeout(() => {
4.          this.showLoading = false;
5.        }, 3000);
6.     })

复制代码

5.TipsUtil的方法

• 入参先容
  

1. TipsOptions 提示框入参实体
2.     options:{
3.         show:是否显示默认false,
4.         title:提示框标题默认温馨提示,
5.         content:提示框内容,
6.         checkTips:checkbox的提示内容默认不再提醒,
7.         btnList:按钮字符串数组默认['同意','取消']
8.         clickCallBack:点击弹框按钮回调函数,
9.         alignment:弹窗在竖直方向上的对齐方式默认Center,
10.         offset:弹窗相对alignment所在位置的偏移量默认Bottom相关y:-20,Top相关y:50
11.     }

复制代码

• 初始化
  

1. @State showTips: boolean = false;
2.     在build中初始化该组件,show接收一个@State修饰符修饰的boolean变量
3.     TipsUtil({
4.       options: {
5.         show: this.showTips,
6.         content: '请仔细阅读请仔细阅读请仔细阅读请仔细阅读请仔细阅读请仔细阅读请仔细阅读请仔细阅读请仔细阅读xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
7.         clickCallBack: (index, isChecked) => {
8.           ToastUtil.showToast(index === 0 ? '点击了第一个按钮' + isChecked : '点击了第二个按钮' + isChecked);
9.           this.showTips = false;
10.         }
11.       }
12.     });
13.     clickCallBack中的两个入参
14.     1.index为点击按钮的下标,0为点击第一个按钮,1为点击第二个按钮
15.     2.isChecked为checkbox是否选中,选中为true

复制代码

• 表现提示框
  

1.   在需要显示的地方更改变量值,如提示用户授权
2.     this.showTips = true;

复制代码

• 关闭提示框
  

1. 在回调成功事件中关闭
2.     clickCallBack: (index, isChecked) => {
3.        this.showTips = false;
4.     }

复制代码

• 演示
  

1. Button("显示Tips").margin({ bottom: '10vp' }).onClick(() => {
2.       this.showTips = true;
3.     })

复制代码

6.SelectUtil的方法

• 入参先容
  

1. SelectOptions 选择框入参实体
2.     options:{
3.         show:是否显示默认false,
4.         title:选择弹出框标题,
5.         content:选择弹出框内容,
6.         btnTxt:按钮字符串,
7.         ctxList:选项内容数组
8.         clickCallBack:点击弹框按钮回调函数,
9.         alignment:弹窗在竖直方向上的对齐方式默认Center,
10.         offset:弹窗相对alignment所在位置的偏移量默认Bottom相关y:-20,Top相关y:50
11.     }

复制代码

• 初始化
  

1.   @State showSelect: boolean = false;
2.     在build中初始化该组件,show接收一个@State修饰符修饰的boolean变量
3.     SelectUtil({
4.       options: {
5.         show: this.showSelect,
6.          ctxList: ['苹果', '香蕉', '梨', '哈密瓜','凤梨','西瓜','火龙果','伊丽莎白'],
7.          clickCallBack: (selectData) => {
8.            //点击按钮时也会触发该回调,返回值为'',故需要判断当返回值不为空时进行业务操作
9.            if (selectData) {
10.              ToastUtil.showToast('选择了' + selectData);
11.            }
12.            this.showSelect = false;
13.          }
14.       }
15.     })
16.     clickCallBack中的入参
17.     1.selectData为点击选择的内容项

复制代码

• 表现选中框
  

1. 在需要显示的地方更改变量值,如提示用户授权
2.     this.showSelect = true;

复制代码

• 关闭选择框
  

1.    在回调成功事件中关闭
2.     clickCallBack: (selectData) => {
3.        //点击按钮时也会触发该回调,返回值为'',故需要判断当返回值不为空时进行业务操作
4.        if (selectData) {
5.          ToastUtil.showToast('选择了' + selectData);
6.        }
7.        this.showSelect = false;
8.     }

复制代码

• 演示
  

1. Button("显示Select").margin({ bottom: '10vp' }).onClick(() => {
2.       this.showSelect = true;
3.     })

复制代码

7.ConfirmUtil的方法

• 入参先容
  

1. ConfirmOptions 信息确认框入参实体
2.     options:{
3.         show:是否显示默认false,
4.         title:提示框标题默认操作确认,
5.         content:提示框内容,
6.         checkTips:checkbox的提示内容默认禁止后不再提醒,
7.         btnList:按钮字符串数组默认['禁止','允许']
8.         clickCallBack:点击弹框按钮回调函数,
9.         alignment:弹窗在竖直方向上的对齐方式默认Center,
10.         offset:弹窗相对alignment所在位置的偏移量默认Bottom相关y:-20,Top相关y:50
11.     }

复制代码

• 初始化
  

1. @State showConfirm: boolean = false;
2.     在build中初始化该组件,show接收一个@State修饰符修饰的boolean变量
3.     ConfirmUtil({
4.       options: {
5.         show: this.showConfirm,
6.         title: '这个是提示',
7.         content: '确认要禁止定位权限么?',
8.         clickCallBack: (index, isChecked) => {
9.           ToastUtil.showToast(index === 0 ? '点击了第一个按钮' + isChecked : '点击了第二个按钮' + isChecked);
10.           this.showConfirm = false;
11.         }
12.       }
13.     })
14.     clickCallBack中的两个入参
15.     1.index为点击按钮的下标,0为点击第一个按钮,1为点击第二个按钮
16.     2.isChecked为checkbox是否选中,选中为true

复制代码

• 表现提示框
  

1.     在需要显示的地方更改变量值,如提示用户授权
2.     this.showConfirm = true;

复制代码

• 关闭提示框
  

1. 在回调成功事件中关闭
2.     clickCallBack: (index, isChecked) => {
3.        this.showConfirm = false;
4.     }

复制代码

• 演示
  

1. Button("显示Conform").margin({ bottom: '10vp' }).onClick(() => {
2.       this.showConfirm = true;
3.     })

复制代码

8.AlertUtil的方法

• 入参先容
  

1. AlertOptions 操作确认框入参实体
2.     options:{
3.         show:是否显示默认false,
4.         content:提示框内容,
5.         btnList:按钮字符串数组默认['确认','取消']
6.         clickCallBack:点击弹框按钮回调函数,
7.         alignment:弹窗在竖直方向上的对齐方式默认Center,
8.         offset:弹窗相对alignment所在位置的偏移量默认Bottom相关y:-20,Top相关y:50
9.     }

复制代码

• 初始化
  

1. @State showAlert: boolean = false;
2.     在build中初始化该组件,show接收一个@State修饰符修饰的boolean变量
3.     AlertUtil({
4.       options: {
5.         show: this.showAlert,
6.         content: '这是一个警告弹出框',
7.         clickCallBack: (index) => {
8.           ToastUtil.showToast(index === 0 ? '点击了第一个按钮' : '点击了第二个按钮');
9.           this.showAlert = false;
10.         }
11.       }
12.     })
13.     clickCallBack中的入参
14.     1.index为点击按钮的下标,0为点击第一个按钮,1为点击第二个按钮

复制代码

• 表现提示框
  

1. 在需要显示的地方更改变量值,如提示用户授权
2.     this.showAlert = true;

复制代码

• 关闭提示框
  

1. 在回调成功事件中关闭
2.     clickCallBack: (index) => {
3.        this.showAlert = false;
4.     }

复制代码

• 演示
  

1. Button("显示Alert").margin({ bottom: '10vp' }).onClick(() => {
2.       this.index = true;
3.     })

复制代码

9.ExceptionUtil的方法

• 入参先容
  

1.   PromOptions 异常提示框入参实体
2.     options:{
3.         show:是否显示默认false,
4.         content:提示框内容,
5.         actionText:指定当前异常提示的右侧图标按钮的文字,
6.         clickCallBack:点击弹框按钮回调函数
7.     }

复制代码

• 初始化
  

1.   @State showException: boolean = false;
2.     在build中初始化该组件,show接收一个@State修饰符修饰的boolean变量
3.     ExceptionUtil({
4.       options: {
5.         show: this.showException,
6.         clickCallBack: (index) => {
7.           //index为0表示点击了左侧文字,为1表示点击了右侧图标,根据情况进行业务处理
8.           ToastUtil.showToast("点击了" + index);
9.           this.showException = false;
10.         }
11.       }
12.     })
13.     clickCallBack中的入参
14.     1.index为0表示点击了左侧文字,为1表示点击了右侧图标,根据情况进行业务处理

复制代码

• 表现提示框
  

1. 在需要显示的地方更改变量值,如网络异常
2.     this.showException = true;

复制代码

• 关闭提示框
  

1. 在回调成功事件中关闭
2.     clickCallBack: (index) => {
3.        this.showException = false;
4.     }

复制代码

• 演示
  

1. Button("显示Exception").margin({ bottom: '10vp' }).onClick(() => {
2.       this.showException = true;
3.     })

复制代码

10.Cascade省市区级联

1. 入参  
2.   show  是否显示级联框(TRUE显示FALSE关闭)  
3.   callCity 反回选择的省市区数据
4.   //使用demo
5.   Button("级联菜选择器").margin({ bottom: '10vp' }).onClick(() => {
6.       this.show = !this.show;
7.   })
8.   Cascade({ show: $show, callCity: $callCity })
9.   //$callCity为调用页面传入给子组件的用于接收返回的值

复制代码

• 效果图
  

11.ImmersionUtil沉浸式导航工具类

• 初始化
  

1. 在EntryAbility中的onWindowStageCreate中进行初始化和设置
2.   onWindowStageCreate(windowStage: window.WindowStage): void {
3.     //1.初始化
4.     let imm = new ImmersionUtil();
5.     windowStage.loadContent('pages/Index', (err, data) => {
6.       //2.调用沉浸式设置方法
7.       imm.immersiveWindow(windowStage);
8.       if (err.code) {
9.         hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
10.         return;
11.       }
12.       hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
13.     });
14.   }

复制代码

• immersiveWindow 设置
  

1. //参数详解
2.    {
3.     windowStage:窗口对象,
4.     isLayoutFullScreen:是否开启全屏显示,默认true,
5.     hiddenBar:是否隐藏底部导航,默认false,当为true时页面无需避让,
6.     color:窗口背景颜色,默认值为白色
7.    }

复制代码

• 示例
  

1. //本示例主要讲解hiddenBar为false时避让区设置
2.   //在初始化时已经向AppStorage中存入了变量bottomHeight,作为避让高度
3.   //在需要避让的页面中获取存入的值设置bottom即可
4.   //获取存入的应用变量
5.   bottomRectHeight: string = AppStorage.get<number>('bottomHeight') + 'px';
6.   //设置给对应的外层容器组件即可
7.   .margin({ bottom: this.bottomRectHeight })

复制代码

12.WindowUtil窗口工具类

• 入参先容
  

1. WinOptions 窗口工具入参实体
2.     options:{
3.         name:窗口名称默认eftool,
4.         windowType:窗口类型默认TYPE_DIALOG,
5.         contentRouter:窗口要显示的路由如:pages/Welcome需要在main_pages.json中声明,
6.         bgColor:窗口背景颜色默认#33606266,
7.         callBack:窗口创建回调函数
8.     }

复制代码

• createWindow 创建window
  

1. 在需要弹出窗口的页面创建弹出方法
2.   async openWin() {
3.     await WindowUtil.createWindow({
4.       contentRouter: 'pages/Welcome',
5.       callBack:()=>{
6.           //此处如果创建完窗口有业务需求则自定义
7.         ToastUtil.showToast('窗口已创建~');
8.       }
9.     })
10.   }

复制代码

• closeWindow 关闭window
  

1. //在需要关闭弹窗的时候调用，如在弹窗内处理完需求后关闭
2.    WindowUtil.closeWindow();

复制代码

• 示例
  

1. Button("打开窗口").margin({ bottom: '10vp' }).onClick(() => {
2.     this.openWin();
3.   })
4.   
5.   //Welcome页面
6.   Button('关闭弹窗').margin({ top: 20 }).onClick(() => {
7.     WindowUtil.closeWindow();
8.   })

复制代码

13.NotificationUtil通知工具类

• 入参先容
  

1. NoticeOptions 通知入参实体类
2.     options:{
3.         id:通知ID默认生成,
4.         isOngoing:是否进行时通知默认true,
5.         isStopwatch:是否显示已用时间默认true,
6.         label:通知标签默认eftool,
7.         title:通知标题默认来自eftool通知,
8.         text:通知内容,
9.         additionalText:通知附加内容默认'',
10.         longText:通知的长文本/多行的文本用英文逗号分割(多行文本时记得用逗号分隔),
11.         briefText:通知概要内容默认概要内容,
12.         expandedTitle:通知展开时的标题默认展开标题,
13.         picture:图片,
14.         callBack:业务回调函数
15.     }

复制代码

• authorizeNotification 校验是否已授权通知服务
  

1. 在需要发送通知的业务中调用  index为-1表示禁止，1表示已授权
2.   await NotificationUtil.authorizeNotification((index: number) => {
3.     ToastUtil.showToast(index > 0 ? '已经授予通知权限' : '用户禁止授权,请用户在设置中操作');
4.   });

复制代码

• publishBasic 推送普通文本通知
  

1. //在需要推送普通通知时调用,具体参数如图,下方为全量参数,具体根据业务自行选择,text为必填,其余均有默认值
2.    await NotificationUtil.publishBasic({
3.      text: '推送通知内容！！！！！！！！！！！！！！！！！！！！',
4.      title: '抢票时间到',
5.      additionalText: '这个是additionalText',
6.      isOngoing:true,
7.      isStopwatch:true,
8.      label:'普通通知',
9.      callBack: (noticeId: number) => {
10.        ToastUtil.showToast('通知推送成功:' + noticeId);
11.      }
12.    })

复制代码

• publishMultiLine 推送多文本通知
  

1.   //在需要推送多文本通知时调用,具体参数如图,下方为全量参数,具体根据业务自行选择,longText为必填,其余均有默认值用英文逗号分隔
2.    await NotificationUtil.publishMultiLine({
3.      text: '推送通知内容！！！！！！！！！！！！！！！！！！！！',
4.      title: '抢票时间到',
5.      additionalText: '这个是additionalText',
6.      expandedTitle: '多文本的展开',
7.      briefText: '多文本的概要',
8.      longText: '第一行的内容,第二行的内容,第三行的内容,第四行的内容,第无行的内容',
9.      isOngoing:true,
10.      isStopwatch:true,
11.      label:'普通通知',
12.      callBack: (noticeId: number) => {
13.        ToastUtil.showToast('通知推送成功:' + noticeId);
14.      }
15.    })

复制代码

• publishLongText 推送长文本通知
  

1. //在需要推送长文本通知时调用,具体参数如图,下方为全量参数,具体根据业务自行选择,longText为必填,其余均有默认值
2.    await NotificationUtil.publishLongText({
3.      text: '推送长文本内容！！！！！！！！！！！！！！！！！！！！',
4.      title: '抢票时间到11111111111',
5.      longText: '展出差出差出差出差展出差出差出差出差展出差出差出差出差展出差出差出差出差展出差出差出差出差展出差出差出差出差展出差出差出差出差展出差出差出差出差展出差出差出差出差展出差出差出差出差展出差出差出差出差',
6.      expandedTitle: '展开的副标题',
7.      briefText: '这个是概要',
8.      isOngoing:true,
9.      isStopwatch:true,
10.      label:'长文本通知',
11.      callBack: (noticeId: number) => {
12.        ToastUtil.showToast('通知推送成功:' + noticeId);
13.      }
14.    })

复制代码

• publishPicture 推送带有图片的通知(暂时未见到图片通知,不知是否为BUG)
  

1. //在需要推送长文本通知时调用,具体参数如图,下方为全量参数,具体根据业务自行选择,均有默认值
2.    await NotificationUtil.publishPicture({
3.      text: '222222',
4.      title: '抢票时间到',
5.      expandedTitle: '多文本的展开',
6.      briefText: '多文本的概要',
7.      isOngoing: true,
8.      isStopwatch: true,
9.      label: '图片通知',
10.      picture: await image.createImageSource((getContext(this) as common.UIAbilityContext).resourceManager.getMediaContentSync($r("app.media.startIcon"))
11.        .buffer).createPixelMap(),
12.      callBack: (noticeId: number) => {
13.        ToastUtil.showToast('通知推送成功:' + noticeId);
14.      }
15.    })

复制代码

• readOrRemoveNotice 读取或打扫通知后重置角标
  

1. NotificationUtil.readOrRemoveNotice(want);

复制代码

• cancelNotice 取消通知
  

1. //在需要取消的时候调用，传入通知id
2.    NotificationUtil.cancelNotice(10011, () => {
3.      ToastUtil.showToast('取消通知成功~');
4.    });

复制代码

• clearBadge 重置角标
  

1.   NotificationUtil.clearBadge();

复制代码

• clearNotice 整理所全部通知
  

1. NotificationUtil.clearNotice();

复制代码

• 当点击通知时默认调起当前Ability,打扫时也需要重新设置应用角标
  

1.   //角标更新需要在UIAbility的onNewWant中处理,默认的为EntryAbility页面中
2.   /**
3.    * 监听通知传入的want
4.    * @param want
5.    * @param launchParam
6.    */
7.   onNewWant(want: Want, launchParam: AbilityConstant.LaunchParam): void {
8.     NotificationUtil.readOrRemoveNotice(want);
9.   }

复制代码

14.LocationUtil位置工具类

• getGeoLocation 获取用户当前定位-逆编码后的位置(会申请APPROXIMATELY_LOCATION和LOCATION权限) 【返回OutDTO对象】
  

1. //注意APPROXIMATELY_LOCATION和LOCATION权限需要配置到项目的module.json5文件的requestPermissions中
2.   //需要获取用户当前定位的中文位置信息时调用,返回格式如北京市海淀区xxx街道xxxx号
3.   let result = await LocationUtil.getGeoLocation();
4.   this.message = result.getDataRow();

复制代码

• address2Location 地理逆编码,将地理形貌转换为具体坐标-无需申请定位权限 【返回OutDTO对象】
  

1. //已有详细地址需要编码为坐标信息时调用
2.    let res = await LocationUtil.address2Location('北京市顺义区后沙峪裕祥花园');
3.    this.message = res.getDataRow().latitude + '-------' + res.getDataRow().longitude;

复制代码

• geoConvert 地理逆编码,转换为中文-无需申请定位权限
  

1. //已知经纬度，需要获取中文地理位置描述时调用
2.    let result = await LocationUtil.geoConvert(40.102248232795134, 116.54190501929297);
3.    if (result.placeName) {
4.      this.message = result.placeName;
5.    }

复制代码

• getCountryCode 获取当前的国家码-无需申请定位权限 【返回OutDTO对象】
  

1. //在需要获取当前国家编码时调用
2.    let res = await LocationUtil.getCountryCode();
3.    this.message = res.getDataRow();

复制代码

• 示例
  

1. //方法
2.   async geoLocation() {
3.     let result = await LocationUtil.getGeoLocation();
4.     this.message = result.getDataRow();
5.   }
6.   async add2location() {
7.     let res = await LocationUtil.address2Location('北京市顺义区后沙峪裕祥花园');
8.     this.message = res.getDataRow().latitude + '-------' + res.getDataRow().longitude;
9.   }
10.   async geoConvert() {
11.     let result = await LocationUtil.geoConvert(40.102248232795134, 116.54190501929297);
12.     if (result.placeName) {
13.       this.message = result.placeName;
14.     }
15.   }
16.   async getCountryCode() {
17.     let res = await LocationUtil.getCountryCode();
18.     this.message = res.getDataRow();
19.   }
20.   //UI
21.   Button('获取当前定位').margin({ bottom: '10vp' }).onClick(() => {
22.     this.geoLocation();
23.   })
24.   Button('根据经纬度获取Location信息').margin({ bottom: '10vp' }).onClick(() => {
25.     this.geoConvert();
26.   })
27.   Button('根据地理位置获取定位信息').margin({ bottom: '10vp' }).onClick(() => {
28.     this.add2location();
29.   })
30.   Button('获取国家码').margin({ bottom: '10vp' }).onClick(() => {
31.     this.getCountryCode();
32.   })

复制代码

15.DownloadUtil上传下载工具类 (1.1.10+)

• 示例
  

1. //入参介绍
2.   progressState:是否显示进度按钮
3.   halfProgress:当前下载进度
4.   ctx:进度按钮文字提示
5.   //UI中引入
6.   DownloadUtil({
7.     progressState: this.showDownBtn,
8.     halfProgress: this.process,
9.     ctx: this.btnCtx
10.   })

复制代码

• 上传
  

1.   Button('上传文件').margin({ top: 20 }).onClick(() => {
2.     this.btnCtx = '上传文件中...';
3.     this.testUpload();
4.   })
5.   
6.   async testUpload() {
7.     //显示进度按钮
8.     this.showDownBtn = Visibility.Visible;
9.    
10.     let res = await efClientApi.upload('/api/eftool/upload', false, (progress: number) => {
11.       if (progress >= 100) {
12.         //上传完毕隐藏进度按钮
13.         this.showDownBtn = Visibility.None;
14.       }
15.       //设置当前进度
16.       this.process = progress;
17.     }, imageResource);
18.   }

复制代码

• 下载
  

1. Button('下载文件').margin({ top: 20 }).onClick(() => {
2.     this.btnCtx = '下载文件中...';
3.     this.testDownload();
4.   })
5.   
6.   async testDownload() {
7.     //显示进度按钮
8.     this.showDownBtn = Visibility.Visible;
9.     let res = await efClientApi.download('/api/eftool/download/0d6a25e4-f61b-48eb-8a12-53f82c5b957d-default1715324534920.png', 'girl.png', (progress: number) => {
10.       if (progress >= 100) {
11.         //下载完毕隐藏进度按钮
12.         this.showDownBtn = Visibility.None;
13.       }
14.       //设置当前进度
15.       this.process = progress;
16.     });
17.   }

复制代码

16.PickerUtil 调起选择工具类(1.1.11+)

• efPickerOptions picker选择入参实体
  

1. options: {
2.      suffixList:选择文件的后缀类型,【只在选择文档时需要】
3.      maxNumber:选择文档的最大数目,【在选择文档和照片时需要】
4.      selectMode:选择模式是文件还是目录,【只在选择文档时需要】
5.      isMultiSelect:是否多选联系人,【只在选择联系人时需要】
6.      selectCallBack:选择完成回调【回调方式方法时需要】
7.     }

复制代码

• selectFileCallBack 拉起picker选择文件 - 回调方式
  

1. let bufferImg: ArrayBuffer = new ArrayBuffer(40960000);
2.      //拉起选择文件
3.      await PickerUtil.selectFile({
4.       selectCallBack:(list)=>{
5.         //此处只是举例操作
6.         list.forEach(item => {
7.           let fileUriObject = new fileUri.FileUri(item);
8.           name = fileUriObject.name;
9.           let file = fs.openSync(item, fs.OpenMode.READ_ONLY);
10.           let readLen = fs.readSync(file.fd, bufferImg);
11.           fs.closeSync(file);
12.         })
13.       }
14.     });

复制代码

• selectFile 拉起picker选择文件 - 返回值方式
  

1. //拉起选择文件
2.     let result = await PickerUtil.selectFile();
3.     let bufferImg: ArrayBuffer = new ArrayBuffer(40960000);
4.     //判断是否成功
5.     if (result.getSuccess()) {
6.       let list = result.getDataTable();
7.       list.forEach(item => {
8.         //此处只是举例操作
9.         let fileUriObject = new fileUri.FileUri(item);
10.         name = fileUriObject.name;
11.         let file = fs.openSync(item, fs.OpenMode.READ_ONLY);
12.         let readLen = fs.readSync(file.fd, bufferImg);
13.         fs.closeSync(file);
14.       })
15.     }

复制代码

• selectPhotoVideoCallBack 拉起照片和视频选择 - 回调方式
  

1. let bufferImg: ArrayBuffer = new ArrayBuffer(40960000);
2.     //拉起照片和视频选择
3.     await PickerUtil.selectAudioCallBack({
4.       selectCallBack:(list)=>{
5.         //此处只是举例操作
6.         list.forEach(item => {
7.           let fileUriObject = new fileUri.FileUri(item);
8.           name = fileUriObject.name;
9.           let file = fs.openSync(item, fs.OpenMode.READ_ONLY);
10.           let readLen = fs.readSync(file.fd, bufferImg);
11.           fs.closeSync(file);
12.         })
13.       }
14.     });

复制代码

• selectPhotoVideo 拉起照片和视频选择 -返回值方式
  

1.    //拉起选中照片
2.     let result = await PickerUtil.selectPhotoVideo();
3.     let bufferImg: ArrayBuffer = new ArrayBuffer(40960000);
4.     //判断是否成功
5.     if (result.getSuccess()) {
6.       let list = result.getDataTable();
7.       list.forEach(item => {
8.         //此处只是举例操作
9.         let fileUriObject = new fileUri.FileUri(item);
10.         name = fileUriObject.name;
11.         let file = fs.openSync(item, fs.OpenMode.READ_ONLY);
12.         let readLen = fs.readSync(file.fd, bufferImg);
13.         fs.closeSync(file);
14.       })
15.     }

复制代码

• selectAudioCallBack 拉起picker选择音频 - 回调方式
  

1.   //拉起选择音频picker
2.       let bufferImg: ArrayBuffer = new ArrayBuffer(409600000);
3.       await PickerUtil.selectAudioCallBack({
4.       selectCallBack:(list)=>{
5.         //此处只是举例操作
6.         list.forEach(item => {
7.           let fileUriObject = new fileUri.FileUri(item);
8.           name = fileUriObject.name;
9.           let file = fs.openSync(item, fs.OpenMode.READ_ONLY);
10.           let readLen = fs.readSync(file.fd, bufferImg);
11.           fs.closeSync(file);
12.         })
13.       }
14.     })

复制代码

• selectAudio 拉起picker选择音频 - 返回值方式
  

1. /拉起选择音频
2.     let result = await PickerUtil.selectAudio();
3.     let bufferImg: ArrayBuffer = new ArrayBuffer(409600000);
4.     //判断是否成功
5.     if (result.getSuccess()) {
6.       let list = result.getDataTable();
7.       list.forEach(item => {
8.         //此处只是举例操作
9.         let fileUriObject = new fileUri.FileUri(item);
10.         name = fileUriObject.name;
11.         let file = fs.openSync(item, fs.OpenMode.READ_ONLY);
12.         let readLen = fs.readSync(file.fd, bufferImg);
13.         fs.closeSync(file);
14.       })
15.     }

复制代码

• selectContact 拉起picker选择联系人 - 返回值方式
  

1. //拉起选择联系人picker 默认多选
2.     let result = await PickerUtil.selectContact();
3.     if (result.getSuccess()) {
4.       let list = result.getDataTable();
5.       let str = JSONArray.toJSONString(list);
6.       this.msg = str;
7.     }

复制代码

17.CameraUtil 调起照相工具类(1.1.11+)

• picker 调起照相和录屏
  

1. let bufferImg = new ArrayBuffer(40960000);
2.     //调起拍照
3.     let res = await CameraUtil.picker();
4.     if (res.getSuccess()) {
5.       //此处只是举例操作
6.       let str = res.getDataRow().resultUri;
7.       let fileUriObject = new fileUri.FileUri(str);
8.       let name = fileUriObject.name;
9.       let file = fs.openSync(str, fs.OpenMode.READ_ONLY);
10.       fs.closeSync(file);
11.     }

复制代码

18.WinDialogUtil 以窗口方式弹出框工具类(1.1.12+)

• 入参先容
  

1.    efAlertOptions 弹出框入参实体
2.     options:{
3.         title:提醒标题默认为温馨提示,
4.         content:提示框内容,
5.         okText:确认文本默认为确认,
6.         cancelText:取消文本默认为取消,
7.         okCallBack:确认回调函数, //如果isAutoClose为false时,将返回当前弹窗的唯一编码winName,用于后续手动关闭
8.         cancelCallBack:取消回调函数,
9.         isAutoClose?: 是否自动关闭弹框默认为true(1.1.13+)
10.     }

复制代码

• 表现提示框(支持弹出多个1.1.13+)
  

1. 在需要显示的地方调用
2.     await WinDialogUtil.showAlert({
3.       title: 'ef温馨提示',
4.       content: '只设置了内容，其他都默认~~~~~',
5.       okCallBack:this.aes,
6.       cancelCallBack:this.testJSONObject
7.     });

复制代码

• 关闭提示框(支持用户选择是否自动关闭1.1.13+)
  

1.     点击确认和取消按钮均会自动关闭提示框
2.     自动调用时传入弹框id
3.     WinDialogUtil.closeAlert(winName);

复制代码

• 示例(弹出两个窗体)
  

1. Button('打开弹窗').margin({ top: 20 }).onClick(() => {
2.       //打开第一个弹窗
3.       this.openAlert();
4.     })
5.    
6.     //第一个弹窗方法
7.     async openAlert() {
8.       //此处需要特别注意,弹出多个弹窗时需要缓存this,否则内部弹窗的this指向将被覆盖
9.       let _that = this;
10.       await WinDialogUtil.showAlert({
11.         title: 'ef温馨提示',
12.         content: '只设置了内容，其他都默认~~~~~',
13.         isAutoClose: false,//设置为用户自己触发关闭弹窗
14.         okCallBack: (winName?: string) => {
15.           //winName为当前弹窗的名称
16.           _that.openAlertTwo(winName)
17.         },
18.         cancelCallBack: (winName?: string) => {
19.           _that.testJSONObject();
20.           if (winName) {
21.             //用户处理完业务需求后自行关闭弹窗
22.             WinDialogUtil.closeAlert(winName);
23.           }
24.         }
25.     });
26.    
27.     //打开第二个弹窗
28.     async openAlertTwo(winName?: string) {
29.       if (winName) {
30.         //将当前窗体名称存储在需要时关闭
31.         this.alertWinName = winName;
32.       }
33.       await WinDialogUtil.showAlert({
34.         title: '测试第二个弹框',
35.         content: '第二个弹框内容',
36.         okCallBack: () => {
37.           this.aes()
38.         },
39.         cancelCallBack: () => {
40.           this.testJSONArray()
41.         }
42.       });
43.     }
44.   
45.     //第二个弹窗的确认回调函数
46.     async aes() {
47.       let encode = await AES.encodeECB('123456', '4eS1Q15z1@TFTe%eEf23fGFZf)2Rs588');
48.       this.msg = encode.getDataRow();
49.       let decode = await AES.decodeECB(encode.getDataRow(), '4eS1Q15z1@TFTe%eEf23fGFZf)2Rs588');
50.       this.msg = decode.getDataRow();
51.       //关闭第一个窗体
52.       if (this.alertWinName) {
53.         WinDialogUtil.closeAlert(this.alertWinName);
54.       }
55.     }

复制代码

19.PreviewUtil 预览工具类(1.1.12+)

• previewTxt 预览文本
  

1. //拉起选择文件
2.     let result = await PickerUtil.selectFile();
3.     //判断是否成功
4.     if (result.getSuccess()) {
5.       let list = result.getDataTable();
6.       let item = list[0];
7.       await PreviewUtil.previewTxt(item);
8.     }

复制代码

• previewHtml 预览网页
  

1. //拉起选择文件
2.     let result = await PickerUtil.selectFile();
3.     //判断是否成功
4.     if (result.getSuccess()) {
5.       let list = result.getDataTable();
6.       let item = list[0];
7.       await PreviewUtil.previewHtml(item);
8.     }

复制代码

• previewImage 预览图片
  

1. //拉起选择文件
2.     let result = await PickerUtil.selectPhotoVideo();
3.     //判断是否成功
4.     if (result.getSuccess()) {
5.       let list = result.getDataTable();
6.       let item = list[0];
7.       await PreviewUtil.previewImage(item);
8.     }

复制代码

• previewVideo 预览视频
  

1. //拉起选择文件
2.     let result = await PickerUtil.selectPhotoVideo();
3.     //判断是否成功
4.     if (result.getSuccess()) {
5.       let list = result.getDataTable();
6.       let item = list[0];
7.       await PreviewUtil.previewVideo(item);
8.     }

复制代码

• previewAudio 预览音频
  

1. //拉起选择文件
2.     let result = await PickerUtil.selectAudio();
3.     //判断是否成功
4.     if (result.getSuccess()) {
5.       let list = result.getDataTable();
6.       let item = list[0];
7.       await PreviewUtil.previewAudio(item);
8.     }

复制代码

• canPreview 判定传入uri是否可以预览
  

1.   let res = await PreviewUtil.canPreview('http://124.71.72.144:8801/mbank/dist/121.gif');
2.   //res.success为true表示可以预览,否则为不可预览,注意预览的为文件uri地址,而非网络地址
3.   this.msg = res.getMsg();

复制代码

20.WinLoadingUtil 窗口方式全局弹框(1.1.13-rc.0+)

• ImgLayout 图片文字结构枚举
  

1. export enum ImgLayout {
2.   /**
3.    * 图片在文字上方
4.    */
5.   TOP,
6.   /**
7.    * 图片在文字下方
8.    */
9.   BOTTOM,
10.   /**
11.    * 图片在文字左侧
12.    */
13.   LEFT,
14.   /**
15.    * 图片在文字右侧
16.    */
17.   RIGHT
18. }

复制代码

• LoadingShape 弹框形状结构
  

1. export enum LoadingShape {
2.     /**
3.      * 正方形
4.      */
5.     SQUARE,
6.     /**
7.      * 矩形
8.      */
9.     RECTANGLE
10.   }

复制代码

• efLoadingOptions 窗口loading方式入参实体
  

1. @Observed
2.   export class efLoadingOptions {
3.     /**
4.      * 加载内容
5.      */
6.     @Track content: string = '';
7.     /**
8.      * loading位置
9.      */
10.     @Track position?: Alignment;
11.     /**
12.      * 图片布局方式
13.      */
14.     @Track imgLayout?: ImgLayout;
15.     /**
16.      * 弹框形状
17.      */
18.     @Track layoutShape?: LoadingShape;
19.   
20.     constructor() {
21.       this.content = '小的正在努力加载中...';
22.     }
23.   }

复制代码

• 打开弹窗
  

1.   WinLoadingUtil.showLoading(this.loadingOps);

复制代码

• 关闭弹窗
  

1. WinLoadingUtil.closeLoading();

复制代码

• 使用示例
  

2.   @State loadingOps: efLoadingOptions = new efLoadingOptions();
3.   //设置图片与文字排布方式
4.   this.loadingOps.imgLayout = ImgLayout.BOTTOM;
5.   //设置文字内容
6.   this.loadingOps.content = "小的努力加载" + this.count;
7.   //设置弹框垂直位置
8.   this.loadingOps.position = Alignment.Top;
9.   //设置弹框形状
10.   this.loadingOps.layoutShape = LoadingShape.SQUARE;
11.   //打开弹窗
12.   WinLoadingUtil.showLoading(this.loadingOps);
13.   //业务处理完后关闭，如请求接口成功后
14.   WinLoadingUtil.closeLoading();

复制代码

最后

有许多小伙伴不知道学习哪些鸿蒙开辟技术？不知道需要重点把握哪些鸿蒙应用开辟知识点？而且学习时频繁踩坑，终极浪费大量时间。以是有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 
点击领取→纯血版全套鸿蒙HarmonyOS学习资料（安全链接，放心点击）希望这一份鸿蒙学习资料能够给各人带来资助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！
这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开辟必把握的核心知识要点，内容包含了（ArkTS、ArkUI开辟组件、Stage模型、多端部署、分布式应用开辟、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、（南向驱动、嵌入式等）鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。
鸿蒙（HarmonyOS NEXT）最新学习门路

​
有了门路图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套体系性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开辟入门教学视频，内容包含：ArkTS、ArkUI、Web开辟、应用模型、资源分类…等知识点。
获取以上完整版高清学习门路，请点击→纯血版全套鸿蒙HarmonyOS学习资料
HarmonyOS Next 最新全套视频教程

​
《鸿蒙 (OpenHarmony)开辟根本到实战手册》
OpenHarmony北向、南向开辟环境搭建

​
《鸿蒙开辟根本》

• ArkTS语言
  
• 安装DevEco Studio
  
• 运用你的第一个ArkTS应用
  
• ArkUI声明式UI开辟
  
• .……
  
  ​
  

《鸿蒙开辟进阶》

• Stage模型入门
  
• 网络管理
  
• 数据管理
  
• 电话服务
  
• 分布式应用开辟
  
• 通知与窗口管理
  
• 多媒体技术
  
• 安全技能
  
• 任务管理
  
• WebGL
  
• 国际化开辟
  
• 应用测试
  
• DFX面向将来筹划
  
• 鸿蒙体系移植和裁剪定制
  
• ……
  

​
《鸿蒙进阶实战》

• ArkTS实践
  
• UIAbility应用
  
• 网络案例
  
• ……
  

​
大厂面试必问面试题

​
鸿蒙南向开辟技术

​
鸿蒙APP开辟必备

​
鸿蒙生态应用开辟白皮书V2.0PDF

​

请点击→纯血版全套鸿蒙HarmonyOS学习资料
总结
总的来说，华为鸿蒙不再兼容安卓，对中年步伐员来说是一个挑衅，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才华在这个厘革的期间中立于不败之地。 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。