uniapp开发鸿蒙next应用设置桌面图标角标
近来在使用uniapp开发纯血鸿蒙应用，有一起的小同伴可以私信加好友进群有题目可以一起讨论，还是有很多地方必要学习，互帮相助！uniapp没有提供api直接修改桌面图标角标，所以必要本身编写uts插件调用鸿蒙next系统的api去修改桌面图标角标，下面详细介绍下操作以及代码。
一、uni-modules插件
1、新建插件
在uni_modules右键，选择新建uni_modules插件
https://i-blog.csdnimg.cn/direct/40da4425ee21422cb0f662c9c722f256.png
2、填写插件信息
插件名称：必须是xx-api名称格式，且不能使用uni开头，精确格式如：lp-setBadgeNumber
分类：选择UTS插件-API插件
点击创建即可创建插件成功。
https://i-blog.csdnimg.cn/direct/153574cd8a3e49be97d181e1fa982bf7.png
二、代码编写
1、修改package.json文件
如图在uni_modules下添加uni-ext-api节点，注意必须使用是uni节点，反面的api名称也无需填写前缀。
https://i-blog.csdnimg.cn/direct/8ace64150d804bbbb1ae9cc02d05cded.png
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。
https://i-blog.csdnimg.cn/direct/db3a6135d6a8419c87fcec632afee3e7.png
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>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]