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

通过微信公众号跳转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