在微信中分享某个网页,如果不调用微信的接口,分享的网页会默认显示。默认的标题是网页的title,图片会默认选取网页中大于300*300的图片,如果图片小,取不到图片,在微信中会显示默认的灰色图案。网页的简介部分会默认为网页的链接。调用微信的接口以后,分享的标题、图片、简介都可以自定义设置。下面结合在项目中的开发实践,简要总结一下如何进行微信接口的调用,实现自定义网页分享。
调用微信接口,就是进行微信公众平台的开发,主要参考微信公众平台技术文档,https://mp.weixin.qq.com/wiki,这是微信官方文档,里面讲的很详细,也有一些示例程序。
一 前期准备工作
进行微信公众平台开发,需要做一些前期准备工作。首先需要有一个服务器,可以在网上申请,还要为这台服务器上面开发的网站申请一个域名,域名必须通过审查,也就是在网上输入域名能够访问你的网站。域名准备好之后还要向微信申请一个公众号,这个公众号可以是订阅号也可以是服务号(订阅号侧重内容的传播、宣传,服务号侧重于向用户提供服务),根据公司的业务确定。如果是前期开发,我们可以申请一个测试账号,测试账号功能比较全,测试功能实现之后,可以再替换为实际使用的订阅号或者服务号。此处以测试号为例介绍。
二 微信公众平台开发
有了域名和测试号,说明前期准备工作完成了,下面就可以进行微信平台的开发了。总体的原理是开发服务器程序向微信服务器提交一些验证信息,包括域名,测试号信息(以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,
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
利用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这两个参数。