功能:在微信内置浏览器页面实现分享页面功能。
注意:关于微信内置浏览器的私有对象WeixinJSBridge分享的接口都已经作废了,即下面的定义都是无效的:
$(function(){
var appId = '公众号的appid';
var imgURL = '自定义分享时的图片地址';
var link = '分享页面的链接地址';
var desc = '定义分享的内容';
var title = '定义分享的标题';
weixinShareTimeline();
weixinShareFriend();
//分享到朋友圈
function weixinShareTimeline(){
WeixinJSBridge.invoke('shareTimeline',{
'img_url':ingURL,
'link':link,
'desc':desc,
'title':title
});
}
//发送给好友
function weixinShareFriend(){
WeixinJSBridge.invoke('sendAppMessage',{
'appid':appId,
'img_url':imgURL,
'link':link,
'desc':desc,
'title':title
});
}
};
提示:这是分享接口的官方新文档链接: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
利用微信JSSDK实现分享时回调不成功:
1、分享的title和url不正确:
title的值 = 当前页中标签<title>定义的内容
url是当前页面的 url = location.href
desc可以自定义分享的内容
2、分享到朋友圈之后,不回调:
如果link,imgUrl的域名不是公众号填写的安全域名,则会忽略你自定义分享的内容,即一些提示信息都正常,但是不显示你自定义
的信息,也不回调success
3、无法自定义分享按钮,可以自定义分享的内容,但是分享入口还是微信默认的分享入口,即微信右上角菜单分享按钮并且不能引导用户 去分享
下面详细介绍使用微信JSSDK实现分享的功能:
1、登录微信公众平台,绑定域名
2、在shake_redbag.php页面引入jweixin.js插件
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
3、定义jssdk.php,封装PHP类进行权限验证
<?php
class JSSDK {
private $appId;
private $appSecret;
public function __construct($appId, $appSecret) {
$this->appId = $appId;
$this->appSecret = $appSecret;
}
public function getSignPackage() {
$jsapiTicket = $this->getJsApiTicket();
$url = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
$timestamp = time();
$nonceStr = $this->createNonceStr();
// 这里参数的顺序要按照 key 值 ASCII 码升序排序
$string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url";
$signature = sha1($string);
$signPackage = array(
"appId" => $this->appId,
"nonceStr" => $nonceStr,
"timestamp" => $timestamp,
"url" => $url,
"signature" => $signature,
"rawString" => $string
);
return $signPackage;
}
private function createNonceStr($length = 16) {
$chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
$str = "";
for ($i = 0; $i < $length; $i++) {
$str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
}
return $str;
}
private function getJsApiTicket() {
// jsapi_ticket 应该全局存储与更新,以下代码以写入到文件中做示例
$data = json_decode(file_get_contents("jsapi_ticket.json"));
if ($data->expire_time < time()) {
$accessToken = $this->getAccessToken();
$url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";
$res = json_decode($this->httpGet($url));
$ticket = $res->ticket;
if ($ticket) {
$data->expire_time = time() + 7000;
$data->jsapi_ticket = $ticket;
$fp = fopen("jsapi_ticket.json", "w");
fwrite($fp, json_encode($data));
fclose($fp);
}
} else {
$ticket = $data->jsapi_ticket;
}
return $ticket;
}
private function getAccessToken() {
// access_token 应该全局存储与更新,以下代码以写入到文件中做示例
$data = json_decode(file_get_contents("access_token.json"));
if ($data->expire_time < time()) {
$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret";
$res = json_decode($this->httpGet($url));
$access_token = $res->access_token;
if ($access_token) {
$data->expire_time = time() + 7000;
$data->access_token = $access_token;
$fp = fopen("access_token.json", "w");
fwrite($fp, json_encode($data));
fclose($fp);
}
} else {
$access_token = $data->access_token;
}
return $access_token;
}
private function httpGet($url) {
$curl = curl_init();
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_TIMEOUT, 500);
curl_setopt($curl, CURLOPT_URL, $url);
$res = curl_exec($curl);
curl_close($curl);
return $res;
}
}
4、在shake_redbag.php文件(这个文件包括php,html,js)起始处调用类
<?php
require_once "jssdk.class.php";
require_once "../../../config.php"; //这个文件定义了appID appSecret
$jssdk = new JSSDK("appID", "appSecret"); //红色部分在公众平台 开发->基本配置中获取
$signPackage = $jssdk->GetSignPackage();
?>
5、通过config接口注入权限验证配置,通过error接口处理失败验证,
<script>
// 注意:所有的JS接口只能在公众号绑定的域名下调用,公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
// 如果发现在 Android 不能分享自定义内容,请到官网下载最新的包覆盖安装,Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
// 完整 JS-SDK 文档地址:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '<?php echo $signPackage["appId"];?>',
timestamp: <?php echo $signPackage["timestamp"];?>,
nonceStr: '<?php echo $signPackage["nonceStr"];?>',
signature: '<?php echo $signPackage["signature"];?>',
jsApiList: [
// 所有要调用的 API 都要加到这个列表中
'onMenuShareTimeline',
'onMenuShareAppMessage'
]
});
wx.error(function(res){
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
alert("error:"+JSON.stringify(res));
});
//config信息验证完之后,会自动调用ready()函数,如果需要在页面加载时机调用接口,就得把相关接口放在ready函数里面,来确保正确执行
wx.ready(function () {
setShare(); //定义函数
});
function setShare(){ // 在这里调用 API,分享朋友圈 wx.onMenuShareTimeline({ title: shareTitle, // 分享标题 link: shareLink, // 分享链接 desc:shareDesc, imgUrl: shareImgUrl, // 分享显示的缩略图 success: function () { // 用户确认分享后执行的回调函数 // alert('分享完成'); }, cancel: function () { // 用户取消分享后执行的回调函数 // alert('淘气了哦,你取消分享'); },fail: function (res) { alert(JSON.stringify(res)); } }); //分享给朋友 wx.onMenuShareAppMessage({ title: shareTitle, // 分享标题 link: shareLink, // 分享链接 desc:shareDesc, imgUrl: shareImgUrl, // 分享显示的缩略图 success: function () { // 用户确认分享后执行的回调函数 // alert('分享完成'); }, cancel: function () { // 用户取消分享后执行的回调函数 // alert('淘气了哦,你取消分享'); },fail: function (res) { alert(JSON.stringify(res)); } }); }
</script>
以下是shake_redbag.php和shake_redbag.js文件的完整内容
1、shake_redbag.php
<?php require_once "js/jssdk.php"; require_once "../../../config.php"; $jssdk = new JSSDK($AppID, $AppSecret); //红色部分在公众平台 开发->基本配置 中获取 $signPackage = $jssdk->GetSignPackage(); ?> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title id="title">欢乐上墙</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" /> <link href="css/shake_redbag.css" rel="stylesheet" type="text/css"> <script src="http://i.gtimg.cn/qzone/biz/gdt/lib/jquery/jquery-2.1.4.js?max_age=31536000"></script> <!-- <script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script> --> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.min.js" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script> <script type="text/javascript" src="../../config.js"></script> <script type="text/javascript" src="../../common/js/common.js"></script> <script type="text/javascript" src="js/shake_redbag.js"></script> <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> </head> <body> <script type="text/javascript"> var activity_id = "96"; //新用于测试1-92 新的一天-86 测试3-97 // var activity_id = '86'; // var openid = 'oLXpo0lL3R2h-sXbGERPM9ufJzF0'; //--测试用的微信openid var openid = 'oLXpo0l6qKgYo18f5Q04ZkOEOA3Y'; var activity_title = "欢乐上墙"; //用于获取活动标题,显示在红包信息的标题 var current_redbag; //--存储当前红包 var redbags; //--存储红包列表 var time_distance = 0;//本地时间和服务器时间的差 本地时间和服务器时间的差值 var price = 0; // 存储抢到红包的金额 var totalFee = 0; //抢到红包的总额 var numMax = 30; //摇一摇的目标次数,上线的时候要改成100 var shareTitle = ""; var shareDesc = ""; var shareLink = document.location.href; var shareImgUrl = globalConfig.pre_web_url+"/front/common/image/logo.jpg"; //定义分享的内容的变量 shareDesc = '欢乐上墙是一款简单、好玩的场景互动平台,可以实现大屏幕微信互动、让现场更加亲切'; // 非测试环境则改变这些参数 if (isTestEnv == false) { activity_id = getUrlParam("activity_id"); openid = getUrlParam("openid"); activity_title = getUrlParam("title"); numMax = 3; } </script> <!--倒计时--> <div class="shareCss" id="countdown"> <p id='countdownTxt'>摇红包倒计时</p> <p id='timeContent'></p> <p class="copyAndSend">点击下方:复制链接,发送好友</p> <p class="copyAndSend">邀好友帮你抢红包</p> <img src="img/downArrow.png" class="downArrow"> <p id="clipBoardTxt">复制链接,发送好友</p> </div> <!-- 显示摇了的次数 --> <div id="shake_view"> <h3 class="top">摇一摇</h3> <div class="circleprogress" id="circleprogress"> <div class="shake_pic" id="shake_pic"> <img src="img/hand.png" id="shake_icon" /> </div> </div> <div class="times"> <p>目标次数:<span id='target_number'></span>次 <br/> <span>已摇</span><span id="numberCount">0</span>次 </p> </div> </div> <!-- 抢到的红包信息 --> <div class="shareCss" id="redBagInfo"> <h3 id='hostName'></h3> <p>恭喜你</p> <p id="fee"></p> <p id="closePage">进入公众号领取 ></p> </div> <!-- 显示还有下一轮红包 --> <div class="shareCss" id="nextRedBagActivity"> <p id="promst"></p> <p>下一轮抢红包活动</p> <p id="entry">进入 ></p> </div> <!-- 抢红包活动已经全部结束的提示 --> <div class="shareCss" id="activityEnd"> <p id="endActivityPageTxt"></p> <p>抢红包活动已经结束</p> <p id="checkRedBagRecord">查看红包记录 ></p> </div> <!-- 没有红包活动的提示 --> <div class="shareCss" id="noData"> <p>暂无红包活动</p> </div> <!-- 有红包,但是红包都已经无效了,有抢到红包则显示抢到红包的信息 --> <div class="shareCss" id="redbagRecordPage"> <p id="recordInfoTitle">您的红包记录</p> <ul> </ul> <p class="shareToFriend">摇红包示范视频</p> <video id="shakeVideo" src='video/shakingRedbagVideo.mp4' autoplay="autoplay" controls="controls" style="background:url(img/shaking_bg.jpg);" webkit-playsinline playsinline></video> <p class="shareToFriend">分享给身边的好友</p> <p class="shareToFriend">参与他的活动</p> <p class="shareToFriend">就有机会抢红包</p> <img src="../../common/image/server_logo.jpg" class="qrCodeImg" /> <br /> <p id='qrcodeTxt'>长按二维码,关注欢乐上墙</p> </div> <!-- 有红包,但是红包都已经无效了,一个红包都没有抢到的提示 --> <div class="shareCss" id="noRushRedbag"> <p>很遗憾</p> <p>您一个红包都没有抢到</p> </div> <!-- 摇一摇的声音 --> <audio src="mp3/shakingAudio.mp3" preload="preload" id="shakingAudio"></audio> <!-- 摇到红包的声音 --> <audio src="mp3/shakingResult.mp3" preload="preload" id="shakingResult"></audio> </body> <script> // 注意:所有的JS接口只能在公众号绑定的域名下调用,公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 // 如果发现在 Android 不能分享自定义内容,请到官网下载最新的包覆盖安装,Android 自定义分享接口需升级至 6.0.2.58 版本及以上。 // 完整 JS-SDK 文档地址:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: '<?php echo $signPackage["appId"];?>', timestamp: <?php echo $signPackage["timestamp"];?>, nonceStr: '<?php echo $signPackage["nonceStr"];?>', signature: '<?php echo $signPackage["signature"];?>', jsApiList: [ // 所有要调用的 API 都要加到这个列表中 'onMenuShareTimeline', 'onMenuShareAppMessage' ] }); wx.error(function(res){ // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。 alert("error:"+JSON.stringify(res)); }); wx.ready(function () { setShare(); }); document.addEventListener("WeixinJSBridgeReady", function () { document.getElementById('shakeVideo').play(); }, false); </script> </html>
2、shake_redbag.js$(function() { var SHAKE_THRESHOLD = 1800; var last_update = 0; var x = y = z = last_x = last_y = last_z = 0; var num = 0; var shake_status = 0; //0:未开始,1:正在进行 2:已结束 // var times = 0; // var activity_id = sessionStorage.getItem("activity_id"); //上线的时候要改成这个样式 var price = 0; // 验证参数的合法性 var flag = isParamValidate(activity_id, '请先点击活动界面的”设置“按钮'); if (flag == false) { return; } console.log("activity_id:"+activity_id); // 添加摇一摇的目标次数 $('#target_number').text(numMax); // 请求红包列表,并对数据进行处理 requestRedbags(activity_id); // 点击“进入”按钮,刷新界面,进入下一轮抢红包活动 $('#entry').click(function(){ // 刷新界面 location.reload(); }); // 点击“查看红包记录”,刷新界面,查看抢到的红包信息 $('#checkRedBagRecord').click(function(){ // 刷新界面 location.reload(); }); // 抢到红包,则关闭浏览器界面 $('#closePage').click(function(){ WeixinJSBridge.invoke('closeWindow',{}); }); // 点击复制链接,发送好友,实现将当前页url放到剪贴板上,并关闭当前页,引导用户发送给好友 $('#clipBoardTxt').click(function(){ // 要复制的url var clipBoardCont = location.href; var clip = new ZeroClipboard($('#clipBoardTxt')); clip.setText(clipBoardCont); // window.clipboardData.setData('Text',clipBoardCont); //只有IE支持这种写法 success_prompt_alert('复制成功'); setTimeout(function(){ // 关闭当前浏览器页面 WeixinJSBridge.invoke('closeWindow',{}); },2000); }); // 设置视频自动播放,dom节点,play()是element方法 // $('video')[0].play(); // WebView webView = this.finishActivity(R.id.main_act_webview); // if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) { // webView.getSettings().setMediaPlaybackRequiresUserGesture(false); // } // 测试时用的,上线时要删掉 var shake_count = 0; function monitor_shake(){ setTimeout(function(){ shake_count ++ ; document.getElementById("numberCount").innerHTML = shake_count; if (shake_count < numMax) { monitor_shake(); $('#shakingAudio').trigger('play'); }else if(shake_count == numMax){ $('#shakingResult').trigger('play'); drawRedbag(openid); } }, 1000); } // --检测设备是否有摇一摇动作 function deviceMotionHandler(eventData) { var acceleration = eventData.accelerationIncludingGravity; var curTime = new Date().getTime(); shake_status = 1; if ((curTime - last_update) > 100) { var diffTime = curTime - last_update; last_update = curTime; x = acceleration.x; y = acceleration.y; z = acceleration.z; var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000; if (speed > SHAKE_THRESHOLD) { // times++; handelShakingMotion(); } last_x = x; last_y = y; last_z = z; } } // 设备有摇一摇动作,则对页面已摇次数进行加1,若已经摇到最大次数numMax,则请求抢红包接口 function handelShakingMotion() { if (shake_status == 2 || shake_status == 0) { return false; } num++; // 添加摇一摇的声音 $('#shakingAudio').trigger('play'); document.getElementById("numberCount").innerHTML = num; // setTimeout(function() { // times = 0; if (num == numMax) { num = 0; shake_status = 2; // 关闭摇一摇的接口 window.removeEventListener("devicemotion", deviceMotionHandler); // 添加摇到红包的声音 $('#shakingResult').trigger('play'); // 摇一摇结束之后,请求抢红包接口 drawRedbag(openid); } // }, 100); //测试得知80是比较理想的数值 } // 模拟抽中红包的效果 function monitorDrawedRedbag(){ var Display = document.getElementById("redpacket"); var show = document.getElementById("redpacket_open"); var close = document.getElementById("close"); var param = {"opendid":openId}; close.style.display = "block"; Display.style.display = "block"; Display.style.width = "300px"; Display.style.height = "450px"; Display.style.top = "100px"; Display.style.left = "50%"; Display.style.margin = "0px -150px 0px -150px"; show.style.width = "100px"; show.style.height = "100px"; show.style.marginTop = "-50px"; show.style.marginLeft = "100px"; show.style.fontSize = "25px"; show.style.border = "1px solid #FFA73A"; show.style.background = "#FFA73A"; } // 发送抢红包请求 function drawRedbag(openid){ console.log("drawRedbag"); var url = globalConfig.pre_api_url + "/wxwall_api/redbag/draw_redbag.php"; var param = { "openid":openid }; request(url,param,function(response){ // 请求抢红包接口成功 var redBagData = response.data; // $('#shakingResult').trigger('play'); price = redBagData.price; refreshView(current_redbag,true); console.log(response.msg); }); } // 抢红包进行中,监听摇一摇的动作 function listenPhoneShake() { if (window.DeviceMotionEvent) { window.addEventListener('devicemotion', deviceMotionHandler,false); console.log("addEventListener devicemotion"); } else { alert('抱歉,你的手机配置实在有些过不去,考虑换个新的再来试试吧'); } } // 当前红包:刷新界面 function refreshView(redbag,is_show_redbag){ // 显示没有红包 if( redbag === undefined ){ $('#shake_view').hide(); $('#countdown').hide(); $('#redBagInfo').hide(); $('#nextRedBagActivity').hide(); $('#activityEnd').hide(); $('#redbagRecordPage').hide(); $('#noRushRedbag').hide(); $('#noData').show(); return; } // 有红包,但都已经无效了 if (redbag === null) { $('#shake_view').hide(); $('#countdown').hide(); $('#redBagInfo').hide(); $('#nextRedBagActivity').hide(); $('#activityEnd').hide(); $('#noData').hide(); // 显示红包记录/或者没有抢到红包 getRedbagRecord(); // $('#redbagRecordPage').show(); return; } var status = redbag.status; if (status == '0') { //显示倒计时 $("#shake_view").hide(); $('#redBagInfo').hide(); $('#nextRedBagActivity').hide(); $('#activityEnd').hide(); $("#countdown").show(); }else if (status == '1'){ if (is_show_redbag == true) { $('#hostName').text( activity_title + "的红包" ); $('#fee').text('成功抢到' + price +'元'); $('#shake_view').hide(); $('#nextRedBagActivity').hide(); $('#activityEnd').hide(); $("#countdown").hide(); $('#redBagInfo').show(); return; }else{ //显示摇一摇 $("#countdown").hide(); $('#redBagInfo').hide(); $('#nextRedBagActivity').hide(); $('#activityEnd').hide(); $('#redBagInfo').hide(); $("#shake_view").show(); } }else if(status == '2'){ // 判断是否还有下一轮红包,在用户没有抢到红包的情况下, // 有下一轮红包就显示进入下一轮,没有的话就显示活动结束 // 当用户抢到红包,就不会进入这种情况 var nextRedbag = getAvailableRedbag(); if (nextRedbag == null) { //若无,显示已经结束;....... $('#redBagInfo').hide(); $("#shake_view").hide(); $("#countdown").hide(); $('#nextRedBagActivity').hide(); if( price == 0 ){ $('#endActivityPageTxt').text('很可惜,您没抢到红包'); }else{ $('#endActivityPageTxt').text('成功抢到' + price + '元'); } $('#activityEnd').show(); }else{ //若有,显示还有下一轮...... $('#redBagInfo').hide(); $("#countdown").hide(); $('#activityEnd').hide(); $("#shake_view").hide(); if( price == 0 ){ $('#promst').text('很可惜,您没抢到红包'); }else{ $('#promst').text('成功抢到' + price + '元'); } $('#nextRedBagActivity').show(); } } } // 获取当前有效的红包 function getAvailableRedbag(){ var length = redbags.length; // 没有红包活动返回null if (length == 0) { return null; } // 遍历红包列表,取到第一个有效的红包,若有则返回当前有效的红包 for(var i = 0; i < length; i++){ var redbag = redbags[i]; var status = redbag.status; // 主要获取到第一个有效的红包就返回当前有效的红包,并且退出该函数 if (status != '2') { return redbag; break; } } // 没有有效的红包,即所有的红包活动都结束了 return null; } // 开始摇红包倒计时 function startCount(startTime) { // var timeContent = $('#timeContent'); //显示倒计时的框 var endTime = new Date(startTime.replace(/-/g,'/')); //红包开始的时间 var countTimer = setInterval( function() { var nowTime = new Date(); var time = endTime.getTime() - nowTime.getTime() + time_distance; //截止时间和开始时间相差的毫秒数 if (!isNaN(time) && time >= 0) { var day = parseInt(time / 1000 / 60 / 60 / 24); var hour = parseInt(time / 1000 / 60 / 60 % 24); var minute = parseInt(time / 1000 / 60 % 60); var second = parseInt(time / 1000 % 60); if (time == 0) { current_redbag.status = "1"; refreshView(current_redbag,false); }else if (time <= 10000) { // 调用10秒倒计时动画 $('#timeContent').text( second + '秒' ); } else if (time <= 120000) { // 倒数120秒的时候 var secondLeft = minute * 60 + second; $('#timeContent').text( secondLeft + '秒'); } else { $('#timeContent').text( day + '天' + hour + '小时' + minute + '分钟' + second + '秒'); } } else if (time < 0) { clearInterval(countTimer); } }, 1000 ); } // 检查红包状态变化的长轮询 function check_redbag_status(redBagId,oldStatus,timeOut,startTime) { var url = globalConfig.pre_api_url + "/wxwall_api/redbag/check_redbag_status.php"; //检查红包状态的url var redbag_id = redBagId; var old_status = oldStatus; var time_out = timeOut; var start_time = startTime; var param = { "redbag_id": redbag_id, "old_status": old_status, "time_out": time_out }; $.ajax({ // 提交数据的类型 type: "POST", // 提交的网址 url: url, // 提交的数据 data: param, // 返回数据的格式 datatype: "json", // 在请求之前调用的函数 beforeSend: function() { }, // 成功返回之后调用的函数 success: function(response) { response = eval("(" + response + ")"); var status = response.status; if (status == '2') { current_redbag.status = response.data.new_status;//很重要 handleRedbag(current_redbag); if (current_redbag.status == '2') { return; } } check_redbag_status(redbag_id,current_redbag.status,time_out,start_time); // console.log(response.msg); }, // 执行后调用的函数 complete: function(XMLHttpRequest, textStatus) { // console.log(textStatus); }, // 调用出错执行的函数 error: function() { console.log("error"); setTimeout(function(){ check_redbag_status(redbag_id,old_status,time_out,start_time); }, 500); //这里是500ms吗??失败后果500ms再次请求 }, }); } // 请求红包列表 function requestRedbags(activity_id){ var get_redbag_list_url = globalConfig.pre_api_url + "/wxwall_api/redbag/get_redbag_list.php"; //获取红包列表的url data = { "activity_id": activity_id, }; // 向后台请求红包列表,并根据每个红包的status进行相应的处理 request(get_redbag_list_url, data, function(response) { var datas = response.data; redbags = datas.redbags; // 当没有红包活动的时候,提示没有红包 if( datas == '' || response.status == '6'){ refreshView(undefined,false); return; } // redbag 存储当前有效的红包或者null var redbag = getAvailableRedbag(); // 当有红包活动的时候,但是没有有效红包,显示抢到红包的信息 if( redbag === null ){ refreshView(null,false); return; } var servie_time = new Date(datas.current_time.replace(/-/g,'/')); //卸载下面,防止datas=‘’的时候,replace()函数出错 var local_time = new Date(); time_distance = local_time.getTime() - servie_time.getTime(); //服务器和用户的时间相差的毫秒数 // 获取红包列表 var length = redbags.length; var redbag_id = redbag.id; var old_status = redbag.status; var start_time = redbag.start_time; var time_out = 40; current_redbag = redbag; // 处理当前的红包 handleRedbag(redbag); // 长轮询检测status check_redbag_status(redbag_id,old_status,time_out,start_time); }); } // 处理当前有效的红包 function handleRedbag(redbag){ var status = redbag.status; var start_time = redbag.start_time; // refreshView(redbag,false); // $("#device_log").append("<li>status:"+status+"<li>"); if (status == '0') { //显示倒计时 startCount(start_time); }else if(status == '1'){ //监听摇一摇 if (isTestEnv == true) { monitor_shake(); }else{ listenPhoneShake(); } }else if(status == '2'){ // refreshView()函数已经处理了 //结束该轮抢红包,进入了结束界面 //关闭用户可以摇红包的能力 //提示用户是否还有下一轮红包活动,如果有,则引导用户操作;如果没有,提示没有。 } } // 获取抢到红包的记录 function getRedbagRecord(){ var url = globalConfig.pre_api_url + "/wxwall_api/redbag/get_redbag_records.php"; //获取抢到红包的记录 var data = { "activity_id":activity_id, "openid":openid, }; // 请求抢到红包记录 request(url,data,function(response){ if( response.data == '' || response.status == '6'){ // 显示没有抢到红包的界面 $('#noRushRedbag').show(); $('#redbagRecordPage').hide(); return; } var datas = response.data; var len = datas.length; for(var i = 0;i < len;i++){ var data = datas[i]; var money = data.price; var title = data.title; var redbagRecordList = '<li>'+ '<span class="recordTitle">' + title + '</span>'+ '<span class="recordMoney">' + money + ' 元</span>'+ '</li>'; $('ul').append(redbagRecordList); // 计算抢到红包的总额,用于分享时用 totalFee = parseFloat(totalFee) + parseFloat(money); shareTitle = "我在《" + activity_title + "》抽到" + totalFee + "元红包"; $("#title").html(shareTitle); setShare(); if(i == len -1){ // 显示红包记录界面 $('#redbagRecordPage').show(); $('#noRushRedbag').hide(); } } }); } function setShare(){ // 在这里调用 API wx.onMenuShareTimeline({ title: shareTitle, // 分享标题 link: shareLink, // 分享链接 desc:shareDesc, imgUrl: shareImgUrl, // 分享显示的缩略图 success: function () { // 用户确认分享后执行的回调函数 // alert('分享完成'); }, cancel: function () { // 用户取消分享后执行的回调函数 // alert('淘气了哦,你取消分享'); },fail: function (res) { alert(JSON.stringify(res)); } }); wx.onMenuShareAppMessage({ title: shareTitle, // 分享标题 link: shareLink, // 分享链接 desc:shareDesc, imgUrl: shareImgUrl, // 分享显示的缩略图 success: function () { // 用户确认分享后执行的回调函数 // alert('分享完成'); }, cancel: function () { // 用户取消分享后执行的回调函数 // alert('淘气了哦,你取消分享'); },fail: function (res) { alert(JSON.stringify(res)); } }); } });