微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。
通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。
平时开发中我们使用最多的就是分享到朋友圈和分享给朋友的功能。今天笔者就此来分享一下自己开发的一点经验,最后会奉上源码以及demo例子供大家参考。
如何使用JS-SDK,微信开发文档里面介绍的很清楚,大家可以去看。
步骤大致如下,开发文档里面是这样写的:
步骤一:绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注:登录后可在“开发者中心”查看对应的接口权限。
步骤二:引入JS文件
在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js
请注意,如果你的页面启用了https,务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ,否则将无法在iOS9.0以上系统中成功使用JSSDK
如需使用摇一摇周边功能,请引入 jweixin-1.1.0.js
备注:支持使用 AMD/CMD 标准模块加载方法加载
步骤三:通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名,见附录1
jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
步骤四:通过ready接口处理成功验证
wx.ready(function(){
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});
步骤五:通过error接口处理失败验证
wx.error(function(res){
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
其实这五步中除了步骤三:通过config接口注入权限验证配置外,其他都很简单,笔者今天主要就是获取jsapi_ticket,这个是步骤三种配置生成签名的必要条件。而要获取jsapi_ticket的前提是你得获取到access_token,我们来看看微信JSSDK说明文档里对它们是如何定义的。
jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限,频繁刷新jsapi_ticket会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket 。
access_token是公众号的全局唯一票据,公众号调用各接口时都需使用access_token。开发者需要进行妥善保存。access_token的存储至少要保留512个字符空间。access_token的有效期目前为2个小时,需定时刷新,重复获取将导致上次获取的access_token失效。
如此看来,我们要想使用微信分享的功能或者微信js-sdk提供给我们的一些接口的功能就分为3步。
1.首先获取access_token并缓存到服务器,并定时进行刷新。
2.通过access_token获取jsapi_ticket并缓存到服务器端,定时进行刷新。
3.通过jsapi_ticket生成JS-SDK权限验证的签名。
这三步搞定了,微信才容许我们去调js接口供我们使用。以上三步需要我们对照开发文档写对应的sdk方法去获取access_token和jsapi_ticket以及权限验证的签名,大家可以结合源码对照开发文档去看一下,这三步的相关接口和代码源码里面都有这里我就不再贴了。需要说明的是access_token和jsapi_ticket调用的频率或者多个同时调用会出问题,所以需要我们全局缓存这两个值,缓存时需要注意过期时间,如果在过期时间内就从缓存里面读取,否则的话重新去微信服务器上get一下对应的url取得access_token和jsapi_ticket然后放进缓存中,具体实现逻辑可以参考源码。
下面是源码和demo结构图:
下面说下如何使用该接口,首先需要在你的web应用程序的Global.asax里面的Application_Start方法里面添加以下代码:
[C#] 纯文本查看 复制代码 protected void Application_Start(object sender, EventArgs e)
{
// 在应用程序启动时运行的代码
string appid = "";
string secret = "";
WeiXin.ConfigGlobalCredential(appid, secret);
//设置获取微信access_token缓存的设置和获取方法
WeiXin.ConfigAccessTokenCache((credential) =>
{
CacheHelper.Insert("wxAccessToken", credential.access_token, credential.expires_in / 60 - 1);
}, () =>
{
return CacheHelper.GetCache<string>("wxAccessToken");
});
//设置获取微信jsapiticket缓存的设置和获取方法
WeiXin.ConfigJsApiTicketCache(jsapiticket =>
{
CacheHelper.Insert("wxTicket", jsapiticket.ticket, jsapiticket.expires_in / 60 - 1);
}, () =>
{
return CacheHelper.GetCache<string>("wxTicket");
});
}
以上代码主要是在有效期内来缓存access_token和jsapiticket,避免重复调用,造成业务受限。
分享页面.cs代码:
[C#] 纯文本查看 复制代码 string timestamp = string.Empty;
string noncestr = string.Empty;
string signature = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
var timestamp = DateTime.Now.Ticks.ToString().Substring(0, 10);
var noncestr = new Random().Next(10000).ToString();
var uri = Request.Url.ToString().Replace("#", "");
var signature = WeiXin.GetSignature(Convert.ToInt64(timestamp), noncestr, uri);
}
分享页面aspx页面js代码:
[HTML] 纯文本查看 复制代码 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '填写你自己的公众号appid', // 必填,公众号的唯一标识
timestamp: <%=timestamp %>, // 必填,生成签名的时间戳
nonceStr: '<%=noncestr %>', // 必填,生成签名的随机串
signature: '<%=signature %>',// 必填,签名,见附录1
jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
wx.onMenuShareTimeline({
title: '', // 分享标题
link: '', // 分享链接
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
</script>
好了下面贴上源码文件,大家可以自己研究。
WexinJsShare.rar
(77.25 KB, 下载次数: 145)
|