Category Archives: 微信开发

分享网页到微信朋友圈时怎样才能带上缩略图和简介

分享网页到微信朋友圈时怎样才能带上缩略图和简介?首先这个事要分两种情况来讨论:

一、在微信浏览器内分享网页到朋微信友圈

这里还要再分2种情况-_-。

1.1、公众号文章

公众号文章指的就是那种直接在公众号后台「素材管理」中添加的文章(文章标题下面会有「日期」、「分类」、「公众号名称」等元素,文章末尾会有「阅读原文」链接、「阅读总数」、「点赞数」、「投诉」按钮和「精选留言」等元素)。这种文章被分享到朋友圈时,是可以显示缩略图的,也会显示标题,但是不会显示简介信息。

1.2、第三方页面

如果第三方页面未接入微信JSSDK或已接入但JSSDK调用失败,则只会显示默认缩略图和标题,不会显示简介。具体可以参考微信官方公众号「微信开发者账号」发布的这篇文章:《JSSDK自定义分享接口的策略调整》。不过需要注意的是,原文中说,如果未接入微信JSSDK或已接入但JSSDK调用失败,是会显示简介的。但是我实测是没有显示简介的。

二、在微信浏览器外分享页面到微信朋友圈

我测了下几个肯定没有针对微信jssdk进行处理的网页(比如我这个博客和一些其他带图片的PC端网页)。我是在iPhone 5s的Safari浏览器中打开页面的,通过浏览器自带的分享到微信朋友圈功能分享到微信朋友圈之后,朋友圈里这个分享卡片里会显示缩略图和标题(没有简介)。但是如果你点击朋友圈里的这个分享卡片后在打开的页面上再次进行分享到朋友圈操作,或者直接复制链接地址到聊天界面里发出去再点击发出去的链接后进行朋友圈分享,看到的就又是带默认缩略图和标题(不带简介)的分享卡片了。

目测,有些通过第三方分享工具分享到微信朋友圈会带缩略图是因为那些第三方分享工具可能使用了(猜测)微信开放平台的API。具体可参考:微信开放平台=>资源中心=>移动应用=>分享与收藏功能。所以同一个网页,通过有些第三方分享工具分享就能显示缩略图,而我们自己在微信浏览器内进行分享就不会显示缩略图了。

微信内H5调起支付

一个微商城的项目,前端用的是vue.js,涉及到微信支付的前端代码大概是这样子的:

这里的【微信内H5调起支付】的官网参考文档地址为https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6&pass_ticket=EiPbYJmbbMTWltjRY8XQq5dwQ4DbztpbsIE0i11BE6JDeykgQ3arpgnA55tR3RZC

大体的支付流程:

  1. 前端用送货单id和openid从后台获取支付信息(后台通过请求统一制服下单接口获取这些信息);
  2. 前端根据支付信息采用【微信内H5调起支付】的方式进行微信支付,支付成功后修改送货单状态为【支付中】;
  3. 后端回调根据微信返回信息作判断,只有送货单状态为【支付中】时进行状态更新,将送货单的状态更新为【已支付】或【未支付】。
  4. 后续在管理平台上增加一个操作,对【支付中】的送货单,可以手动查询送货单状态。

这里说点前端碰到的问题,就是支付时微信提示【当前页面的URL未注册:http://www.example.com/a/b/c/d/index.html#/home/index】,然而在微信公众号平台上配置的支付目录已经是【http://www.example.com/a/b/c/d/】(末尾有个斜杠),并无错误。联想到以前在公司项目里写过类似的代码但是没有问题,但是那个项目是在微信菜单上的地址是那种微信跳转地址,而且自己另外试了下发现只要我的项目地址index.html后面加上一些随便什么都行的查询参数就可以支付了,于是让修改微信菜单地址为index.html后面加上一些随意的查询参数(不走微信跳转,每次都走影响访问速度,只在本地没有用户openid时由js发起页面跳转,跳到微信跳转地址上以便获得code进而查询openid)。这样修改后页面就能正常进行微信支付了。成功的原因,目测应该是http://www.example.com/a/b/c/d/index.html#/home/index这样的地址里,可能微信会把锚后面的斜杠这些都作为路径进行识别,导致与我们配置的支付目录不一致,从而无法成功支付。加上问号后,微信不再将问号后面的部分视为路径,从而可以成功支付。