扶贫抽奖活动一些总结

进公司后参与做了两个推广活动，其他时间都在学习RN，最近做了一个微信端扶贫推广抽奖活动，功能没有很复杂，主要是抽奖，但是跟着新领导学习了一些新工具和知识，记录一下。

Token，Cookie，Session token 就是令牌，比如你授权（登录）一个程序时，他就是个依据，判断你是否已经授权该软件；cookie就是写在客户端的一个txt文件，里面包括你登录信息之类的，这样你下次再登录某个网站，就会自动调用cookie自动登录用户名；session和cookie差不多，只是session是写在服务器端的文件，也需要在客户端写入cookie文件，但是文件里是你的浏览器编号，session的状态是存储在服务器端，客户端只有session id,而token的状态是存储在客户端。具体可参考博客：https://blog.csdn.net/jikeehuang/article/details/51488020

活动中用到微信端token和openid，根据这两个值判断用户是否登录和登录后是否抽过奖。

//getcookie
function getCookie(c_name){
	if (document.cookie.length>0){
		c_start=document.cookie.indexOf(c_name + "=")
		if (c_start!=-1){ 
			c_start=c_start + c_name.length+1 
			c_end=document.cookie.indexOf(";",c_start)
			if (c_end==-1) c_end=document.cookie.length
				return unescape(document.cookie.substring(c_start,c_end))
		} 
	}
	return false;
}
var token  = getCookie('user_access_token');
var openid = getCookie('openid');

2.SFTP 在sublime中安装SFTP插件，可以同步线上代码，安装步骤： Preference–>Package Control，输入Install Package后回车,输入SFTP,安装即可。快捷键：ctrl+shift+P调出搜索菜单，输入PCI，调出package control, 输入SFTP，点击安装。安装后在sftp-config.json中修改相关配置项，保存后就可以了，使用的时候右键弹出菜单即可。

3.postMan 看到php后台用这个工具调试接口，顺带了解一下。下载postman: https://www.getpostman.com/

4.ajax加载的时候弹出loading框，很常规的功能，记录下代码 layer弹窗比较好用，首先要加载layer.js，在ajax里面添加这两个钩子函数

beforeSend:function(){
    index = layer.load(1, {
        shade: [0.5,'#fff'] //0.1透明度的白色背景
    });
},
complete: function () {
    layer.close(index);
}

5.页面经常会因为缓存的问题导致不能及时更新，可以在js和css文件后面加’?num’，每次改版后改变num,这样会强制刷新js和css文件

6.活动中抽奖页面是以modal弹窗形式出现，即当用户转发朋友圈或转发朋友的时候，就弹出模态框提醒有抽奖机会。遇到了一个bug就是在ios端，弹窗可以弹出，但是android端不能弹出，最后的原因是老大发现的，就是onMenuShareAppMessage事件和onMenuShareTimeline事件要放在wx.ready()函数里面，便可以避免这种情况。

//微信分享给抽奖机会
$.ajax({
    type:'GET',
    dataType: "json",
    url:"https://www.jingtaomart.com/wx/wx_controll.php?a=getSignPackage",
    success:function(res){
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: '', // 必填，公众号的唯一标识
            timestamp:res.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.nonceStr, // 必填，生成签名的随机串
            signature: res.signature,// 必填，签名
            jsApiList: [
                'onMenuShareAppMessage', 'onMenuShareTimeline'
            ] // 必填，需要使用的JS接口列表
        });
        wx.ready(function () {
            //分享给朋友
            wx.onMenuShareAppMessage({
                title: '***', // 分享标题
                desc: '****', // 分享描述
                link: '****', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: '****', // 分享图标
                type: 'link', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {
                    // 用户点击了分享后执行的回调函数
                    $('.share').hide();
                    $("#myModal").modal("show");
                },
            });

            // 分享朋友圈
            wx.onMenuShareTimeline({
                title: '****', // 分享标题
                // desc: '****', // 分享描述
                link: '****', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: '****', // 分享图标
                success: function () {
                    // 用户点击了分享后执行的回调函数
                    $('.share').hide();
                    $("#myModal").modal("show");
                }
            });
            console.log('wx.ready');
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        });
        wx.error(function (res) {
            console.log('error');
            console.log(res);

            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        });

    },
    cancel: function () {
        console.log('取消Ajax请求');
        // 用户取消分享后执行的回调函数
    }
});

Written on August 3, 2018