微信网页分享

在微信中分享某个网页,如果不调用微信的接口,分享的网页会默认显示。默认的标题是网页的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这两个参数。

微信网页分享

上一篇:小程序发布后搜索不到怎么办?


下一篇:微信小程序登录授权并获取手机号