简介: 在微信中分享某个网页，如果不调用微信的接口，分享的网页会默认显示。默认的标题是网页的title，图片会默认选取网页中大于300*300的图片，如果图片小，取不到图片，在微信中会显示默认的灰色图案。网页的简介部分会默认为网页的链接。调用微信的接口以后，分享的标题、图片、简介都可以自定义设置。下面结合在项目中的开发实践，简要总结一下如何进行微信接口的调用，实现自定义网页分享。
一 、 我们自己准备
进行微信公众平台开发，需要做一些前期准备工作。首先需要有一个服务器，可以在网上申请，还要为这台服务器上面开发的网站申请一个域名，域名必须通过审查，也就是在网上输入域名能够访问你的网站。域名准备好之后还要向微信申请一个公众号，这个公众号可以是订阅号也可以是服务号（订阅号侧重内容的传播、宣传，服务号侧重于向用户提供服务），根据公司的业务确定。如果是前期开发，我们可以申请一个测试账号，测试账号功能比较全，测试功能实现之后，可以再替换为实际使用的订阅号或者服务号。此处以测试号为例介绍。
二、 微信公众平台开发指南
有了域名和测试号，说明前期准备工作完成了，下面就可以进行微信平台的开发了。总体的原理是开发服务器程序向微信服务器提交一些验证信息，包括域名，测试号信息（以Token代表），微信服务器会返回给开发服务器一个签名，开发服务器也根据微信公众平台的规则生成签名，如果和微信服务器返回的签名相同，则微信服务器允许开发服务器接入微信服务器，调用微信的接口，实现微信公众平台开发。
1 、 接入微信公众平台
登录测试号以后，在测试号管理中修改接口配置信息，其中URL填写开发服务器的微信后台处理程序url，如http://www.xxxx.com/WeiXinSDK/CoreServlet，Token可随意设置，需要和程序中保持一致即可。比如设置为zkyc。配置提交后如果CoreServlet程序正确，就会显示配置成功。
其执行过程是，测试号配置完成后点击提交，也就是向微信服务器提交信息，然后微信服务器将发送GET请求到填写的服务器地址URL（http://www.xxxx.com/WeiXinSDK/CoreServlet）上， GET请求携带四个参数：signature、timestamp、nonce、echostr ，开发者通过检验signature对请求进行校验，校验步骤如下：
1）将token、timestamp、nonce三个参数进行字典序排序
2）将三个参数字符串拼接成一个字符串进行sha1加密
3）开发者获得加密后的字符串可与signature对比，标识该请求来源于微信
若确认此次GET请求来自微信服务器，请原样返回echostr参数内容，接入生效， 成为开发者成功，否则接入失败。
具体代码参考WeiXinSDK的java代码。
这一步接入成功，说明利用这个测试号，对这个网站可以进行微信公众平台开发，但是针对于网站中不同的网页，如果调用微信接口，还是需要微信的验证。
2、 后台程序
针对某个网页的微信验证，验证顺序是根据appID和appSecret这两个参数（这两个参数由测试号提供），调用微信api（https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+appID+"&secret="+appSecret）获得access_token，根据access_token得到jsapi_ticket，注意jsapi_ticket需要缓存，这个参数有效期是7200秒，由于获取jsapi_ticket的api调用次数非常有限，频繁刷新jsapi_ticket会导致api调用受限，影响自身业务，开发者必须在自己的服务全局缓存jsapi_ticket 。再根据jsapi_ticket、timestamp（时间戳）、noncestr（随机串）、url（网页的url）这四个参数获取signature。
具体代码参考Openinf的java代码。
3 、 前端javascript程序
要先在js文件中引入微信的js，
利用ajax从后台/Openinf/WxServlet取出timestamp、nonceStr、signature，然后和微信wx.config中的对应参数进行比较，如果相同，则就可以调用微信的接口了，jsApiList是调用接口的列表。
var url1 =location.href.split('#')[0];
$.ajax({
url: '/Openinf/WxServlet',
async: false,
data: { "url": url1 },
dataType: 'text',
success: function(data) {
var data1 = eval("(" + data + ")");
var timestamp = data1.timestamp;
var nonceStr = data1.nonceStr;
var signature = data1.signature;
wx.config({
debug: false,
appId: "wx728fexxxxxxxxd9b",
timestamp: timestamp,
nonceStr: nonceStr,
signature: signature,
jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage']
});
wx.ready(function() {
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。
//对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
wx.checkJsApi({
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage'
],
success: function(res) {
// alert(JSON.stringify(res));
}
});
//分享到朋友圈
wx.onMenuShareTimeline({
title: articleTitle, // 分享标题
link: url1, // 分享链接
imgUrl: articlePic, // 分享图标
desc: articleBrief,
success: function() {
// alert("分享到朋友圈成功.");
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
});
//获取“分享给朋友”按钮点击状态及自定义分享内容接口
wx.onMenuShareAppMessage({
title: articleTitle, // 分享标题
desc: articleBrief, // 分享描述
link: url1, // 分享链接
imgUrl: articlePic, // 分享图标
type: "", // 分享类型,music、video或link，不填默认为link
dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
success: function() {
// 用户确认分享后执行的回调函数
// alert('已分享');
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
});
});
wx.error(function(res) {
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
alert("验证失败");
});
}
});
其中url1也就是网页的url，是取#号之前的值。
三 其他说明
微信平台开发中，需要接入公网才能够进行测试。微信提供了微信测试工具，也提供了一些测试接口，如果程序不能达到预期效果，或者报错，可以用微信提供的测试接口进行验证，也可以使用测试工具进行调试。
在开发阶段，可以将wx.config中的debug设置为true，这样微信就会一直有反馈信息，容易我们进行调试，调试完成后再把debug设为false。
如果比较顺利的通过测试号调试出预期的分享结果，就可以把测试号换为公司的订阅号或者服务号，程序中主要替换appID和appSecret这两个参数。
注: (网上开源的代码很多)