关于Android类似qq和微信那种在桌面图标右上角更新数字的研究

本文记录了如何在Android桌面图标右上角显示更新数字,特别是针对华为、OPPO和VIVO等厂商的实现。通过研究QQ和微信的源码,发现它们使用了特定的API和Broadcast进行操作。例如,QQ的BadgeUtilImpl类提供了针对不同厂商的徽标设置方法,而微信则在com.tencent.mm.booter.notification包下的d类中找到相关代码。对于华为,使用ContentResolver调用特定URI改变徽标;OPPO则未能实现;VIVO可以通过特定Intent设置。
记录下这个需求的研究  写的超级随意  大家凑合看 不懂再问 一起探讨

因为我们的产品也需要有即时通讯了  消息更新不可避免  
首先 要实现这个功能  当然是要借助系统的Launcher。

而谷歌并没有开放出这个标准的接口或者方法  
于是各大厂商都对Launcher这块做了各自的改动,这也给第三方开发者想要统一处理这个需求加大了难度。
网上demo也有一些  大部分是通过发送广播的方式,来通知系统更新图标上的数字

 比如我之前在github上找到一个demoTestShortCut 就很不错, 针对三星(亲测)、索尼、小米   小米貌似在miui系统里已经内部处理了这种情况  发通知栏消息的时候 会自动加数字
/***
      * 三星手机:应用图标的快捷方式上加数字
      * @param context
      * @param num
      */
    public static void samsungShortCut(Context context, String num)
     {
        int numInt = Integer.valueOf(num);
        if (numInt < 1)
        {
          num = "0";
        }else if (numInt > 99){
            num = "99";
        }
          String activityName = getLaunchActivityName(context);
        Intent localIntent = new Intent("android.intent.action.BADGE_COUNT_UPDATE");
        localIntent.putExtra("badge_count", Integer.parseInt(num));
        localIntent.putExtra("badge_count_package_name", context.getPackageName());
        localIntent.putExtra("badge_count_class_name", activityName);
        context.sendBroadcast(localIntent);
     }

/***
      * 索尼手机:应用图标的快捷方式上加数字
      * @param context
      * @param num
      */
    public static void sonyShortCut(Context context, String num)
      {
        String activityName = getLaunchActivityName(context);
        if (activityName == null){
          return;
        }
        Intent localIntent = new Intent();
        int numInt = Integer.valueOf(num);
        boolean isShow = true;
        if (numInt < 1){
          num = "";
          isShow = false;
        }else if (numInt > 99){
            num = "99";
        }
<think>嗯,用户想用Vue2在H5页面PC网站里实现微信、微博QQ的分享功能。首先,我得回忆一下之前看过的资料。记得微信分享需要用到JS-SDK,而且得在微信浏览器里才能用。用户提到的引用里提到了使用weixin-js-sdk库,还有配置步骤。那首先,微信分享部分可能需要配置权限,获取签名之类的。 然后,微博QQ的分享可能不需要SDK,直接用他们的分享链接。比如,微博的分享链接是https://service.weibo.com/share/share.php,加上参数像urltitle。QQ的分享链接类似,用https://connect.qq.com/widget/shareqq/index.html,同样带参数。不过PCH5的处理方式可能不同,特别是H5可能需要调用移动端的API,或者直接跳转到对应的APP。 接下来,用户用的是Vue2,所以需要安装相关的依赖,比如weixin-js-sdk。然后在需要的页面引入,并进行配置。微信这边需要后端生成签名,前端通过接口获取配置信息。这里要确保安全,签名算法正确,避免跨域问题。 还有,微信的分享分为朋友朋友圈,可能需要不同的配置。另外,用户可能需要自定义分享的标题、描述图标,这些都需要在微信的配置里设置。微博QQ的分享可能更简单,直接构造URL,用window.open或者location.href跳转。 另外,要注意的是,微信的分享在非微信浏览器里可能不支持,所以可能需要提示用户在微信内打开。而PC端的分享可能直接打开新窗口,或者调用桌面端的应用,但具体实现可能移动端不同。需要分开处理H5PC的逻辑。 测试的时候可能会遇到签名无效的问题,这时候需要检查后端生成的签名是否正确,或者时间戳、nonceStr等参数是否匹配。还有URL的编码问题,比如需要当前页面的URL必须是encode过的,不能有#号后面的部分,可能需要用window.location.href.split('#')[0]来处理。 可能还需要处理动态路由的情况,比如Vue的路由是hash模式,这时候URL中的#会影响微信的签名验证,所以可能需要使用history模式,或者在后端处理URL时去掉#后面的部分。 还有,分享功能在SPA(单页应用)中,页面切换时是否需要重新配置微信的分享信息?可能需要监听路由变化,重新调用配置函数,或者在每个页面单独处理。 微博QQ的分享在移动端可能需要不同的处理,比如在微信内置浏览器中无法直接打开QQ,可能需要引导用户手动分享。或者使用更通用的方法,比如生成分享按钮,点击后弹出对应的分享对话框。 最后,用户可能需要兼容不同的平台,所以在代码里需要判断环境是移动还是PC,然后分别调用不同的分享方法。比如在mounted钩子中判断设备类型,执行对应的初始化操作。 总结步骤应该是:1. 微信分享配置,包括安装SDK、获取签名、设置分享内容;2. 微博QQ分享通过构造URL实现;3. 处理不同环境(H5PC)的适配;4. 测试调试常见问题,如签名错误、URL编码问题等。</think>### Vue2实现H5及PC端分享功能的分步指南 #### 一、微信分享功能实现 1. **安装依赖** ```bash npm install weixin-js-sdk ``` 2. **基础配置(Vue组件内)** ```javascript import wx from 'weixin-js-sdk' export default { mounted() { this.initWechatShare() }, methods: { async initWechatShare() { // 获取签名配置 const { appId, timestamp, nonceStr, signature } = await this.$http.get('/api/wechat-signature?url=' + encodeURIComponent(window.location.href.split('#')[0])) wx.config({ debug: false, // 生产环境关闭 appId, timestamp, nonceStr, signature, jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] }) } } } ``` 3. **设置分享内容** ```javascript wx.ready(() => { // 朋友分享 wx.updateAppMessageShareData({ title: '自定义标题', desc: '分享描述', link: window.location.href, imgUrl: 'https://example.com/icon.png' }) // 朋友圈分享 wx.updateTimelineShareData({ title: '朋友圈标题', link: window.location.href, imgUrl: 'https://example.com/icon.png' }) }) ``` #### 二、微博/QQ分享实现 1. **通用分享方法** ```javascript methods: { shareTo(type) { const urlMap = { weibo: `https://service.weibo.com/share/share.php?url=${encodeURIComponent(location.href)}&title=${document.title}`, qq: `https://connect.qq.com/widget/shareqq/index.html?url=${encodeURIComponent(location.href)}&title=${document.title}` } window.open(urlMap[type], '_blank', 'width=600,height=400') } } ``` 2. **H5与PC差异化处理** ```javascript getShareUrl(type) { const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) const baseUrl = { qq: isMobile ? 'mqq://' : 'https://connect.qq.com/', weibo: isMobile ? 'weibo://' : 'https://service.weibo.com/' } // 根据平台构造不同URL } ``` #### 三、核心注意事项 1. **微信签名验证** - 服务端需实现签名算法[^1] - URL必须使用当前页面完整地址(去除#号后内容) - 签名有效期7200秒,需及时刷新 2. **SPA路由处理** ```javascript watch: { $route() { this.initWechatShare() } } ``` 3. **错误处理** ```javascript wx.error(res => { console.error('微信配置失败:', res) // 可降级为默认分享样式 }) ``` ####
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值