H5微信单页读书日活动

Posted 2021-01-12 你今天学习了吗

1. 页面方面

（1）单页面应用，使用jquery 绑定click事件来控制页面更换显示

（2）ajax请求获取图片数据，和海报名人名言数据

2.微信分享

（1）配置签名，后台导入微信第三方库配置签名，前端post方法向后台请求数据

3.授权登录实现：

　　首先，进入活动，判断是否为微信浏览器，如果是，则判断用户是否登录，

　　　　1.若未登录，则window.location.href重定向到授权登录页面

       　　　携带appid（公众号唯一标识），redirect_uri（授权后重定向回调链接地址），scope，授权作用域（snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）），打开授权登录页面，

　　　　2.用户同意授权后，返回一个code，页面跳转redirect_uri/?code=CODE&state=STATE。

　　　　3.通过code换取access_token，通过appid，appsecret（公众号的秘钥），code请求access_token

　　　　4.若同意，返回用户openid 与access_token

　　　　5.若为snsapi_userinfo，通过access_token和openid可以获取用户信息

实际操作：授权登录时，通过token换取用户信息时，将信息保存到数据库，加一个guid标识符（2小时失效），guid标识符会被拼接到重定向url之后，取用户信息时，使用guid去取；数据库中有两个表，分别存用户授权登录的信息（appid，openid，guid）和用户个人信息，用guid换取appid和openid去取用户信息，授权登录完成后，页面跳转到首页，携带了openid与guid参数，此时再次判断是否登录，将openid保存至SessionHelper（本地的小型数据库），再重定向到首页，此时判断用户登录方式（扫码登录（扫自己的或别人的）/直接进入）

由于海报末尾会生成二维码，生成二维码的时候带上原来保存的openid，标识为个人的friendid，若扫码进入页面，则有friendid，

和获取到的openid进行比较，若相等，则说明扫自己的码，若不等，则扫别人的码。都要存记录到数据库