微信分享图标设置，以及wx.config配置

最近公司要求我做一个关于页面分享微信显示小图和描述的功能，由于之前没有做过，所以说是从零开始，看jssdk说明文档，网上搜索各种资料，甚至连三四年前的内容都搜索出来了，也试过以前的简单方法，包括在页面设置一个隐藏的图片，宽高都是300像素，微信就会抓取这张图片做为分享图片，但经本人测试无法使用，后来查到了原因，是微信对自定义分享内容作了限制，于是最终还是得回到配置wx.config上来。

1 2 3 4 5 6 7 8 9 10 11

wx.config({                  debug:  false ,  // 开启调试模式,调用的所有api的返回值会在客户端alert出来                  appId: data.configMap.appId,  // 必填，公众号的唯一标识                  timestamp: data.configMap.timestamp,  // 必填，生成签名的时间戳                  nonceStr: data.configMap.nonceStr,  // 必填，生成签名的随机串                  signature: data.configMap.signature, // 必填，签名，见附录1                  jsApiList: [                      "onMenuShareTimeline" , //分享朋友圈接口                      "onMenuShareAppMessage" //分享给朋友接口                  ]  // 必填，需要使用的JS接口列表，所有JS接口列表见附录2              });

　　测试的时候最好将debug设置为true，这样可以在手机微信测试页面的时候查看到出错的地方，有四个参数，appId，timestame，nonceStr，signature是由后台给你提供，具体的后台怎样实现这里不多做解释，百度搜索和微信官方都有提供，

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

var  link = location.href; $.ajax({          url: "your_url" , //后台给你提供的接口          type: "GET" ,          data:{ "url" :link},          async: true ,          dataType: "json" ,          success:function (data){              wx.config({                  debug:  false ,  // 开启调试模式,调用的所有api的返回值会在客户端alert出来                  appId: data.configMap.appId,  // 必填，公众号的唯一标识                  timestamp: data.configMap.timestamp,  // 必填，生成签名的时间戳                  nonceStr: data.configMap.nonceStr,  // 必填，生成签名的随机串                  signature: data.configMap.signature, // 必填，签名，见附录1                  jsApiList: [                      "onMenuShareTimeline" ,                      "onMenuShareAppMessage"                  ]  // 必填，需要使用的JS接口列表，所有JS接口列表见附录2              });              wx.error(function (res) {                  alert(res);              });          },          error:function (error){              alert(error)          }      });

　　注意，在这里请求四个参数的时候，需要将页面的url（不包括#以及后面的内容）传给后台，这一步比较重要。

在这里之前犯了个错误，async，请求是否异步的时候，我写的是false，也就是同步，结果导致页面在ios系统分享不了，有时候能分享但没有图片显示，但是在安卓系统就可以正常显示和分享，后来改为true之后就ok了。

这是后台返回的参数，

jsApiList里面的参数是调用的接口列表数组，分享到朋友圈和分享给朋友时必须写上以上两个参数，onMenuShareTimeline 和 onMenuShareAppMessage，

测试的时候如果有哪个参数不正确，就会弹出对应的错误信息，之前没有传url的时候，报的是signature错误，也就是签名错误。

当参数都正确的时候，打开了调试时在微信客户端打开会弹出：errMsg:config:ok!

当wx.config()成功之后，wx.ready()方法就可以调用了，这时候就是设置一些分享时的图片，标题，以及描述信息了，这个都很简单，根据需要填写。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

wx.ready(function(res) {          wx.onMenuShareAppMessage({              title: document.title,              desc:document.title,              link: link,              imgUrl: Imgurl,              trigger: function(res) {},              success: function(res) {},              cancel: function(res) {},              fail: function(res) {}          });          wx.onMenuShareTimeline({              title: document.title,              link: link,              imgUrl: Imgurl,              trigger: function(res) {},              success: function(res) {},              cancel: function(res) {},              fail: function(res) {}          });      });

　　这时候基本上就大功告成了，其实这块原理不是很复杂，但稍有一个地方出错就不能成功，所以如果不成功的时候不要心急，耐心寻找哪个地方写的不对，多上网搜索总会找到答案的。