「 微信开发 」JSSDK的配置和使用
之前的文章如下:
这篇文章主要记录jssdk的使用的注意事项
jssdk的文档:http://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html
一、绑定域名
在配置服务器的时候会有绑定域名,其中接口测试号只能使用一个,而认证服务号能配置三个
注意事项如下:
配置了www.ptbird.cn之后,www.ptbird.cn开头的网页都能用,但是ptbird.cn的网页不能用。
二、jsapi_ticket
之前的文章由提到,jsapi_ticket和access_token差不多是一个意思,想要调用jssdk的接口就必须使用这个凭据。
而这个凭据是需要根据access_token来获取的。
之前的文章中我写了如何获得jssdk并保存在数据库中,以及合理刷新access_token和jsapi_ticket。
文章地址:http://www.ptbird.cn/weixin-develop-03.html
重复一下获取jsapi_ticket的函数:
//参数为access_token
//获取 js ticket
function getJsTicket($accessToken=''){
$url='https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='.$accessToken.'&type=jsapi';
$jsTicketRes=file_get_contents($url);//get
$jsTicketRes=json_decode($jsTicketRes,true);
return $jsTicketRes;
三、引入的js文件
一定要使用https的协议: https://res.wx.qq.com/open/js/jweixin-1.0.0.js
主要是ios9之后的系统的原因
四、配置
在使用jssdk之前是需要进行配置的
我的使用心得:
这些配置参数与signature有关,因此都应该在服务端处理好之后在通过前端调用。
配置的函数如下:
最主要的是signature的生成
//javascript的使用函数
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名,见附录1
jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
五、signature的生成
首先,进行配置的时候要用到他的权限签名算法,来计算signature,只有signature符合才能够配置成功。
signature的计算就有自己的签名算法。
官方文档地址:
http://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html#.E9.99.84.E5.BD.951-JS-SDK.E4.BD.BF.E7.94.A8.E6.9D.83.E9.99.90.E7.AD.BE.E5.90.8D.E7.AE.97.E6.B3.95
注意事项
- 签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
- 签名用的url必须是调用JS接口页面的完整URL。
- 出于安全考虑,开发者必须在服务器端实现签名的逻辑。
php的函数 参数是需要config的页面的完整URL
//URL一定是一模一样的访问的url,否则失败
//获取token并生成signature
//参数是url 因为要根据不同的url生成不同的signature,因此url作为参数传入
private function getJsSignature($url=''){
//getToken这个函数在/Core/Common/funcitons/1588行左右
$token=getToken();
//$token的格式是
// array(
// 'access_token',
// 'js_ticket',
// 'time',
// 'xxx' //没用的
// );
//生成时间戳
$timeStamp=time();
//生成signature
//1. 对参数进行ASCII码的排序使用url键值对的形式
$str='jsapi_ticket='.$token['js_ticket'].'&noncestr='.C('TOKEN').'×tamp='.$timeStamp.'&url='.$url;
//2. 对str进行sha1签名得到signature
$signature=sha1($str);
//将必要的信息返回
$dataRes=array(
'signature'=>$signature,
'timeStamp'=>$timeStamp,
'nonceStr'=>C('TOKEN'),
'appId'=>C('APP_ID'),
'jsapi_ticket'=>$token['js_ticket'],
'url'=>$url
);
// p($dataRes);
return $dataRes;
}
六、使用
配置之后就能在前端页面js中使用了,我用的模板引擎输出。
注意事项:
- 分享接口是在微信访问页面的时候,使用微信的分享(分享到朋友圈或者发送给朋友)的时候自动调用的,不是手动调用的
- 只有在wx.ready()之后才能正常使用,就是只有config成功了才能使用。
$(document).ready(function(){
wx.config({
debug: false,
appId: '<{$appId}>',
timestamp: '<{$timeStamp}>',
nonceStr: '<{$nonceStr}>',
signature: '<{$signature}>',
jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage']
});
wx.ready(function(){
// 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
wx.onMenuShareTimeline({
title: '<{$nickname}> 邀请您加入5Cup星愿会员',
link: location.href,
imgUrl:'__LOGO_IMG_64__',
success: function () {
},
cancel: function () {
}
});
wx.onMenuShareAppMessage({
title: '<{$nickname}> 邀请您加入5Cup星愿会员',
desc: '欢迎加入5Cup Mini Cafe 星愿会员',
link: location.href,
imgUrl: '__LOGO_IMG_64__',
type: 'link',
dataUrl: '',
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
});
});
7、效果
我的网页的标题不是这个标题,并且也没有这张图片
因此调用是成功的。
测试的时候可以config中的debug开成true,进行测试、
文章版权:Postbird-There I am , in the world more exciting!
本文链接:http://ptbird.cn/wexin-develop-06.html
转载请注明文章原始出处 !