Mikel
来源： 通过微信公众号跳转H5页面领取现金红包_h5微信公众号发红包api_webMoonV的博客-CSDN博客
通过微信公众号跳转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元红包
————————————————
版权声明：本文为CSDN博主「webMoonV」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_35176149/article/details/89459809
