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文件 

把如下代码复制替换即可

/**
 * interface.uts
 * uts插件接口定义文件，按规范定义接口文件可以在HBuilderX中更好的做到语法提示
 */
export interface Uni {
	/**
		* setBadgeNumber
		* @description
		* 修改鸿蒙系统桌面图标交表
		* @param {number}  badgeNumber
		* @param {SetBadgeNumberOptions}  options
		* @return {void}
		* @example
		 ```typescript
			uni.setBadgeNumber({});
		 ```
		*/
	setBadgeNumber(badgeNumber : number, options : SetBadgeNumberOptions) : void;
}

export type SetBadgeNumber = (options : SetBadgeNumberOptions) => void;
export type SetBadgeNumberSuccess = {
	/**
	 * 错误信息
	 */
	errMsg : string
};
export type SetBadgeNumberSuccessCallback = (result : SetBadgeNumberSuccess) => void;
export type SetBadgeNumberFail = {
	/**
	 * 错误信息
	 */
	errMsg : string
};
export type SetBadgeNumberFailCallback = (result : SetBadgeNumberFail) => void;
export type SetBadgeNumberComplete = {
	/**
	 * 错误信息
	 */
	errMsg : string
};
export type SetBadgeNumberCompleteCallback = (result : SetBadgeNumberComplete) => void;
export type SetBadgeNumberOptions = {
	/**
	 * 接口调用成功的回调函数
	 * @defaultValue null
	 */
	success ?: SetBadgeNumberSuccessCallback | null,
	/**
	 * 接口调用失败的回调函数
	 * @defaultValue null
	 */
	fail ?: SetBadgeNumberFailCallback | null,
	/**
	 * 接口调用结束的回调函数（调用成功、失败都会执行）
	 * @defaultValue null
	 */
	complete ?: SetBadgeNumberCompleteCallback | null
};

 3、新建index.uts文件

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

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

import {
	SetBadgeNumber,
	SetBadgeNumberOptions,
	SetBadgeNumberSuccess,
	SetBadgeNumberFail,
	SetBadgeNumberComplete
} from '../interface.uts'

export {
	SetBadgeNumber,
	SetBadgeNumberOptions,
	SetBadgeNumberSuccess,
	SetBadgeNumberFail,
	SetBadgeNumberComplete
}

import { notificationManager } from '@kit.NotificationKit';
import { BusinessError } from '@kit.BasicServicesKit';

export function setBadgeNumber(badgeNumber : number, options : SetBadgeNumberOptions) {
	let setBadgeNumberCallback = (err : BusinessError) : void => {
		if (err) {
			//设置角标失败
			let result : SetBadgeNumberFail = {
				errMsg: err.message ?? ""
			};
			let completeResult : SetBadgeNumberComplete = {
				errMsg: err.message ?? ""
			}
			options?.fail?.(result);
			options?.complete?.(completeResult);
			return;
		}
		// let pxx : number = devicePX2px(90);
		// console.log('----------------pxx', pxx)
		//设置角标成功	
		let result : SetBadgeNumberSuccess = {
			errMsg: "ok",
		};
		let completeResult : SetBadgeNumberComplete = {
			errMsg: "ok"
		}
		options?.success?.(result);
		options?.complete?.(completeResult);

	}
	notificationManager.setBadgeNumber(badgeNumber, setBadgeNumberCallback);
}

至此设置桌面图标角标已完成。

通过以下两种方式可在vue文件中使用。官方示例以及地址调用鸿蒙原生API | uni-app官网

方式一（挂载到uni全局对象） 推荐此种方式

<template>
	<view class="content">
		<button class="button" @click="setBadgeNumberBtn">设置桌面图标角标</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {
			setBadgeNumberBtn() {
				uni.setBadgeNumber(10,{
					success: (res) => {
						console.log('success: ', JSON.stringify(res));
					},
					fail: (err) => {
						console.error('fail: ', JSON.stringify(err));
					},
					complete: (res) => {
						console.log('complete: ', JSON.stringify(res));
					}
				});
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.button{
		width: 100%;
		margin: 10px;
	}
</style>

方式二（使用import引入） 

<template>
	<view class="content">
		<button class="button" @click="setBadgeNumberBtn">设置桌面图标角标</button>
	</view>
</template>

<script>
	import { setBadgeNumber } from "@/uni_modules/lp-setBadgeNumber"
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {
			setBadgeNumberBtn() {
				setBadgeNumber({
					success: (res : any) => {
						console.log('success: ', JSON.stringify(res));
					},
					fail: (err : any) => {
						console.error('fail: ', JSON.stringify(err));
					},
					complete: (res : any) => {
						console.log('complete: ', JSON.stringify(res));
					}
				});
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.button{
		width: 100%;
		margin: 10px;
	}
</style>