微信中页面二次分享小图标丢失问题

每天踩点坑,每天成长一点点,这样工作才会变得有趣。微信JSSDK踩坑记录。

在我们有房APP1.1的版本中增加了房产资讯的功能,昨天晚上有同事在群里反馈从APP中分享的资讯到微信中,然后再次分享出去的时候标题和小图标不见了,见下图:

图标问题展示页面

标题的问题比较简单,只需要在title标签中把文章的标题添加进去就行,这个小图标就麻烦了,花了一整天的时间去踩这个坑。

刚开始在网上找了些资料,说在body下面增加一个图片,隐藏起来就可以了,微信会默认选取网页中第一张图片作为小图标,试了几次发现不行呀,分享到QQ中倒是这个逻辑,估计是很早之前的逻辑吧。

发现这个逻辑行不通之后我开始从别的产品上下手,我在今日头条上分享了一篇文章到朋友圈,然后点击进去,进行二次分享,别人的网页居然可以,小图标还存在,于是我查看了下这个网页的代码,终于找到了对眼的代码,还有注释,应该不会错。

主要代码如下:

var userAgent = navigator.userAgent.toLowerCase();
if (/micromessenger/.test(userAgent)) {
// 微信分享
function shareFriend() {
   WeixinJSBridge.invoke('sendAppMessage', {
       "appid": appid,
       "img_url": imgUrl,
       "img_width": "200",
       "img_height": "200",
       "link": articleUrl,
       "desc": descContent,
       "title": shareTitle
   }, function (res) {
   })
}
     
function shareTimeline() {
   WeixinJSBridge.invoke('shareTimeline', {
       "img_url": imgUrl,
       "img_width": "200",
       "img_height": "200",
       "link": articleUrl,
       "desc": descContent,
       "title": shareTitle
   }, function (res) {
   });
}
     
function shareWeibo() {
   WeixinJSBridge.invoke('shareWeibo', {
       "content": descContent,
       "url": articleUrl,
   }, function (res) {
   });
}
     
// 当微信内置浏览器完成内部初始化后会触发WeixinJSBridgeReady事件。
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
   // 发送给好友
   WeixinJSBridge.on('menu:share:appmessage', function (argv) {
       shareFriend();
   });
         
   // 分享到朋友圈
   WeixinJSBridge.on('menu:share:timeline', function (argv) {
       shareTimeline();
   });
         
   // 分享到微博
   WeixinJSBridge.on('menu:share:weibo', function (argv) {
       shareWeibo();
   });
}, false);

判断浏览器是微信内置的浏览器后,通过WeixinJSBridge绑定菜单事件,设置分享的图标等信息。看起来很简单,WeixinJSBridge也是微信的实现,在别人那里是好的,我这里就不行,怀疑人生啊。

最后没办法,只能去微信公众平台开发文档上去找解决方案啦,在微信公众平台技术文档中 https://mp.weixin.qq.com/wiki 找到了微信JS-SDK说明文档。

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。

通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。

看了上面的介绍就知道,用这个JS-SDK可以借助于微信实现一些高级功能,并且也有我想要的分享功能自定义内容,如图:

屏幕快照 2018-05-08 09.53.22 PM.png

如何去使用的话有详细的文档,我这边也不做过多的讲解,大概的讲解下步骤,首先你需要有一个公众号,在公众号的功能设置-JS接口安全域名里面绑定自己分享网页的域名,如下图:

屏幕快照 2018-05-08 09.56.04 PM.png

完了之后在页面引入微信的js文件:http://res.wx.qq.com/open/js/jweixin-1.2.0.js

进行认证操作,代码如下:

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '', // 必填,公众号的唯一标识
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名
    jsApiList: [] // 必填,需要使用的JS接口列表
});

关键是这些认证信息怎么获取啊?在文档最后-附录6-DEMO页面和示例代码中把示列代码下载一下,里面有各种语言签名的示例,Java签名方法如下:

public static Map<String, String> sign(String jsapi_ticket, String url) {
  // .....
}

通过传入jsapi_ticket和url(也就是你分享网页的地址)去签名,然后就可以得到config需要认证的信息,有下面这些:

 ret.put("url", url);
 ret.put("jsapi_ticket", jsapi_ticket);
 ret.put("nonceStr", nonce_str);
 ret.put("timestamp", timestamp);
 ret.put("signature", signature);

比较麻烦的是jsapi_ticket需要通过微信的access_token去获取,有效期为7200秒,同样access_token的获取需要公众号的appid和secret,同样也是有效期为7200秒,所以官方建议每个用户全局缓存这2个值,避免频繁申请,导致账号不可用。

还有一个参数是签名的url,也就是分享网页的url,这个你可以通过HttpServletRequest拼接出当前访问的地址,因为分享后微信会再url后面增加参数,所以需要动态去拼接,代码如下:

StringBuilder params = new StringBuilder("你的域名");
params.append(request.getRequestURI());
params.append("?");
Enumeration<String> names = request.getParameterNames();
while (names.hasMoreElements()) {
    String name = (String) names.nextElement();    
    params.append(name).append("=").append(request.getParameter(name)).append("&");
}
params.delete(params.length() - 1, params.length());

大致的流程就是当用户请求分享的网页,就进入后台的Controller中,这个时候我们可以执行签名操作,然后将签名信息返回到页面中,页面中进行认证,然后自定义分享内容,代码如下:

wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: appid, // 必填,公众号的唯一标识
    timestamp: timestamp, // 必填,生成签名的时间戳
    nonceStr: nonceStr, // 必填,生成签名的随机串
    signature: signature,// 必填,签名
    jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage","onMenuShareQQ"] // 必填,需要使用的JS接口列表
});
wx.ready(function(){
    wx.onMenuShareTimeline({
        title: shareTitle, // 分享标题
        link: location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: imgUrl, // 分享图标
        success: function () {
            // 用户确认分享后执行的回调函数
        },
        fail: function (res) {
        }
    });
    wx.onMenuShareAppMessage({
        title: shareTitle, // 分享标题
        desc: descContent, // 分享描述
        link: location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: imgUrl, // 分享图标
        type: 'link', // 分享类型,music、video或link,不填默认为link
        success: function () {
        // 用户确认分享后执行的回调函数
        },
        cancel: function () {
        // 用户取消分享后执行的回调函数
        },
        fail: function (res) {
        }
    });
});

特别注意的是link: location.href

花费时间最多的就是在这边,图标一直出不来的原因是这边的地址需要和后台签名的地址一模一样,之前我也是通过固定的地址加参数拼的,比如:http://cxytiandi.com/article/文章ID这样去弄的,上面也说过了,微信会再后面追加参数,导致了两边不一致,所以这边直接用location.href就可以了。

推荐阅读:

  • 《Spring Boot 使用WebAsyncTask异步返回结果》
  • 《房价网是怎么使用分布式作业框架elastic-job》

原文发布于微信公众号 - 猿天地(cxytiandi)

原文发表时间:2018-05-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏成猿之路

几分钟几张图教你学会如何使用UML

很多初次接触UML的朋友们可能会感觉它各种各样的线条、关系、描述等晦涩难懂。本篇文章简单介绍了一下其中几个图,用最朴实的语言结合上图片来让你一眼就能理解他们,如...

1003
来自专栏BeJavaGod

你去看源码啊!问我干撒子哟?

我记得很多年前,在很多次的开发过程中都会碰到各种各样的问题,然后去请教老司机,当然了老司机中也有年轻的司机和老油条,有人会细心跟你讲你所遇到的问题,有的会干脆直...

3605
来自专栏全栈工程师成长之路

全栈开发自学路线

这里筑梦师,是一名正在努力学习的iOS开发工程师,目前致力于全栈方向的学习,希望可以和大家一起交流技术,共同进步,用简书记录下自己的学习历程.

85613
来自专栏FSociety

Python爬取猫眼「碟中谍」全部评论

昨天晚上看完碟中谍后,有点小激动,然后就有了这片文章。 我们将猫眼上碟中谍的全部评论保存下来,用于后期分析~ 总共评论3W条左右。

2663
来自专栏小白课代表

软件分享 | C4D R18 安装教程

1723
来自专栏web前端教室

WEB前端架构(三)

先跟关注我的各位说声抱歉,快一周没更新了。 实在是因为太忙了,最近周末在忙装修的事,周内又要加班。 因为是新公司嘛,本来就忙,三天前又被临时抓去写一个手机微信上...

20710
来自专栏编舟记

怎样才算学会PythonPython 实践基础

假如你已经有了编程基础,那么学习一门新语言的困难点绝对不在语法、语义和风格等代码层面上的,而在于语言范式(OO,FP还是Logic),语言的生态(如:依赖管理和...

1642
来自专栏魏琼东

MIS系统开发利器,快速的字典录入解决方案,另类的、可管理的.NET DataWindow

一、前言      AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速...

2266
来自专栏小白课代表

软件分享 | C4D R15 安装教程

1743
来自专栏FHADMIN

java Activiti6 工作流引擎 websocket 即时聊天 SSM源码 支持手机即时通讯聊天

博文来源:http://www.fhadmin.org/webnewsdetail1.html

8721

扫码关注云+社区

领取腾讯云代金券