微信中页面二次分享小图标丢失问题
长按二维码,关注我们
每天踩点坑,每天成长一点点,这样工作才会变得有趣。微信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可以借助于微信实现一些高级功能,并且也有我想要的分享功能自定义内容,如图:
如何去使用的话有详细的文档,我这边也不做过多的讲解,大概的讲解下步骤,首先你需要有一个公众号,在公众号的功能设置-JS接口安全域名里面绑定自己分享网页的域名,如下图:
完了之后在页面引入微信的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》
更多技术分享请加我微信,我拉你进群进行交流:
微信中页面二次分享小图标丢失问题相关推荐
- 解决微信公众号二次分享的BUG记录
公众号页面二次分享分享会丢失自定义的图片和标题:以下是整个过程的记录------ 修改前的代码 $(function () {shareInit();})//分享初始化function shareIn ...
- php内li背景色,CSS_css中ul li的背景小图标属性设置的两种情况,这里我们分两种情况列出: ① - phpStudy...
css中ul li的背景小图标属性设置的两种情况 这里我们分两种情况列出: ①当标题前的图标是很长的一绺而不是单独的一个点或者类似图标时,在定义背景图background要定义在 里.因为很长,所以放 ...
- 微信二次分享解决图标文案失效方案
转自:https://www.cnblogs.com/backtozero/p/7064247.html 前言 刚进入一家新公司,接到的第一个任务就是需要需要自定义微信分享的效果(自定义缩略图,标题, ...
- Vant 库中如何给 List 列表组件的 cell 中左右两边来添加小图标?
Ⅰ.问题描述: 1.Vant 中 List 列表的使用是方便且常用的,但如何给 List 组件中添加小图标而达到想要的效果呢? 2.图例展示: 其一.想要在 Vant 的 List 组件右边添加 播放 ...
- 第三方网站接入微信JS-SDK的分享自定义设置,微信分享小图标以及标题
首先这个坑是工作遇到的问题,正好需要分享链接有小图,于是各种百度,发现这里第三方网址需要接入微信的东西,才能正常的显示出小图等. 对于想了解如何操作的,觉得我的博客看不太懂的,可以参考 慕课网-微信相 ...
- 微信分享自定义:标题、内容、小图标
注意:实现此功能需要做的准备工作. (1:):准备一个认证过的微信公众号. (2):登录微信公众后台配置ip白名单,添加域名. (3):获取公众号的app_id和app_secret 1. 在要分享的 ...
- 如何在微信小程序中生成二维码:一个最简单的案例就让你明白
使用weapp.qrcode.js 在 微信小程序 中,快速生成二维码 一.效果 二.具体步骤.代码 下载weapp-qrcode代码 然后 将 dist 目录下的weapp.qrcode.esm.j ...
- 微信二次分享解决方案
最近项目中开发需要在微信端二次分享分享H5页面,但是第一次分享的时候安卓没有问题,ios有时成功有时失败,并且二次分享的时候安卓还是没有问题,ios一次成功都没有,后来查阅文档搜索资料终于解决了,一下 ...
- 小程序指定页面二维码生成
小程序生成指定页面二维码 小程序生成海报分享传播,需要生成分享页面的二维码,用户扫描这个二维码即可进入分享的这个小程序页面,对于分享者更具有指向性:也可生成"太阳码"参阅太阳码生成 ...
最新文章
- python pdb 基础调试
- 如何利用Gephi可视化浏览的网站关系
- iAD靠什么吸引用户打开这个应用?
- ppwjs之bootstrap文字排版:排版常量
- 从程序员到架构师的最佳技术成长之路
- Py之imgaug:Python库之imgaug简介、安装、使用方法之详细攻略
- 只允许运行一个实例的方法
- 子窗体菜单合并到父窗体菜单的解决办法
- 2019年知乎已发布两款App:短视频“即影”和男生种草“CHAO”
- mysql导入库排除某个表_mysql导入数据排除表-mysql导入数据排除某张表或多张表-吾爱编程网...
- 该学Java或.NET?
- Tomcat启动Maven项目异常:java.lang.NoClassDefFoundError: org/springframework/context/ApplicationContext
- 《商务新星.NET 4.0》发布说明
- webrtc研究资源摘录
- Science观点:不同细菌物种间极少合作—合理利用细菌间普遍存在的竞争关系来替代抗生素...
- 什么是抗攻击服务器?抗攻击服务器是如何防御攻击的?
- less函数的使用 c语言,less即学即用
- PCB如何打上自己的logo
- 分布式处理系统服务器配置,分布式解决方案
- 2O19 江大计算机有调剂,江南大学2019年考研调剂公告