微信營銷是一種新型的營銷模式，由於微信更重視用戶之間的互動，故而這種營銷推廣不不能盲目地套用微博營銷的單純大量廣告推送方式。這種方式在微信營銷中的效果非常差，會令用戶反感，繼而取消去企業或商家的微信公眾賬號關注。對於企業來說，做微信推廣重要的一個方面就是提高用戶和公眾賬號之間的黏度，而微信刮刮卡就是其中最為常見的活動。
下面詳細介紹：
一、使用
1. 新建
2. 獎項設置
3. 測試
保存后，給公眾號發一個“刮刮卡”的消息， 就會收到刮刮卡的內容，進入活動后，就可以刮獎了
二、實現
1. 頁面
1.1 前台代碼
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content="微布斯、微信營銷、微信代運營、微信定制開發、微信托管、微網站、微商城、微營銷" name="Keywords">
<meta content="微布斯，國內最大的微信公眾智能服務平台，微布斯八大微體系：微菜單、微官網、微會員、微活動、微商城、微推送、微服務、微統計，企業微營銷必備。" name="Description">
<meta name="viewport" content=" 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="description" content="刮刮卡">
<title>刮刮卡</title>
<link rel="stylesheet" type="text/css" href="css/activity_style.css" media="all" />
<script type="text/javascript" src="js/zepto.js"></script>
<script type="text/javascript" src="js/alert.js"></script>
<script type="text/javascript" src="../../scripts/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../../scripts/jquery/jquery.query.js"></script>
<script src="js/wScratchPad.js"></script>
</head>
<body data-role="page" class="activity-scratch-card-winning">
<%if (ggkAction != null)
{ %>
<script type="text/javascript">
function loading(canvas, options) {
this.canvas = canvas;
if (options) {
this.radius = options.radius || 12;
this.circleLineWidth = options.circleLineWidth || 4;
this.circleColor = options.circleColor || 'lightgray';
this.moveArcColor = options.moveArcColor || 'gray';
} else {
this.radius = 12;
this.circelLineWidth = 4;
this.circleColor = 'lightgray';
this.moveArcColor = 'gray';
}
}
loading.prototype = {
show: function () {
var canvas = this.canvas;
if (!canvas.getContext) return;
if (canvas.__loading) return;
canvas.__loading = this;
var ctx = canvas.getContext('2d');
var radius = this.radius;
var me = this;
var rotatorAngle = Math.PI * 1.5;
var step = Math.PI / 6;
canvas.loadingInterval = setInterval(function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
var lineWidth = me.circleLineWidth;
var center = { x: canvas.width / 2, y: canvas.height / 2 };
ctx.beginPath();
ctx.lineWidth = lineWidth;
ctx.strokeStyle = me.circleColor;
ctx.arc(center.x, center.y + 20, radius, 0, Math.PI * 2);
ctx.closePath();
ctx.stroke();
//在圓圈上面畫小圓
ctx.beginPath();
ctx.strokeStyle = me.moveArcColor;
ctx.arc(center.x, center.y + 20, radius, rotatorAngle, rotatorAngle + Math.PI * .45);
ctx.stroke();
rotatorAngle += step;
}, 100);
},
hide: function () {
var canvas = this.canvas;
canvas.__loading = false;
if (canvas.loadingInterval) {
window.clearInterval(canvas.loadingInterval);
}
var ctx = canvas.getContext('2d');
if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height);
}
};
</script>
<form id="form1" runat="server">
<asp:HiddenField ID="hidStatus" runat="server" EnableViewState="false" />
<asp:HiddenField ID="hidErrInfo" runat="server" EnableViewState="false" />
<asp:HiddenField ID="hidAwardId" runat="server" EnableViewState="false" Value="0" />
<div class="main">
<div class="cover" id="jiangqu">
<img src="images/activity-scratch-card-bannerbg.png">
<div id="prize">
<asp:Literal ID="litPrize" runat="server" EnableViewState="false" Text="謝謝參與"></asp:Literal>
</div>
<div id="scratchpad"></div>
</div>
<div class="content">
<div id="zjl" style="display: none" class="boxcontent boxwhite">
<div class="box">
<div class="title-red"><span>恭喜你中獎了</span></div>
<div class="Detail">
<p>你中了：<span class="red"><asp:Literal ID="litJiangPing" runat="server" EnableViewState="false"></asp:Literal></span></p>
<p>兌獎SN碼：<span class="red" id="sncode"><asp:Literal ID="litSnCode" runat="server" EnableViewState="false"></asp:Literal></span></p>
<p class="red">
<asp:Literal ID="litContentInfo" runat="server" EnableViewState="false"></asp:Literal>
</p>
<p>
<input name="" class="px" id="tel" value="" type="text" autocomplete="off" placeholder="用戶請輸入您的手機號">
</p>
<asp:Literal ID="litPwd" runat="server" EnableViewState="false" Text=""></asp:Literal>
<%-- <p>
<input name="" class="px" id="parssword" type="password" value="" placeholder="商家輸入兌獎密碼">
</p>--%>
<p>
<input class="pxbtn" name="提 交" id="save-btn" type="button" value="用戶提交">
</p>
</div>
</div>
</div>
<div class="boxcontent boxwhite" id="result" style="display: none;">
<div class="box">
<div class="title-orange"><span>恭喜你中獎了</span></div>
<div class="Detail">
<p>你中了：<span class="red"><asp:Literal ID="litJp" runat="server" EnableViewState="false" Text=""></asp:Literal></span></p>
<p>兌獎sn碼為：<span class="red"><asp:Literal ID="litSNM" runat="server" EnableViewState="false"></asp:Literal></span></p>
<p class="red"><asp:Literal ID="litLQStatus" runat="server" EnableViewState="false" Text=""></asp:Literal></p>
</div>
</div>
</div>
<div class="boxcontent boxwhite">
<div class="box">
<div class="title-red"><span>獎項設置：</span></div>
<div class="Detail">
<asp:Literal ID="litJiangXing" runat="server" EnableViewState="false"></asp:Literal>
</div>
</div>
</div>
<div class="boxcontent boxwhite">
<div class="box">
<div class="title-red">活動說明：</div>
<div class="Detail">
<p class="red">
本次活動總共可以刮<asp:Literal ID="litTTTimes" runat="server" EnableViewState="false"></asp:Literal>
次,
你已經刮了
<asp:Literal ID="litRemainTimes" runat="server" EnableViewState="false" Text="0"></asp:Literal>
次,機會如果沒用完重新進入本頁面可以再刮!
</p>
<p>
<asp:Literal ID="litRemark" runat="server" EnableViewState="false"></asp:Literal>
</p>
</div>
</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
<script type="text/javascript">
var wid = $.query.get("wid");
var aid = $.query.get("aid");
var thisurl = document.URL;
var status = $("#hidStatus").val();
var showInfo = $("#hidErrInfo").val();
var openid = $.query.get("openid");
var zjl = false;//沒中獎為false中獎為true
if (status == "-1") {
window.location.href = "end.aspx?openid=" + openid + "&wid=" + wid + "&aid=" + aid;
}
else if (status == "0") {
alert(showInfo);
}
else if (status == "2") {
zjl = true;
}
else if (status == "100") {
$("#zjl").show();
$("#jiangqu").hide();
}
else if (status == "110") {
$("#result").show();
$("#jiangqu").hide();
}
var num = 0;
var goon = true;
$(function () {
var useragent = window.navigator.userAgent.toLowerCase();
$("#scratchpad").wScratchPad({
width: 150,
height: 40,
color: "#a9a9a7",
scratchMove: function () {
num++;
if (zjl && num > 30 && goon) {
//$("#zjl").fadeIn();
goon = false;
$("#zjl").slideToggle(500);
//$("#outercont").slideUp(500)
}
if (useragent.indexOf("android 4") > 0) {
if ($("#scratchpad").css("color").indexOf("51") > 0) {
$("#scratchpad").css("color", "rgb(50,50,50)");
} else if ($("#scratchpad").css("color").indexOf("50") > 0) {
$("#scratchpad").css("color", "rgb(51,51,51)");
}
}
}
});
});
$("#save-btn").bind("click",
function () {
var btn = $(this);
var tel = $("#tel").val();
var pwd = "";
var hidAwardId = $("#hidAwardId").val();
if ($("#parssword").length > 0 && $.trim($("#parssword").val()) == "") {
alert("請輸入兌獎密碼!");
return
}
if ($("#parssword").length > 0) {
pwd = $("#parssword").val();
}
if ($.trim(tel) == "") {
alert("請輸入手機號!");
return
}
var rad = Math.random();
var submitData = {
id: hidAwardId,
aid: aid,
pwd: pwd,
snumber: $("#sncode").text(),
tel: tel,
rad: rad,
openid: openid
};
$.post('ggkAct.ashx?myact=update', submitData,
function (data) {
if (data.success == "1") {
alert("提交成功！");
$("#result").slideToggle(500);
$("#zjl").slideToggle(500);
} else {
alert(data.msg);
}
},
"json")
});
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
window.shareData = {
"imgUrl": thisurl,
"timeLineLink": thisurl + "&is_share=1",
"sendFriendLink": thisurl + "&is_share=1",
"weiboLink": thisurl + "&is_share=1",
"tTitle": "<%=ggkAction.actName%>",
"tContent": "<%=ggkAction.actContent%>",
"fTitle": "<%=ggkAction.actName%>",
"fContent": "<%=ggkAction.actContent%>",
"wContent": "<%=ggkAction.actContent%>"
};
// 發送給好友
WeixinJSBridge.on('menu:share:appmessage', function (argv) {
WeixinJSBridge.invoke('sendAppMessage', {
"img_url": window.shareData.imgUrl,
"img_width": "640",
"img_height": "640",
"link": window.shareData.sendFriendLink,
"desc": window.shareData.fContent,
"title": window.shareData.fTitle
}, function (res) {
_report('send_msg', res.err_msg);
})
});
// 分享到朋友圈
WeixinJSBridge.on('menu:share:timeline', function (argv) {
WeixinJSBridge.invoke('shareTimeline', {
"img_url": window.shareData.imgUrl,
"img_width": "640",
"img_height": "640",
"link": window.shareData.timeLineLink,
"desc": window.shareData.tContent,
"title": window.shareData.tTitle
}, function (res) {
_report('timeline', res.err_msg);
});
});
// 分享到微博
WeixinJSBridge.on('menu:share:weibo', function (argv) {
WeixinJSBridge.invoke('shareWeibo', {
"content": window.shareData.wContent,
"url": window.shareData.weiboLink,
}, function (res) {
_report('weibo', res.err_msg);
});
});
}, false)
</script>
</form>
<%}
else
{%>
<div class="main">
<div class="content">
<div class="boxcontent boxwhite">
<div class="box">
<div class="title-red"><span>出現異常：</span></div>
<div class="Detail">
<%=errorInfo %>
</div>
</div>
</div>
</div>
</div>
<%} %>
<div style="display: none">©微布斯科技提供qq 121285904 www.webus.cn</div>
</body>
</html>
這里用到了wScratchPad.js, wScratchPad是jQuery上的一個插件，它能模擬出刮的行為，使你能“擦去”一層覆蓋物，這層覆蓋物既可是一個圖片，也可以是某種顏色塗層。
官方網址為 http://wscratchpad.websanova.com/
1.2 頁面加載
public Model.wx_ggkActionInfo ggkAction = new Model.wx_ggkActionInfo();
BLL.wx_ggkActionInfo actbll = new BLL.wx_ggkActionInfo();
BLL.wx_ggkAwardItem itemBll = new BLL.wx_ggkAwardItem();
BLL.wx_ggkAwardUser ubll = new BLL.wx_ggkAwardUser();
BLL.wx_ggkUsersTemp utbll = new BLL.wx_ggkUsersTemp();
string NoAward = "謝謝參與";
protected string errorInfo = "";
protected void Page_Load(object sender, EventArgs e)
{
OnlyWeiXinLook();
if (!IsPostBack)
{
int aid = MyCommFun.RequestInt("aid", 0);
int wid = MyCommFun.RequestInt("wid", 0);
string openid = MyCommFun.RequestOpenid();
if (aid == 0 || wid == 0 || openid.Trim() == "" | openid.Trim() == "loseopenid")
{
errorInfo="訪問的參數有問題!";
ggkAction = null;
return;
}
bindData(aid, openid);
}
}
1.3 綁定頁面上的基本信息
private void bindData(int id, string openid)
{
#region 活動詳情
ggkAction = actbll.GetModel(id);
if (ggkAction == null)
{
errorInfo = "該活動不存在!";
return;
}
if (ggkAction.endDate <= DateTime.Now)
{ //說明活動已經結束
errorInfo = "活動已結束!";
ggkAction = null;
return;
}
else if (ggkAction.beginDate > DateTime.Now)
{
//活動未開始
errorInfo = "活動尚未開始!<br/>活動時間為：" + ggkAction.beginDate.ToString() + "到" + ggkAction.endDate.ToString();
ggkAction = null;
return;
}
this.Title = ggkAction.actName;
List<Model.wx_ggkAwardItem> itemlist = itemBll.GetModelList("actId="+id);
StringBuilder sb = new StringBuilder("");
Model.wx_ggkAwardItem item = new Model.wx_ggkAwardItem();
int ttJpNum = 0;//實際獎品數量
for (int i = 0; i < itemlist.Count; i++)
{
item = itemlist[i];
sb.Append("<p>" +item.jxName + "：" + item.jpName + " 數量：" + item.jpNum + "</p>");
ttJpNum += item.jpRealNum.Value;
}
if (ggkAction.djPwd.Trim().Length > 0)
{
litPwd.Text = " <p> <input name=\"\" class=\"px\" id=\"parssword\" type=\"password\" value=\"\" placeholder=\"商家輸入兌獎密碼\"></p>";
}
litJiangXing.Text = sb.ToString();
litRemark.Text = ggkAction.brief;
litContentInfo.Text = ggkAction.contractInfo;
litTTTimes.Text = ggkAction.personMaxTimes == null ? "0" : ggkAction.personMaxTimes.Value.ToString();
#endregion
lock (this)
{
ProcZJ(ttJpNum, id, openid, itemlist);
}
}
1.4 處理中獎信息
private void ProcZJ(int ttJpNum, int id, string openid, List<Model.wx_ggkAwardItem> itemlist)
{
BLL.ggkProc gproc = new BLL.ggkProc();
#region 判斷
Model.wx_ggkAwardUser awardUser = ubll.getZJinfoByOpenid(id, openid);
litRemainTimes.Text = gproc.personCJTimes(openid, id).ToString();
if (awardUser != null && awardUser.id > 0)
{ //說明已經中獎了
litPrize.Text = awardUser.jxName;
hidAwardId.Value = awardUser.id.ToString();
if (awardUser.uTel != null && awardUser.uTel.Trim() != "")
{ //說明已經提交成功了
hidStatus.Value = "110";
hidErrInfo.Value = "您已中過獎了，歡迎下次再來！";
litJp.Text = awardUser.jxName + " " + awardUser.jpName;
litSNM.Text = awardUser.sn;
if (awardUser.hasLingQu)
{
litLQStatus.Text = "你已經兌獎成功，本SN碼自定作廢!";
}
else
{
litLQStatus.Text = ggkAction.contractInfo;
}
}
else
{ //中獎了，但是未提交
hidStatus.Value = "100";
hidErrInfo.Value = "您已中獎，請提交！";
litJiangPing.Text = awardUser.jpName;
litSnCode.Text = awardUser.sn;
litJp.Text = awardUser.jxName + " " + awardUser.jpName;
litSNM.Text = awardUser.sn;
}
return;
}
int dayMaxTimes = ggkAction.dayMaxTimes == null ? 0 : ggkAction.dayMaxTimes.Value;
int perMaxTimes = ggkAction.personMaxTimes == null ? 0 : ggkAction.personMaxTimes.Value;
//判斷每人最大抽獎次數，是否超過了
if (gproc.personCJTimes(openid, id) >= ggkAction.personMaxTimes)
{
hidStatus.Value = "0";
hidErrInfo.Value = "您已抽過獎了，歡迎下次再來！";
return;
}
int RemainTime = 0;
if (gproc.isTodayOverSum(id, openid, dayMaxTimes, out RemainTime))
{
hidStatus.Value = "0";
hidErrInfo.Value = "每人每天只有" + dayMaxTimes.ToString() + "次抽獎機會。";
litRemainTimes.Text = RemainTime.ToString();
return;
}
litRemainTimes.Text = RemainTime.ToString();
#endregion
#region 計算中獎信息
/// 處理是否中獎
/// hidStatus 狀態為-1：不能抽獎，直接跳轉到end.aspx頁面；
/// 0：抽獎次數超過設置的最高次數；
/// 1：還可以繼續抽獎；
/// 2：中獎了；
IList<Model.wx_ggkAwardUser> auserlist = ubll.getHasZJList(id);//已經中獎的人列表
int ZhongJiangNum = 0;
if (auserlist != null)
{
ZhongJiangNum = auserlist.Count; //已經中獎的人數
}
int syZjNum = ttJpNum - ZhongJiangNum; //剩余的獎品數量
if (syZjNum <= 0)
{ //說明已經沒有獎品了
hidStatus.Value = "1";
hidErrInfo.Value = ggkAction.cfcjhf;
litPrize.Text = NoAward;
return;
}
ggkAction.personNum = MyCommFun.Obj2Int(ggkAction.personNum, 1);
ggkAction.personMaxTimes = MyCommFun.Obj2Int(ggkAction.personMaxTimes, 1);
int fenmo = ggkAction.personNum.Value * ggkAction.personMaxTimes.Value;
Random rd = new Random((int)DateTime.Now.Ticks);
int radNum = rd.Next(0, fenmo);//從0到fenmo里隨機出一個值
if (radNum < syZjNum)
{
//中獎了，再從剩余獎品里抽取一個獎品
Model.wx_ggkAwardItem dajiang = gproc.getZJItem(itemlist, auserlist);
if (dajiang != null)
{
//這是中的中獎了
string snumber = gproc.Get_snumber(id);
int uId = ubll.Add(id, "", "", openid, dajiang.jxName, dajiang.jpName, snumber);
hidStatus.Value = "2";
hidErrInfo.Value = "恭喜你中獎了！";
litPrize.Text = dajiang.jxName;
litJiangPing.Text = dajiang.jpName;
hidAwardId.Value = uId.ToString();
litSnCode.Text = snumber;
litJp.Text = dajiang.jxName + " " + dajiang.jpName;
litSNM.Text = snumber;
return;
}
else
{
//獎品已經全部中完了
hidStatus.Value = "1";
hidErrInfo.Value = ggkAction.cfcjhf;
litPrize.Text = NoAward;
return;
}
}
else
{
//這個條件說明：未中獎
//拋出未中獎的數據
hidStatus.Value = "1";
hidErrInfo.Value = ggkAction.cfcjhf;
litPrize.Text = NoAward;
}
#endregion
}
2. 實現提交手機的邏輯
public class ggkAct : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/json";
string _action = MyCommFun.QueryString("myact");
string openid = MyCommFun.RequestOpenid(); //得到微信用戶的openid
if (_action == "update")
{
try
{
#region 提交手機
/// 提交手機號碼
string tel = MyCommFun.QueryString("tel");
string pwd = MyCommFun.QueryString("pwd");
string snumber = MyCommFun.QueryString("snumber");
int id = MyCommFun.RequestInt("id");
int aid = MyCommFun.RequestInt("aid");
if (aid==0 || id == 0 || snumber == "" || tel == "")
{
context.Response.Write("{\"msg\":\"提交出現異常！！\",\"success\":\"0\"}");
return;
}
BLL.wx_ggkActionInfo actBll = new BLL.wx_ggkActionInfo();
if (pwd.Trim().Length>0 &&(!actBll.ExistsPwd(aid, pwd)))
{
context.Response.Write("{\"msg\":\"商家兌換密碼錯誤！！\",\"success\":\"0\"}");
return;
}
BLL.wx_ggkAwardUser ubll = new BLL.wx_ggkAwardUser();
Model.wx_ggkAwardUser model = ubll.GetModel(id);
if (model == null)
{
context.Response.Write("{\"msg\":\"提交出現異常2！！\",\"success\":\"0\"}");
return;
}
model.uTel = tel;
if (pwd.Trim().Length > 0)
{
model.hasLingQu = true;
}
else
{
model.hasLingQu = false;
}
ubll.Update(model);
context.Response.Write("{\"msg\":\"提交成功！\",\"success\":\"1\"}");
return;
#endregion
}
catch
{
context.Response.Write("{\"msg\":\"提交出現異常！！\",\"success\":\"0\"}");
return;
}
}
}
public bool IsReusable
{
get
{
return false;
}
}
}