通过微信公众号跳转H5页面领取现金红包

项目目的

通过公司微信公众号领取现金奖励

面向对象

公司内部员工

产品逻辑：

1.在微信公众号底部栏加一项“领取奖励”，点击“领取奖励”进入到一个H5页面，页面内容是“输入手机号”与“输入验证码”，“获取验证码”按钮，“领取奖励”按钮。

2.在最开始时，需要将H5页面的地址给到后台人员，配置好，方便获取code。
进入页面时，前端人员在地址栏中截取code，并存储。

3.前端人员需自行判断手机号的格式是否正确。

4.用户在输入手机号后，点击“获取验证码”时，前端向后台调获取验证码的接口，此时后台会给到一个标识true或false，当前用户是否有现金奖励。

5.用户在输入验证码之后，点击“领取”奖励按钮时，如果后台前面给到的标识是false，那么出现弹框“您暂时无现金奖励”。

6.如果后台前面给到的标识是true，那么调后台接口，将手机号，验证码和code一起传给后台获取用户的openId。后台来控制红包的发放。

技术逻辑：

1.获取code的注意点
①首先是成为当前公众号的开发者。具体设置：微信公众平台–开发者工具–web开发者工具中将自己的微信号绑定为开发者。

②保存开发者ID和密码，并配置好ip白名单。具体设置：微信公众平台–基本配置–启用开发者密码。

③配置好js接口安全域名和网页授权域名。具体设置：微信公众平台–公众号设置–功能设置。需要注意：每个月只能改3次，最好一次性把开发环境，测试环境，和线上环境都配置好，然后把网页授权域名配置为开发环境，方便后期调试。

④在公众号的自定义菜单里，将url按照固定格式拼接，填上去。

⑤用开发者工具调试，每次点击回车，url都会发生改变，url中会有code字段，code每次都是不一样的。

⑥将微信返回的url转化为jsom对象，通过字符串截取的方式获得。

代码如下：

function setUrlData() {var str = decodeURI(window.location.search);// var str = decodeURI('?id=15618040519&from=wx&openId=oJ-UZ0aOWfU02oXUFxmonVgA-jvg');var obj = {}var data = str.substr(1).split('&');for(var value of data ) {obj[value.split('=')[0]] = value.split('=')[1]}return obj
}var urldata = setUrlData();
console.log(urldata);
var code = urldata.code;

2.在点击“获取验证码”按钮时
①首先判断手机号的格式是否正确
通过正则表达式

如果手机号的格式不正确
提示“请输入正确的手机号”，验证码地方不改变
如果手机号的格式正确，
1.并且手机号符合规定，”获取验证码“====>“60s”，setInterVal(),再调后台的接口，获取验证码
2.如果手机号不符合规定，验证码地方不变，input框提示“请输入正确的手机号”

代码如下：

function judgeCode(){code = $(".codeInput").val();if(!(/^\d{4,6}$/.test(code))){$(".codeInput").addClass("default");$(".codeInput").val("请输入正确的验证码");return false;}return true;
}

如果验证码的格式正确：
将手机号和验证码还有code一起传给后台，调后台接口
成功之后，发送红包

3.如果奖励金额大于200元，则需要发多个红包
因为微信红包最多可以发200元红包