微信JS分享实战代码

#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.&nbsp;&nbsp;&nbsp;&nbsp;邀请好友来砍价,每个好友可帮忙砍掉1~3元(金额随机)的门票价格哦!</br>
2.&nbsp;&nbsp;&nbsp;&nbsp;前$!{dictTool.getProductRateNum($!{bargain.productNum},$!{bargain.showRate})}名成功砍到0元的幸运用户,即可免费获得原价$!{dictTool.priceNoZero($!{bargainRegistration.productPrice})}元的东海音乐节门票一张!</br>
</br>兑换说明:</br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;获得免费门票的用户,请在活动领取门票页面输入您真实有效的姓名、手机号码和地址,工作人员会在$!{postTimeStr}按您填写的信息统一寄出门票。</br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;大咖闪耀,热力开唱,窦唯、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>

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-10 21:30:33

微信JS分享实战代码的相关文章

微信js分享朋友圈(二)

近期又用到微信分享的功能了.虽然不是第一次用了,依然我又有幸踩到了一个坑,所以分享一下吧. 根据微信sdk写的代码一步步很顺利,但是后面就是获取微信返回的分享结果的回调的时候IOS老是有问题,然后就网上各种搜,但是我得到的大部分答案是分享链接url的限制即:该分享链接域名或路径必须与当前页面对应的公众号JS安全域名一致. but我的url符合要求就还是拿不到分享后的回调,然后经过一番折腾最后发现在微信分享成功回调的方法里加一个定时器就ok了. →提示: 这里我使用的还是旧的版本(1.3.2)这里

微信Js分享朋友接口invalid signature解决方法

导致这个错误是因为签名算法错误 签名需要 noncestr timestamp(因为变量长度限制,不能直接使用毫秒时间戳,要除以1000) jsapi_ticket url 根据微信的文档说明做的话 最容易出错的地方是url 文档上对url的描述反正我是没怎么看懂~ 好了吐槽完毕,是时候上代码了 Java代码:         @RequestMapping("share2Firend")         //from.isappinstalled参数是自定义分享接口时 微信服务器带过

微信js分享朋友圈

1.绑定域名 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”. 备注:登录后可在“开发者中心”查看对应的接口权限. 2.引入js文件 <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> <script type="text/javascript" src=

微信js sdk分享开发摘记java版

绑定域名和引入js的就不说了 废话不说直接上代码 1 public void share(HttpServletRequest request) throws Exception { 2 3 StringBuffer homeUrl = request.getRequestURL(); 4 String queryString =request.getQueryString(); 5 if(StringUtils.isNotBlank(queryString)){ 6 homeUrl.appen

微信JS SDK配置授权,实现分享接口

微信开放的JS-SDK面向网页开发者提供了基于微信内的网页开发工具包,最直接的好处就是我们可以使用微信分享.扫一扫.卡券.支付等微信特有的能力.7月份的时候,因为这个分享的证书获取问题深深的栽了一坑,后面看到"config:ok"的时候真的算是石头落地,瞬间感觉世界很美好.. 这篇文章是微信开发的很多前置条件,包括了服务端基于JAVA的获取和缓存全局的access_token,获取和缓存全局的jsapi_ticket,以及前端配置授权组件封装,调用分享组件封装. 配置授权思路:首先根据

【课程分享】深入浅出微信公众平台实战开发(微网站、LBS云、Api接口调用、服务号高级接口)

深入浅出微信公众平台实战开发(微网站.LBS云.Api接口调用.服务号高级接口) 课程下载地址:链接:http://pan.baidu.com/share/link?shareid=2214724072&uk=3611155194 密码:glvc 一.本课程是怎么样的一门课程(全面介绍) 1.1.课程的背景 微信公众平台的火热程度已经不用多言,无论是个人还是企业,政府还是商家,都已经开始搭建微信公众平台,微信的作用已经被各界人士认可.微信公众平台的技术需求市场缺口巨大. 1.2.课程内容简介 本

实战微信JS SDK开发:贺卡制作与播放(1)

前段时间忙于CanTK 2.0的开发,所以博客一直没有更新.CanTK 2.0主要增强了游戏和富媒体的开发,现在编码和测试基本完成了,等文档完成了再正式发布,里面有不少激动人心的功能,等发布时再一一细说吧. 最近同事用CanTK开发了一个基于微信的贺卡制作APP,我虽然没有参与开发,但是提供CanTK和GameBuilder的技术支持,觉得有些东西比较有意思,写几篇博客和大家分享吧.这个贺卡APP完全开源,有需要的朋友可以随意修改和发布. CanTK(Canvas ToolKit)是一个开源的游

asp.net调用前台js调用后台代码分享

C#前台js调用后台代码 前台js <script type="text/javascript" language="javascript"> function Ceshi() { var a = "<%=Getstr()%>"; alert(a); } </script> <input type="button" onclick="Ceshi();" value=

微信小程序实战之百思不得姐精简版

原文:微信小程序实战之百思不得姐精简版 微信小程序基本组件和API已撸完,总归要回到正题的,花了大半天时间做了个精简版的百思不得姐,包括段子,图片,音频,视频,四个模块.这篇就带着大家简述下这个小的APP,源码会放到GitHub上欢迎star. 地址: https://github.com/shuncaigao/BS 项目中我能学到什么? tabbar使用方式 网络调用真实接口 loading使用 scroll-view实现下拉刷新上拉加载 image组件对图片的处理, 音乐和视频组件的使用 跳