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进行比较,若相等,则说明扫自己的码,若不等,则扫别人的码。都要存记录到数据库

H5微信单页读书日活动的更多相关文章

  1. [Angularjs]asp.net mvc+angularjs+web api单页应用

    写在前面 最近的工作一直在弄一些h5的单页应用,然后嵌入到app的webview中.之前一直在用angularjs+html+ashx的一套东西.实在是玩腻了.然后就尝试通过asp.net mvc的方 ...

  2. Vue单页式应用(Hash模式下)实现微信分享

    前端微信分享的基本步骤: 一.绑定域名: 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名".这个不多说,微信开发 ...

  3. vue 单页应用中微信支付的坑

    vue 单页应用中微信支付的坑 标签(空格分隔): 微信 支付 坑 vue 场景 在微信H5页面(使用 vue-router2 控制路由的 vue2 单页应用项目)中使用微信 jssdk 进行微信支付 ...

  4. 【读书笔记《Bootstrap 实战》】6.单页营销网站

    我们已经掌握了很多实用 Bootstrap  的重要技能.现在,是时候拿出更多的创意来帮助客户实现他们全方位在线营销的愿望了.此次将带领大家做一个漂亮的单页高端营销网站. 主要任务如下: □ 一个大型 ...

  5. 【读书笔记】WebApi 和 SPA(单页应用)--knockout的使用

    Web API从MVC4开始出现,可以服务于Asp.Net下的任何web应用,本文将介绍Web api在单页应用中的使用.什么是单页应用?Single-Page Application最常用的定义:一 ...

  6. spa(单页应用)中,使用history模式时,微信长按识别二维码在ios下失效的问题

    spa(单页应用,vue)中,使用history模式时,微信长按识别二维码在ios下失效的问题. 触发条件: spa单页应用: 路由模式 history 从其他页面跳转到带有微信二维码识别的页面(不是 ...

  7. h5微信支付在微信内页使用微信公众号支付

    由于app的迭代,原本的微信支付是使用原生写的 然后h5这边做交互,现在需要修改使用h5的微信支付,于是就有了现在的这个例子,微信支付其实对于我们前端来说就是调用接口然后,根据链接进行支付,其中有点坑 ...

  8. 记录一下对swiper4.x.js在H5单页中的滑动优化

    应用场景 仅仅应用于单页应用的滑动操作,用swiper4.x接管页面的滚动操作.用来支持顶部和尾部的回弹效果,进一步来支持常见那种下拉刷新动画效果.不适用于轮播图那种应用场景. 虽然只是针对swipe ...

  9. VueJs单页应用实现微信网页授权及微信分享功能

    在实际开发中,无论是做PC端.WebApp端还是微信公众号等类型的项目的时候,或多或少都会涉及到微信相关的开发,最近公司项目要求实现微信网页授权,并获取微信用户基本信息的功能及微信分享的功能,现在总算 ...

随机推荐

  1. python练习册0006

    第 0006 题:你有一个目录,放了你一个月的日记,都是 txt,为了避免分词的问题,假设内容都是英文,请统计出你认为每篇日记最重要的词. import re import os def get_li ...

  2. (Access denied for user 'root'@'slaver1' (using password: YES))

    1.问题描述,启动azkaban的时候报如下所示的错误.之前使用azkaban是root用户,今天使用hadoop用户进行配置和使用,报这个错,说是root连接mysql拒绝了. [hadoop@sl ...

  3. fputcsv导出大量数据

    <?php set_time_limit(0); ini_set('memory_limit', '128M'); $fileName = date('YmdHis', time()); hea ...

  4. alpha冲刺2/10

    目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:拿快递也不能耽搁了软工 团队部分 后敬甲(组长) 过去两天完成了哪些任务 文字描述 github代码管理规范 商家端订单 ...

  5. 【Android】GestureDetector类及其用法

    当用户触摸屏幕的时候,会产生许多手势,例如down,up,scroll,filing等等. 一般情况下,我们知道View类有个View.OnTouchListener内部接口,通过重写他的onTouc ...

  6. Django 1.11.7学习,配置MySQL数据库(python3.5)

    1.链接MySQL数据库 a.导入pymysql包 import pymysql pymysql.install_as_MySQLdb() b.改变DATABASES参数 ENGINE : 指定数据库 ...

  7. Linux安装Tomcat-Nginx-FastDFS-Redis-Solr-集群——【第十二集之FastDFS的使用】

    (自己的项目路径)相关项目在web部分中priv.lirenhe.fastdfs 官方提供一个fastdfs开发项目,下载下来maven install 以下内容是借鉴网上的一篇文章,但是不知道网址了 ...

  8. Windows10家庭版如何升级至Windows10专业版

    Windows10家庭版和专业版系统文件其实是一样的iso镜像文件,但是由于Microsoft某些限制导致一些用户无法享受到专业版的福利,说实话这是一种很让人蛋疼的操作... 接下来我来告诉各位如何把 ...

  9. 牛客练习赛28B (经典)【线段树】

    <题目链接> qn姐姐最好了~     qn姐姐给你了一个长度为n的序列还有m次操作让你玩,     1 l r 询问区间[l,r]内的元素和     2 l r 询问区间[l,r]内的元 ...

  10. anaconda源配置

    1. 生成配置文件 第一次运行 conda config命令时,将会在用户的home目录创建该文件..condarc配置文件,是一种可选的(optional)运行期配置文件,其默认情况下是不存在的. ...