在微信中分享某个网页, 如果不调用微信的接口, 分享的网页会默认显示. 默认的标题是网页的 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 这两个参数.
来源: http://www.bubuko.com/infodetail-2992244.html