微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。例如我们网页中希望实现扫一扫、获取本地相册、位置信息、分享功能等,都可以使用JS-SDK来实现。
我们可以通过下面五步来使用JS-SDK。
1 wx.config({
2 debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
3 appId: '', // 必填,公众号的唯一标识
4 timestamp: , // 必填,生成签名的时间戳
5 nonceStr: '', // 必填,生成签名的随机串
6 signature: '',// 必填,签名,上一节已经讲解了获取签名的方法
7 jsApiList: [] // 必填,需要使用的JS接口列表
8 });
1 wx.ready(function(){
2 // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
3 });
wx.error(function(res){
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
下面通过一个分微信享功能的示例代码展示如何使用JS-SDK。
通过appid和secret两个参数,调用下面接口可以获取到access_token。获取到access_token我们才能进一步调用其他接口,但是access_token两个小时刷新一次,所以为了防止access_token失效,建议将access_token自行存储在服务器中,并且每两个小时重新获取一次。
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=SECRET
拿到access_token之后,可以在进一步获取jsapi_ticket,接口如下所示
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
1 //时间戳
2 const timestamp = Math.floor(new Date().getTime() / 1000);
3 //随机字符串
4 const nonceStr = Math.random().toString(36).substr(2, 15);
5 //jsapi_ticket
6 const jsapi_ticket; //通过上述接口获取
7 //当前页面的url
8 const url;
9 //拼接成参数对象
10 const params = {
11 jsapi_ticket,
12 timestamp,
13 noncestr,
14 url
15 }
16 //利用上一节的签名算法生成签名
17 const signature = getSign(params)
以上代程序由服务器端完成,通过以上程序,我们已经得到了时间戳、加密字符串,还有签名,然后再前端的页面中引入JS-SDK的js文件,地址如下所示
http://res.wx.qq.com/open/js/jweixin-1.4.0.js
引入完成之后,进入JS-SDK的配置环节。
1 wx.config({
2 debug: false,
3 appId: '{{appid}}',
4 timestamp: Number('{{timestamp}}'),
5 nonceStr: '{{nonceStr}}',
6 signature: '{{signature}}',
7 jsApiList: [
8 "updateAppMessageShareData",
9 "updateTimelineShareData"
10 ]
11 });
jsApiList中加入的是两个分享功能的接口,配置完成之后,调用接口即可,代码如下所示。
1 wx.ready(function () {
2 wx.updateAppMessageShareData({
3 title: title, // 分享标题
4 desc: desc, // 分享描述
5 link: requer_url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
6 imgUrl: imgUrl, // 分享图标
7 success: function () {
8
9 }
10 });
11 wx.updateTimelineShareData({
12 title: title,
13 desc: desc,
14 link: requer_url,
15 imgUrl: imgUrl,
16 success: function () {
17
18 }
19 });
20 });
通过上面的设置,我们在此网页中就可以是实现微信分享功能了。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。