微信分享

好多情况下我们会将高质量的网页分享给微信好友或分享到朋友圈供更多的朋友看到。这里就需要用到微信提供的jssdk的分享接口了。今天刚好做了这功能，期间也遇到了一些坑，在这里纪录一下。

在开始之前你的准备工作有哪些

• 微信公众号平台
• 有域名的服务器

一、在公众号平台绑定域名

登录微信公众号，在左侧的菜单栏：公众号设置 -> 功能设置 -> js接口安全域名（如下图所示）。在这里绑定你的域名，需要注意的是，微信分享的网页仅支持80（http）端口和443（https）端口，所以你分享的访问页面需要部署在这两个端口中的一个。

以上绑定完安全域名后就是获取appID和appsecret的时候了，appID和appsecret的获取在：基本配置 -> 公众号开发信息（如下图所示）。

微信分享仅支持已认证的公众号。未认证的可以申请测试号进行测试。

测试号申请：开发者工具 -> 公众平台测试帐号 -> 登录（如下图所示）。登录后即可获取appID和appsecret。

测试帐号的域名绑定也是在测试号登录后的管理页面，js接口安全域名修改下（如下图所示）。

以上都配置完成后我们会拿到appID和appsecret信息，接下来就是第二步了。

二、获取access_token和ticket

2.1、access_token是啥？怎么获取？

access_token 是微信对外提供的接口的访问凭证，也就是微信提供的接口调用，都是通过 access_token 来进行鉴权的。

通过第一步我们已经获取的 appID 和 appsecret ，然后再调用以下接口就可以获取 access_token 。需要注意的是， access_token 的有效期是7200秒，也就是两个小时，该接口每一天的最大调用次数是2000次，所以最好的方法就是通过后台获取，并且缓存起来。

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=appid&secret=secret

不过我们这里只是用于测试，所以就直接在浏览器地址栏输入以上接口获取 access_token 了（如下图所示）。

2.2、ticket是啥？怎么获取？

ticket 是用于分享连接时用于生成签名的票据。

获取 ticket 的接口就需要用到上一步我们获取的 access_token ，调用以下接口获取 ticket 。

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=access_token&type=jsapi

这里我们只是测试，所以就直接在浏览器地址栏输入以上接口获取 ticket 了（如下图所示）。

三、生成签名signature

第二步的主要目的就是为了获取ticket，因为在生成签名的时候需要用到它。

生成签名的规则可以用一段代码来描述：

String signature = SHA1('jsapi_ticket=' + jsapi_ticket + '&noncestr=' + noncestr + '&timestamp=' + timestamp + '&url=' + url)

以上各个参数的描述如下：

• jsapi_ticket：第二步获取到的 ticket。
• noncestr：随便写的16位字符串，需要和jssdk的config配置项内的 noncestr 保持一致。
• timestamp：生成签名的时间戳(10位长度)，需要和jssdk的config配置项内的 timestamp 保持一致。
• url：分享的页面动态获取到的，可以通过location.href.split('#')[0]获取到。
• SHA1()：将拼接完的字符串按 sha1 加密规则进行加密，加密后的字符串就是最后的签名了。

以上需要注意的是url的获取问题，因为分享的页面不同，访问页面的url也不同，所以这里生成签名的url一定要是前端动态获取后，再去生成签名，在微信的右上角点击分享到好友或朋友圈后，微信还会在访问的url后面拼接上一些东西，所以这里需要动态获取。

四、前端配置

以上步骤都是为了获取到签名signature。当然在最后一步获取签名signature也可以在前端做，只是获取签名的ticket需要后端来获取，这里为了测试我们也是写的硬编码，真正的项目中不推荐这样。

首先是引入微信的jssdk和sha1加密的库：

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="./sha1.js"></script>

然后是wx.config配置

var appId = 'wxf11bcfc502a14f0d'; // appid
var jsapi_ticket = 'kgt8ON7yVITDhtdwci0qeZGsEDiZkBzasizTPq19m7cPHFjfn70bWpWvLfRz7Kk3zs8Ilqznmfo6gYFYnKqMQw';
var noncestr = 'Wm3WZYTPz0wzccnW';
var timestamp = parseInt(Date.now() / 1000);
var url = location.href.split('#')[0];
var signature = SHA1('jsapi_ticket=' + jsapi_ticket + '&noncestr=' + noncestr + '&timestamp=' + timestamp + '&url=' + url).toLowerCase();

log('appId=' + appId);
log('jsapi_ticket=' + jsapi_ticket);
log('noncestr=' + noncestr);
log('timestamp=' + timestamp);
log('url=' + url);
log('signature=' + signature);

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
  appId: appId,
  timestamp: timestamp,//1508746359
  nonceStr: noncestr,//'Wm3WZYTPz0wzccnW'
  signature: signature,//'0f60a790bc5bee414a9429a3196a8218814e3af5'
  jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo']
});

以上配置完成后就是配置分享时显示的缩略图，标题和描述信息了。

var share_data = {
  imgurl: "http://www.drvoice.cn/uploadfile/2017/1018/20171018102805750.png",
  url: window.location.href,
  title: "Qbian测试",
  desc: "　　这里是描述信息   ",
  encodeTitle: '',
  encodeDesc: ''
};

最后一步，再引入一个微信的jssdk，用于校验我们生成的签名是否正确，正确的情况下再我们点击微信右上方的分享到好友或朋友圈时就会使用share_data中配置的信息。

<script type="text/javascript" src="http://www.drvoice.cn/statics/js/jquery/weixin.js"></script>

我们进行测试一下（如下图所示）。