跨平台应用开发进阶(十二) ：uni-app 实现应用桌面图标角标提示及应用跳转_uniapp桌面角标

后话

---

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。

2. 清空 `JPush` 服务器中存储的 `badge` 值，即 [`setBadge:0`]，接口如下：

(void)resetBadge

##### 2.1.3 华为角标


**支持的版本**  
 开始支持的版本：3.3.6


**客户端配置**  
 华为手机 EMUI 8.0 及以上支持数字角标展示，需要在 `AndroidManifest.xml` 里配置华为指定的权限 ：

**服务端设置**  
 完成客户端配置后，服务端推送时设置 `badge_add_num` 和 `badge_class` 字段，则可显示角标。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/3927c1c6562c4f4bb46eb46c45f17bc7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATm8gU2lsdmVyIEJ1bGxldA==,size_20,color_FFFFFF,t_70,g_se,x_16)

//服务端发送 json 消息串
{
“notification”: {
“android”: {
“alert”: “hello, JPush!”,
“badge_add_num”: 1, //角标增加值，取值范围1-99
“badge_class”: “com.test.badge.MainActivity”, //默认为 APP 的主 Activity
}
}
}

**清除角标**  
 点击通知时，客户端需要手动清除角标数：


**接口定义**

public static void setBadgeNumber(Context context, int num)

**参数说明**


* `context` 是应用的 `ApplicationContext`；
* `num` 新的角标数字，传入负数将会修正为0；  
 示例如下：

JPushInterface.setBadgeNumber(this,0);

##### 2.1.4 小米角标


小米 MIUI 6 及以上设备支持数字角标，小米系统自动处理数字角标展示功能，默认收到通知+1处理，打开 App 清零。


##### 2.1.5 vivo 角标


vivo 设备仅支持走极光通道时可以显示角标。


**支持版本**  
 开始支持的版本：4.4.5


**客户端配置**


1. vivo 需要在 `AndroidManifest.xml` 里配置指定的权限：

2. “桌面图标角标”默认关闭，需要用户手动开启。


开启路径：`“设置”-“通知与状态栏”-“应用通知管理”-应用名称-“桌面图标角标”`。  
 未成功接入“桌面图标角标”的应用，无“桌面图标角标”选项。  
 视OS版本差异，“桌面图标角标”名称可能为“应用图标标记”或“桌面角标”。


3. 只有走极光通道，有 `onNotificationArrived` 回调的前提下，角标才可生效。


**服务端设置**  
 完成客户端配置后，服务端推送时设置 `badge_add_num` 和 `badge_class` 字段，则可显示角标。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/49f5d20aca8b4c8a8693598577c4e1eb.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATm8gU2lsdmVyIEJ1bGxldA==,size_20,color_FFFFFF,t_70,g_se,x_16)

//服务端发送 json 消息串
{
“notification”: {
“android”: {
“alert”: “hello, JPush!”,
“badge_add_num”: 1, //角标增加值，取值范围1-99
“badge_class”: “com.test.badge.MainActivity”, //默认为 APP 的主 Activity
}
}
}

**清除角标**  
 点击通知时，客户端需要手动清除角标数：


**接口定义**

public static void setBadgeNumber(Context context, int num)

**参数说明**


* `context` 是应用的 `ApplicationContext`;
* `num` 新的角标数字，传入负数将会修正为0;  
 示例如下：

JPushInterface.setBadgeNumber(this,0);

#### 2.2 H5+实现


应用H5+可以实现应用角标数字显示，但是需要在应用内业务逻辑实现，对于用户应用未打开应用场景不支持。


鉴于`uni-app` **App** 端内置 `HTML5+` 引擎，让 `js` 可以直接调用丰富的原生能力。应用H5+ API `plus.runtime.setBadgeNumber`方法可实现应用角标数字展示效果。

plus.runtime.setBadgeNumber(8,{
title:‘推送消息’,
content:‘消息内容’
});

应用示例如下：

// 设置数字
function setBadge() {
plus.runtime.setBadgeNumber(8);
}
// 清除数字
function clearBadge() {
plus.runtime.setBadgeNumber(0);
}

接口文档如下：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/df3686715d084ec28342e890b197ad8b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATm8gU2lsdmVyIEJ1bGxldA==,size_20,color_FFFFFF,t_70,g_se,x_16)  
 注意⚠️：



> 
> 1. 平台支持方面，支持`Android 2.2+`，但是目前仅支持小米(`MIUI6`及以上)和华为设备，其它设备调用后无任何效果； `HBuilderX2.9.9+`版本支持VIVO设备。
> 2. 支持`iOS 4.3+` ，且应用需开启“`Push Notifications`”服务才生效。
> 
> 
> 


### 三、遇到的问题及解决措施


在应用极光官网推荐的`JPushInterface.setBadgeNumber(this,0);`接口清除角标时，由于本项目使用的极光推送官方支持的 `Hbuilder` 插件（`Android & iOS`）`jpush-hbuilder-plugin` ，并不支持以上类接口，报方法未定义。


顾舍弃以上实现方法，通过阅读`jpush-hbuilder-plugin`[插件文档](https://bbs.csdn.net/topics/618166371)获悉，该`Hbuilder`插件提供了`setBadge(number)`接口实现角标设置，不过该接口为设置JPush服务器端角标，用于解决服务端不清楚客户端原来已经存在角标问题。


综上所述，前端角标推送正确逻辑应该是：



> 
> 后台推送过来角标信息–>前端通过点击未读事件，设置未读数量返回给后台–>后台再推送给前台新的角标信息
> 
> 
> 



> 
> 注意⚠️：该接口目前只支持**华为**设备！其他设备需另找解决方案。
> 
> 
> 


![在这里插入图片描述](https://img-blog.csdnimg.cn/17862ae263a64fdca288c5d15af62fac.png)


### 四、拓展阅读


* [plus.runtime.setBadgeNumber API文档](https://bbs.csdn.net/topics/618166371)
**前端资料汇总**

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/6e0ba223f65e063db5b1b4b6aa26129a.png)



我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。



更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。