JSSDK实现微信分享功能

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/tangxiujiang/article/details/78153692

功能:在微信内置浏览器页面实现分享页面功能。

注意:关于微信内置浏览器的私有对象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));
          }
        });
    }
});





展开阅读全文

没有更多推荐了,返回首页