uniapp开发鸿蒙next应用设置桌面图标角标

        近来在使用uniapp开发纯血鸿蒙应用，有一起的小同伴可以私信加好友进群有题目可以一起讨论，还是有很多地方必要学习，互帮相助！
        uniapp没有提供api直接修改桌面图标角标，所以必要本身编写uts插件调用鸿蒙next系统的api去修改桌面图标角标，下面详细介绍下操作以及代码。
一、uni-modules插件

1、新建插件

在uni_modules右键，选择新建uni_modules插件

2、填写插件信息

插件名称：必须是xx-api名称格式，且不能使用uni开头，精确格式如：lp-setBadgeNumber
分类：选择UTS插件-API插件
点击创建即可创建插件成功。

 
二、代码编写

1、修改package.json文件

如图在uni_modules下添加uni-ext-api节点，注意必须使用是uni节点，反面的api名称也无需填写前缀。

  2、修改interface.uts文件 

把如下代码复制更换即可

1. /**
2. * interface.uts
3. * uts插件接口定义文件，按规范定义接口文件可以在HBuilderX中更好的做到语法提示
4. */
5. export interface Uni {
6.         /**
7.                 * setBadgeNumber
8.                 * @description
9.                 * 修改鸿蒙系统桌面图标交表
10.                 * @param {number}  badgeNumber
11.                 * @param {SetBadgeNumberOptions}  options
12.                 * @return {void}
13.                 * @example
14.                  ```typescript
15.                         uni.setBadgeNumber({});
16.                  ```
17.                 */
18.         setBadgeNumber(badgeNumber : number, options : SetBadgeNumberOptions) : void;
19. }
21. export type SetBadgeNumber = (options : SetBadgeNumberOptions) => void;
22. export type SetBadgeNumberSuccess = {
23.         /**
24.          * 错误信息
25.          */
26.         errMsg : string
27. };
28. export type SetBadgeNumberSuccessCallback = (result : SetBadgeNumberSuccess) => void;
29. export type SetBadgeNumberFail = {
30.         /**
31.          * 错误信息
32.          */
33.         errMsg : string
34. };
35. export type SetBadgeNumberFailCallback = (result : SetBadgeNumberFail) => void;
36. export type SetBadgeNumberComplete = {
37.         /**
38.          * 错误信息
39.          */
40.         errMsg : string
41. };
42. export type SetBadgeNumberCompleteCallback = (result : SetBadgeNumberComplete) => void;
43. export type SetBadgeNumberOptions = {
44.         /**
45.          * 接口调用成功的回调函数
46.          * @defaultValue null
47.          */
48.         success ?: SetBadgeNumberSuccessCallback | null,
49.         /**
50.          * 接口调用失败的回调函数
51.          * @defaultValue null
52.          */
53.         fail ?: SetBadgeNumberFailCallback | null,
54.         /**
55.          * 接口调用结束的回调函数（调用成功、失败都会执行）
56.          * @defaultValue null
57.          */
58.         complete ?: SetBadgeNumberCompleteCallback | null
59. };

复制代码

 3、新建index.uts文件

在utssdk文件下新建目录，目录名称固定为app-harmony，然后再在app-harmony下新建uts文件，命名固定为index。

index.uts文件将下面代码复制黏贴即可

1. import {
2.         SetBadgeNumber,
3.         SetBadgeNumberOptions,
4.         SetBadgeNumberSuccess,
5.         SetBadgeNumberFail,
6.         SetBadgeNumberComplete
7. } from '../interface.uts'
9. export {
10.         SetBadgeNumber,
11.         SetBadgeNumberOptions,
12.         SetBadgeNumberSuccess,
13.         SetBadgeNumberFail,
14.         SetBadgeNumberComplete
15. }
17. import { notificationManager } from '@kit.NotificationKit';
18. import { BusinessError } from '@kit.BasicServicesKit';
20. export function setBadgeNumber(badgeNumber : number, options : SetBadgeNumberOptions) {
21.         let setBadgeNumberCallback = (err : BusinessError) : void => {
22.                 if (err) {
23.                         //设置角标失败
24.                         let result : SetBadgeNumberFail = {
25.                                 errMsg: err.message ?? ""
26.                         };
27.                         let completeResult : SetBadgeNumberComplete = {
28.                                 errMsg: err.message ?? ""
29.                         }
30.                         options?.fail?.(result);
31.                         options?.complete?.(completeResult);
32.                         return;
33.                 }
34.                 // let pxx : number = devicePX2px(90);
35.                 // console.log('----------------pxx', pxx)
36.                 //设置角标成功       
37.                 let result : SetBadgeNumberSuccess = {
38.                         errMsg: "ok",
39.                 };
40.                 let completeResult : SetBadgeNumberComplete = {
41.                         errMsg: "ok"
42.                 }
43.                 options?.success?.(result);
44.                 options?.complete?.(completeResult);
46.         }
47.         notificationManager.setBadgeNumber(badgeNumber, setBadgeNumberCallback);
48. }

复制代码

至此设置桌面图标角标已完成。
通过以下两种方式可在vue文件中使用。官方示例以及地址调用鸿蒙原生API | uni-app官网
方式一（挂载到uni全局对象） 保举此种方式

1. <template>
2.         <view class="content">
3.                 <button class="button" @click="setBadgeNumberBtn">设置桌面图标角标</button>
4.         </view>
5. </template>
7. <script>
8.         export default {
9.                 data() {
10.                         return {
12.                         }
13.                 },
14.                 onLoad() {
16.                 },
17.                 methods: {
18.                         setBadgeNumberBtn() {
19.                                 uni.setBadgeNumber(10,{
20.                                         success: (res) => {
21.                                                 console.log('success: ', JSON.stringify(res));
22.                                         },
23.                                         fail: (err) => {
24.                                                 console.error('fail: ', JSON.stringify(err));
25.                                         },
26.                                         complete: (res) => {
27.                                                 console.log('complete: ', JSON.stringify(res));
28.                                         }
29.                                 });
30.                         }
31.                 }
32.         }
33. </script>
35. <style>
36.         .content {
37.                 display: flex;
38.                 flex-direction: column;
39.                 align-items: center;
40.                 justify-content: center;
41.         }
42.        
43.         .button{
44.                 width: 100%;
45.                 margin: 10px;
46.         }
47. </style>

复制代码

方式二（使用import引入） 

1. <template>
2.         <view class="content">
3.                 <button class="button" @click="setBadgeNumberBtn">设置桌面图标角标</button>
4.         </view>
5. </template>
7. <script>
8.         import { setBadgeNumber } from "@/uni_modules/lp-setBadgeNumber"
9.         export default {
10.                 data() {
11.                         return {
13.                         }
14.                 },
15.                 onLoad() {
17.                 },
18.                 methods: {
19.                         setBadgeNumberBtn() {
20.                                 setBadgeNumber({
21.                                         success: (res : any) => {
22.                                                 console.log('success: ', JSON.stringify(res));
23.                                         },
24.                                         fail: (err : any) => {
25.                                                 console.error('fail: ', JSON.stringify(err));
26.                                         },
27.                                         complete: (res : any) => {
28.                                                 console.log('complete: ', JSON.stringify(res));
29.                                         }
30.                                 });
31.                         }
32.                 }
33.         }
34. </script>
36. <style>
37.         .content {
38.                 display: flex;
39.                 flex-direction: column;
40.                 align-items: center;
41.                 justify-content: center;
42.         }
43.         .button{
44.                 width: 100%;
45.                 margin: 10px;
46.         }
47. </style>

复制代码

 
 

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