东钿微信公众平台新版上线 需要一个引导用户操作步骤。设置一个cookie师傅偶第一次访问此页面 。如果是则跳出用户引导,如果不是,正常显示。
一开始在百度了一段jquery cookie插件,也没仔细看,直接拿过来用,在pc端测试时好时坏,手机端也是,没那么在意。但是上级领导要求一定要修此bug,于是乎,看了一下这个cookie插件 ,插件里面是通过判断url。然后微信里面的url经常变迁万化,所以时好时坏。
接下来百度了几天,群里也问了许久没一人回答。好多人听不到我要cookie干嘛 。可能是我需求没说清楚。所以没人理我。但是我自己思路一直是清楚的,就是不知道怎么代码。最后还是在领导的指引下,使用jquery 官方自带的cookie库。在页面上写了个cookie,代码如下
//设置cookie 如果用户第一次进入页面就显示引导用户步骤
//var strCookie=document.cookie;
//判断浏览器是否有叫‘the_cookie’值为visited的cookie,没有则执行if里面的语句,第一次用户进入当然是没有,所以可以执行,执行完引导步骤,再通过设置‘the_cookie’的值为visited。所以当用户第二次进入页面的时候,the_cookie就等于visited了,就不会执行if里面的语句。测试了,可以执行。试过种种方法都有bug。就这个可以,所以东西还是官方的好。
if($.cookie(‘the_cookie‘)!=‘visited‘){ //关键代码,
$(".stepbox").show("slow",function(){
$("html,body").css("overflow","hidden");
});
$(".stepbox .step1").click(function(){
$(this).hide();
$(".stepbox").css("z-index",97);
$(".step2").show();
})
$(".stepbox .step2").click(function(){
$(this).hide();
$(".stepbox").css("z-index",97);
$(".step3").show();
});
$(".stepbox .step3").click(function(){
$(this).parents(".stepbox").hide("slow",function(){});
$("html,body").css("overflow","auto");
});
$.cookie(‘the_cookie‘, ‘visited‘); //关键代码,
}