您的位置:首页 > 移动开发 > 微信开发

微信JS分享实战代码

2015-11-12 13:51 615 查看
#set($version='?v=1.0.7')
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<meta name="msapplication-tap-highlight" content="no">
<title>$!{bargain.actName}</title>
<link href="../content/bargain/css/global.css$!{version}" rel="stylesheet" type="text/css">
<link href="../content/bargain/css/popup.css$!{version}" type="text/css" rel="stylesheet"/>
<script src="../content/bargain/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../content/bargain/js/jquery.form.js" type="text/javascript"></script>
<script src="../content/bargain/js/static-page.js$!{version}" type="text/javascript"></script>
<script src="../content/bargain/js/common.js$!{version}" type="text/javascript"></script>
<script src="../content/bargain/js/wxcheck.js$!{version}" type="text/javascript"></script>
</head>
<script type="text/javascript">
$(window).bind('resize load', function(){
$("body").css("zoom", $(window).width() / 750);
$("body").css("display" , "block");
});  
</script>
<body style="width:100%; margin:0 auto;">
<!--头图-->
<div class="top_img"></div>
<!--领取门票-->
<div class="top_txt">
<table border="0" cellspacing="0" cellpadding="0">
 #if($bargain.productRemainNum>0)
      <tr>
        <td>还剩</td>
        <td><div>$!{dictTool.getProductRateNum($!{bargain.productRemainNum},$!{bargain.showRate})}</div></td>
        <td>张门票<span style="font-size:25px; margin-left:10px;">等您领取</span></td>
      </tr>
      #else
      <tr>
        <td></td>
        <td><font color="red">门票已抢光,请继续关注下次活动。</font></td>
        <td></td>
      </tr>
      #end
    </table>
</div>
<!--砍价说明-->
<div class="info" id="bargain_desc">
#if($bargainRegistration.awardsStatus=='1')
<p>您已经成功领到了免费门票,快快邀请小伙伴儿,一起嗨翻东海音乐节!您的门票将于$!{postTimeStr}统一寄出,请耐心等待哦~</p>
#else
<p>已经有$!{recordListCount}位小伙伴儿,帮助我砍价了,当前价格是$!{bargainRegistration.productNewPrice}元,门票原价$!{bargainRegistration.productPrice}元,再去邀请好友帮我砍价。</p>
#end
</div>
<!--砍价按钮-->
<div class="but_box01">
<ul><li style="margin-right:40px;"><a href="javascript:popup('share-pop-up');"><img src="../content/bargain/images/but04.png" width="316" height="86"  alt="请好友帮砍"/></a></li><li><a href="#act_rule"><img src="../content/bargain/images/but05.png" width="316" height="86"  alt="活动规则"/></a></li></ul>
</div>
#if($dictTool.isLteZero($bargainRegistration.productNewPrice))
<div class="but_box02"><a id="goReceivePrizeButton" href="javascript:goReceivePrize();"><img src="../content/bargain/images/but03.png" width="656" height="86"  alt="领取门票"/></a></div>
#end
<!--亲友团列表-->
<div class="qyt_box">
<div class="qut_th">
<table id="recordtableheader" width="100%" height="70" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="30.3%">亲友团</td>
    <td width="30.3%">砍掉价格</td>
    <td width="30.3%">砍后价格</td>
  </tr>
</table>
</div>
<table id="recordtable" class="qut_sj" width="100%" border="0" cellspacing="0" cellpadding="0">
#foreach($item in $recordList)
  <tr>
    <td width="30.3%">$!{dictTool.subText($!{item.nickname},6,'...')}</td>
    <td width="30.3%"><s>¥$!item.cutPrice</s></td>
    <td width="30.3%">¥$!item.currPrice</td>
  </tr>
#end
</table>
<table class="qut_sj" width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
    <td><a id="prev" href="#recordtableheader">上一页</a></td>
    <td><span id="current_page">1</span>/<span id="total"></span></td>
    <td><a id="next" href="#recordtableheader">下一页</a></td>
  </tr>
</table>
</div>
<!--活动详情-->
<div class="title01"></div>
<p class="hd_txt">$!{bargain.actDetail}</p>
<div class="hd_photo">
<a href="#"><img src="../content/bargain/images/hdxq_img01.jpg" max-width="100%" width="90%" height="auto"  alt=""/></a>
<a href="#"><img src="../content/bargain/images/hdxq_img02.jpg" max-width="100%" width="90%" height="auto"  alt=""/></a>
</div>
<!--青山舞台-->
<div class="qswt_box">
<a><img class="img1" src="../content/bargain/images/qswt.png" width="90%" alt=""/></a>
</div>
<!--演出阵容-->
<div class="title02"></div>
<div class="yc_img">
<a href="#"><img class="img1" src="../content/bargain/images/yachu_img01.jpg" width="90%" alt=""/></a>
    <a class="alt1" href="#">窦唯</a>
    <a href="#"><img class="img1" src="../content/bargain/images/yachu_img02.jpg" width="90%" alt=""/></a>
    <a class="alt1" href="#">小野丽莎</a>
    <a href="#"><img class="img1" src="../content/bargain/images/yachu_img03.jpg" width="90%" alt=""/></a>
    <a class="alt1" href="#">LENKA(AU)</a>
    <a href="#"><img class="img1" src="../content/bargain/images/yachu_img04.jpg" width="90%" alt=""/></a>
    <a class="alt1" href="#">李志</a>
    <a class="alt2" href="#">(摄影:忍花草)</a>
    <a href="#"><img class="img1" src="../content/bargain/images/yachu_img05.jpg" width="90%" alt=""/></a>
    <a class="alt1" href="#">周云蓬</a>
    <a class="alt2" href="#">(摄影:大象)</a>
    <a href="#"><img class="img1" src="../content/bargain/images/yachu_img06.jpg" width="90%" alt=""/></a>
    <a class="alt1" href="#">常石磊</a>
</div>
<div id="act_rule" class="title03"></div>
<p class="hd_txt" style="padding-bottom:40px;">
1.    邀请好友来砍价,每个好友可帮忙砍掉1~3元(金额随机)的门票价格哦!</br>
2.    前$!{dictTool.getProductRateNum($!{bargain.productNum},$!{bargain.showRate})}名成功砍到0元的幸运用户,即可免费获得原价$!{dictTool.priceNoZero($!{bargainRegistration.productPrice})}元的东海音乐节门票一张!</br>
</br>兑换说明:</br>
        获得免费门票的用户,请在活动领取门票页面输入您真实有效的姓名、手机号码和地址,工作人员会在$!{postTimeStr}按您填写的信息统一寄出门票。</br>
        大咖闪耀,热力开唱,窦唯、Lenka东海音乐节陪你不嗨不归!
</p>
<div class="dmw_ewm">
<img src="../content/bargain/images/ewm0.png" width="234" height="234"  alt=""/><p>大麦网二维码</p></div>

<div id="receive_prize" class="cd-popup is-visible" role="alert" style="display:none">
<div class="cd-popup-container">
 <form id="receivePrizeForm" name="receivePrizeForm" action="../bargain/receivePrize.do" method="post">
  <input type="hidden" name="id" id="receive_prize_id" value=""/>
  <input type="hidden" name="actId" id="receive_prize_actId" value="$!{bargain.id}"/>
<input type="hidden" name="openid" id="receive_prize_openid" value="$!{bargainDto.openid}"/>
<input type="hidden" name="nickname" id="receive_prize_nickname" value="$!{bargainDto.nickname}"/>
    <input type="hidden" name="subscribe" id="receive_prize_subscribe" value="$!{bargainDto.subscribe}"/>
<p class="cd-popup-linqujptitle">
请输入真实有效的姓名、手机号码和地址,工作人员会在$!{postTimeStr}为您寄出门票,请耐心等待哦~
</p>
<div class="inputFormIpt showPlaceholder">
<input type="text" class="formIpt" id="receive_prize_realName" name="realName" placeholder="请输入您的真实姓名"/>
</div>
<div class="inputFormIpt showPlaceholder">
<input type="text" class="formIpt" id="receive_prize_mobile" name="mobile" placeholder="请输入您真实有效的手机号码"/>
</div>
<div class="inputFormIpt showPlaceholder" id="address">
<textarea class="formIpt addressinput" id="receive_prize_address"  name="address" placeholder="输入您的详细地址"></textarea>
</div>
<input class="guanzhubtn" type="button" id="receivePrizeButton" onclick="receivePrize();" value="提交" />
</form>
</div> <!-- cd-popup-container -->
</div> <!-- cd-popup -->

<div id="receive_prize_success" class="cd-popup is-visible" role="alert" style="display:none">
<div class="cd-popup-container">
<p class="cd-popup-title">恭喜您!</p>
<p class="cd-popup-content">您已成功申请领取门票!</p>
<input class="btn" type="button" onclick="popuphide('receive_prize_success')" value="确定">
</div> <!-- cd-popup-container -->
</div> <!-- cd-popup -->

<div id="tip_msg" class="cd-popup is-visible" role="alert" style="display:none">
<div class="cd-popup-container">
<p class="cd-popup-title">提示:</p>
<p class="cd-popup-content" id="tip_msg_content"></p>
<input class="btn" type="button" onclick="popuphide('tip_msg')" value="确定">
</div> <!-- cd-popup-container -->
</div> <!-- cd-popup -->

<div id="share-pop-up" style="display:none;" onclick="popuphide('share-pop-up');">
    <div class="pop"></div>
</div>

</body>

<!-- 微信分享功能 -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: '$!{appId}', // 必填,公众号的唯一标识
        timestamp: $!{timestamp}, // 必填,生成签名的时间戳
        nonceStr: '$!{nonceStr}', // 必填,生成签名的随机串
        signature: '$!{signature}',// 必填,签名,见附录1【必填:通过提供接口获取】
        jsApiList: [
           'checkJsApi',
           'onMenuShareTimeline',
           'onMenuShareAppMessage'
           ]
         // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
    });
    wx.ready(function () {
var newHdUrl = '$!{hdUrl}'+ '&fxOpenid=$!{bargainDto.openid}';
     wx.onMenuShareTimeline({
            title: '$!{bargain.actName}', // 分享标题【必填】
            link: newHdUrl, // 分享链接【必填】
            imgUrl: 'http://www.jeewx.com/P3-Web/content/bargain/images/top_01.png', // 分享图标【必填】
            success: function () { 
                // 用户确认分享后执行的回调函数
            },
            cancel: function () { 
                // 用户取消分享后执行的回调函数
            }
        });
        
 
        wx.onMenuShareAppMessage({
            title: '$!{bargain.actName}', // 分享标题【必填】
            desc: '东海音乐节起源于2011年,经过4年的持续举办,我们已经成为长三角地区最吸引人的户外音乐节之一。我们致力于将最好的音乐现场良性的融入城市生态,与观众共同创造一年一度的海洋音乐狂欢。', // 分享描述【必填】
            link: newHdUrl, // 分享链接【必填】
            imgUrl: 'http://www.jeewx.com/P3-Web/content/bargain/images/top_01.png', // 分享图标【必填】
            type: 'link', // 分享类型,music、video或link,不填默认为link【必填】
            dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
            success: function () { 
                // 用户确认分享后执行的回调函数
alert('已分享');
            },
            cancel: function () { 
                // 用户取消分享后执行的回调函数
alert('已取消');
            }
        });

  });

</script>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: