微信JS-SDK1.6用updateTimelineShareData分享朋友圈无效的坑
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="/draw/jquery.rotate.min.js"></script>
<!--JS SDK 1.6-->
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
$(function() {
var $btn = $(\'.g-lottery-img\');// 旋转的div
var playnum = 1; //初始次数，由后台传入
$(\'.playnum\').html(playnum);//显示还剩下多少次抽奖机会
var isture = 0;//是否正在抽奖
var clickfunc = function() {
var data = [1, 2, 3, 4, 5, 6];//抽奖
//data为随机出来的结果，根据概率后的结果
data = data[Math.floor(Math.random() * data.length)];//1~6的随机数
switch(data) {
case 1:
rotateFunc(1, 0, \'恭喜您获得2000元理财金\');
break;
case 2:
rotateFunc(2, 0, \'恭喜您获得2000元理财金2\');
break;
case 3:
rotateFunc(3, 0, \'恭喜您获得2000元理财金3\');
break;
case 4:
rotateFunc(4, -60, \'谢谢参与4\');
break;
case 5:
rotateFunc(5, 120, \'谢谢参与5\');
break;
case 6:
rotateFunc(6, 120, \'谢谢参与6\');
break;
}
}
$(".playbtn").click(function() {
if(isture) return; // 如果在执行就退出
isture = true; // 标志为 在执行
if(playnum <= 0) { //当抽奖次数为0的时候执行
alert("没有次数了。分享后可多获取一次抽奖机会。");
$(\'.playnum\').html(0);//次数显示为0
isture = false;
} else { //还有次数就执行
playnum = playnum - 1; //执行转盘了则次数减1
if(playnum <= 0) {
playnum = 0;
}
$(\'.playnum\').html(playnum);
clickfunc();
}
});
var rotateFunc = function(awards, angle, text) {
isture = true;
$btn.stopRotate();
$btn.rotate({
angle: 0,//旋转的角度数
duration: 4000, //旋转时间
animateTo: angle + 1440, //给定的角度,让它根据得出来的结果加上1440度旋转
callback: function() {
isture = false; // 标志为 执行完毕
alert(text);
}
});
};
//JS-SDK的页面必须先注入配置信息
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: \'[[${appId}]]\', //后台 必填，公众号的唯一标识
timestamp: [[${timestamp}]], // 必填，后台生成签名的时间戳
nonceStr: \'[[${nonceStr}]]\', // 必填，后台生成签名的随机串
signature: \'[[${signature}]]\',// 必填，后台签名 //
jsApiList: [\'updateAppMessageShareData\', \'updateTimelineShareData\', \'onMenuShareAppMessage\',\'onMenuShareTimeline\', \'onMenuShareQQ\', \'onMenuShareQZone\']
});
// jsApiList: [\'updateTimelineShareData\']
//自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
//wx.ready(function () { //必须注释掉 否则页面加载就提示分享成功了
//分享到朋友圈
wx.updateTimelineShareData({//updateTimelineShareData
title: \'抽奖活动\', // 分享标题
link: \'http://wyq4s7.xxx.cc/api/draw\', // 分享链接，
//注意：该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 //不要写错了 不然会提示 系统错误，错误码：63002,invalid signature
imgUrl: \'http://wyq4s7.xxx.cc/draw/playbtn.png\', // 分享图标
success: function () {
alert("分享成功");//不要用alert，不然错误无法wx.error无法执行
console.log("分享成功");
// playnum = 1; //应该在后台设置并获取
// $(\'.playnum\').html(\'1\');
},
cancel: function () {
console.log("分享取消");
}
});
//});
wx.ready(function () {//文档的即将废弃，其实分享用的就是旧方法，这个上面的新的分享updateTimelineShareData根本没有作用,但是不加分享无法成功
wx.onMenuShareTimeline({
title: \'抽奖活动2\', // 分享标题
link: \'http://wyq4s7.xxx.cc/api/draw\', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: \'http://wyq4s7.xxx.cc/draw/playbtn.png\', // 分享图标
success: function () {
// 用户点击了分享后执行的回调函数
alert("分享成功2");//不要用alert，不然错误无法wx.error无法执行
console.log("分享成功2");
playnum = 1; //应该在后台设置并获取
$(\'.playnum\').html(playnum);
},
cancel: function () {
console.log("分享取消2");
}
});
});
//必须放wx.ready后面 否则无法执行
wx.error(function(res){
//alert(res.errMsg);
//config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});
});
以上为正常的测试代码，分享朋友圈成功后，多增加一次抽奖机会。
总结
新版本的接口updateTimelineShareData要放到wx.ready的外面，否则页面一加载完会自动弹出分享成功的信息
旧版本的接口onMenuShareTimeline要放到wx.ready的里面，否则无法分享成功，
反正新旧版本的2个分享朋友圈的接口都要写上。缺少其中一个都不行。
还有就是wx.config里面
jsApiList: [\'updateTimelineShareData\'] 只写一个根本无法分享，要把旧的接口都加上，改为如下
jsApiList: [\'updateAppMessageShareData\', \'updateTimelineShareData\', \'onMenuShareAppMessage\',\'onMenuShareTimeline\', \'onMenuShareQQ\', \'onMenuShareQZone\']
环境声明：如上代码是用微信开发工具测试成功的。真机iphone测试取消分享不起作用。
感谢这篇文章 https://niuchao.com/technology/690 的作者，我也是参考他的总结测试出来的。
