微信JS-SDK 微信分享接口开发爬过的各种坑

白杨树 603次浏览

摘要: 最近项目中的网页需要通过微信分享朋友或朋友圈等功能,为了快速实现该功能效果,首先查看微信开发者平台文档,经过梳理发现开发流程如下

     最近项目中的网页需要通过微信分享朋友或朋友圈等功能,为了快速实现该功能效果,首先查看微信开发者平台文档,经过梳理发现开发流程如下

  • 绑定域名,配置“JS接口安全域名",配置IP白名单

  • 引入JS文件

//res.wx.qq.com/open/js/jweixin-1.2.0.js
  • 配置wxShare.js

    1518349565386510.png

  • 用户创建时间戳,随机字符串,当前需要分享的页面的url三个变量,接着将自己的appid和APPsecret作为请求参数获取access_token,再根据access_token获取jsapi_ticket,  然后将获取的jsapi_ticket,以及自己创建的三个变量进行签名,注意签名过程案按照 key 值 ASCII 码升序排序,可以直接使用官方sample的签名方法

    签名通过分享就自带图片和标题了,如果是正式生产环境需要考虑access_token,jsapi_ticket的持久化保存,


     因为在实际开发的时候,真的是不断的遇到问题,不断的去找答案。错误出现的话,是有一定顺序的,这对我们找原因有一定的帮助。首先是config fail这个说明签名出现错误了,可以借助签名验证工具 https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 排查问题,如果config ok,说明已成功。

     在实际工作中遇到了一种奇葩的问题,测试环境分享朋友圈和朋友都没有问题,到了线上却出现分享时有时没有图片的情况,经过烧脑的Debug过程发现原因如下:

       1、测试环境是一台服务器,线上是使用负载均衡的3台WEB服务器和一台脚本服务器,经过线上调试打印输出数据发现多次刷新有时候有输出调试数据有时候不输出调试数据,初步确定线上代码没同步
       2、保证代码同步的基础之上,线上3台服务器和一台脚本服务器的IP都要加入微信公众好的白名单中,否则获取不到微信的Access_token,签名会失败