【早起签到】CSS样式表（2）：0成果展示

　　【早起签到】CSS样式表（2）：0成果展示

　　0 结果显示

　　这篇文章比较长。为了减少读者的时间，先把这个项目的结果展示出来，让读者可以快速确认这个文章是否就是他们要找的文章。

　　这里需要说明一下，项目中的前端页面配*敏*感*词*是指网上发布的CSS样式表。

　　有关项目的详细信息，请稍后查看。

　　0.1 登录主页：

　　用户点击公众号菜单【提前登录】后，会实现微信自动登录，进入登录主页面。

　　

　　主页显示如下：

　　

　　左图：缺席签到时间。中图：签到页面。右图：签到完成后显示排名页面。

　　主页面分为三个显示页面。无人签到时间（0:00-05:50）如上左图所示。当到达签到时间时，可以点击按钮状态，如上中图所示。登录完成后，会显示用户在公众号当天的登录位置。

　　0.2 签到记录页面

　　用户登录后，可以查看自己的登录记录。详情如下图所示：

　　

　　左图：可兑换奖励签到记录和过期签到记录 右图：兑换签到记录

　　本项目用户登录后，可于当日或次日06:50-08:30在指定地点领取奖励。过了这个时间，这个登录记录就失效了。三种状态的签到记录如上图所示。

　　0.3后台交流页面

　　下图为后台交易所的测试页面。输入登录ID查询登录记录。

　　

　　左图：查询过期的登录记录。中图：查询已兑换的登录记录。右图：查询可兑换的登录记录。

　　如上图所示。如果前来兑换的用户的登录记录已过期，则会如上左图显示。如果用户的签到记录已经被兑换，会如上中图显示。如果用户的签到记录可兑换，则会如右上图所示。

　　点击“立即兑换”按钮，出现“兑换成功”弹窗，如下图。

　　

　　兑换成功弹窗（在微信开发者工具中运行）

　　看到这里，如果这不是你想要的项目，那么你可以关闭这个博客。

　　如果这是你想要的项目，或者这个项目和你当前的项目很接近，或者你想学习如何写这个项目，或者...

　　请继续阅读。下面正式开始^_^

　　1项目背景及需求分析1.1项目背景

　　关于这个需求分析部分，我们先从项目的背景说起。

　　原因是这个。项目组在公众号举办活动。这个活动简单易懂，就是“早起签到领取奖励”。每天早上指定时间开启签到系统，然后用户点击菜单栏中的“提前签到”按钮，通过微信登录，进入签到系统。

　　用户登录完成后，用户可以根据登录记录到指定地点领取早餐。同时，每日早餐数量有限，先到先得。同时，签到记录也有兑换期。本项目组指定的方案可在当日或次日8:30前收到。所以我今天check in，第二天早上就没有早餐了^_^

　　1.2 需求分析

　　通过对项目背景的分析，本项目需求如下：

　　1、本项目为公众号项目，微信网页开发；

　　2、实现用户微信登录授权确定用户身份，实现一天只能登录一次；

　　3、用户登录后，记录登录时间和当天登录排名；

　　4、显示用户的签到记录和签到记录的状态（可兑换、已兑换、已过期）；

　　5、Background 管理员确认兑换。

　　2概述设计2.1开发技术分析

　　既然是微信网页的开发，要实现用户登录，那么就需要了解微信公众号网页的授权机制。

　　微信开放平台有这方面的使用说明介绍，大家可以通过开发者的文档自行学习。链接如下：

　　具体来说，网页授权过程分为四个步骤：

　　1、引导用户进入授权页面同意授权并获取验证码

　　2、交换网页授权access_token代码（与基础支持的access_token不同）

　　3、如有需要，开发者可以刷新网页对access_token进行授权，避免过期

　　4、通过网页授权access_token和openid获取用户基本信息（支持UnionID机制​​）

　　只有通过微信认证的服务账号才能使用“Web授权”界面。

　　

　　如果要用于开发测试，可以申请一个测试账号。申请链接如下：

　　微信网页授权登录的详细流程将在实践代码（后面编码实现流程）中进行说明。

　　———————————————————————

　　然后需要分析确定开发语言。

　　微信网页可以用任何网页开发语言实现。

　　但是结合这个项目，需要对数据库中的数据进行增删改查，所以最终使用的编程语言是PHP。

　　（此时笔者还没有接触到PHP开发o(╥﹏╥)o，笔者熟悉的web开发语言是Java Web。所以编码实现过程，如有不对之处请指教忍着我(*^▽^*))

　　最后，数据库使用 MySQL。

　　2.2数据库设计

　　项目本身不大，所以设计的数据库形式也很简单。

　　第一个是用户表。

　　本项目中，只需要获取用户为本公众号生成的唯一标识OpenID，无需获取用户昵称、城市、头像等其他公开信息。如果您需要有关用户的这些信息，可以展开用户表。

　　user表的user字段只有2列。如下图所示：

　　

　　各个字段的含义：

　　然后是用户登录记录表。签到表详情如下：

　　

　　各个字段的含义：

　　如果您的项目需要其他形式，您可以自行设计。

　　3 开发环境配置

　　工人要想做好本职工作，就必须先磨砺他的工具。开发前，需要先配置好开发环境。

　　

　　使用的四个软件

　　3.1 编程环境：

　　本项目使用PHP语言。所以编译器使用了JetBrains PhpStorm。

　　PHPStorm 是付费软件。如果你是学生用户，有教育邮箱，可以到JetBrains官网授权免费版。

　　3.2 编译环境：

　　在项目编写过程中，调试是不可避免的。所以这里使用的PHP网页运行环境是phpStudy。

　　本软件是免费软件。详情请查看phpStudy官网相关文档。

　　3.3MySQL 数据库可视化：

　　在调试过程中，不可避免地要对数据库中的数据进行校验和检查。

　　作者使用的MySQL数据库可视化工具是Navicat for MySQL。

　　本软件为付费软件。

　　3.4网页调试：

　　如何调试公众号网页？微信公众平台开发者工具栏提供网页开发者工具：微信网页开发者工具

　　

　　如上图所示，点击【web开发者工具】跳转到绑定开发者的微信账号页面。这里我们绑定了开发者的微信账号。

　　

　　然后去：下载微信网页开发工具电脑客户端。

　　下载安装后，运行后需要开发者扫描登录才能运行。运行页面如下：

　　

　　

　　3.5微信公众后台配置

　　如果直接在公众号菜单栏配置完成的项目，微信将无法识别你的项目。

　　但是这个程序不配置公众号后台O(∩_∩)O

　　所谓公众号后台配置，就是获取公众号秘钥，并将域名加入公众号界面白名单的过程。

　　详情如下：

　　3.5.1配置域名

　　项目最终需要使用域名访问。并且域名必须启用SSL证书（HTTPS协议）

　　关于如何在PHPStudy中配置SSL证书，笔者之前写过，点此查看。

　　这里是关于将域名加入公众号“白名单”。

　　首先进入公众号后台，点击【设置】>>【公众号设置】>>【功能设置】，如下图：

　　

　　点击上面红框内两个模块的设置，为域名添加授权。

　　为了验证您是否拥有域名，您需要将指定文件上传到域名服务器目录进行验证。如下图所示：

　　

　　具体的配置过程，按照上图的提示进行配置即可。

　　微信公众号支持配置2个网页授权域名和3个JS接口安全域名。

　　3.5.2 配置IP白名单

　　本项目需要使用access_token接口，所以需要配置网站最终部署到IP白名单的服务器的IP地址！

　　即把域名解析的IP地址配置到公众号IP白名单（详见域名解析列表）。

　　在微信公众平台后台点击【开发】>>【基础配置】修改IP白名单配置。

　　

　　点击上图下方红框中的【查看】查看和修改IP白名单。

　　

　　3.5.3获取开发者密码

　　开发者密码是用于验证公众号开发者身份的密码，具有极高的安全性。

　　在微信公众平台后台点击【开发】>>【基础配置】重置开发者密码。

　　

　　重要提示：这里需要记录开发者ID（AppID）和开发者密码（AppSecret）！

　　重要提示：这里需要记录开发者ID（AppID）和开发者密码（AppSecret）！

　　重要提示：这里需要记录开发者ID（AppID）和开发者密码（AppSecret）！

　　4 编码实现

　　据说PHP是一种松散的语言。作者也是第一次接触PHP，用PHP来实现这个项目...总体感觉PHP非常好用\(^o^)/~

　　项目本身不大，客户端有2个页面，所以没有框架，也没有MVC开发模型（以下模仿MVC开发模型）

　　4.1 模型（Model）层DAO类代码：

　　首先，您需要创建一个新的 Dao 类。该类实现了Dao类的构造，用于处理数据库中的数据。

　　流行的一般是实现数据库的增删改查，所以所有的SQL语句都在这里执行。

　　文件名：dao.php

　　详细代码和注释如下：

　　

早起签到

images/banner.jpg

5:50开启今日签到

立即签到

今日签到名次：

<p align="right">>>我的签到记录　　

活动详情

1、每日05:50至23:59开启早起签到。

2、其他内容……

3、其他内容……

技术支持：@拾年之璐

</p>

　　本主页使用的CSS文件来自互联网，长度较长。会在文末展示。

　　这里注意，在上面代码中“立即登录”按钮所在的表单中，动作是跳转到sign.php文件，注意这里！

　　所以你需要编写sign.php文件。这个文件是一个控制页和一个跳转页。详细代码如下：

　　文件名：sign.php

　　

我的签到记录

images/banner.jpg

我的签到记录

<p>签到ID：　　　　当日签到名次：

签到时间：<a style="font-weight: bold;color:green">　　可兑换</a><a style="font-weight: bold;color:red">　　已兑换</a>

兑换时间：

<a style="font-weight: bold;color:orange">　　已过期</a>

您还没有签到记录，快去签到吧^_^

返回

</p>

　　4.6后台兑换页面

　　

　　后台交换页面是一个非常简单的 HTML 页面。其中主要由两个PHP文件组成：

　　主页文件名：search.php

　　完整代码：

　　

后台查询系统

input{

border: 1px solid #ccc;

padding: 10px 0px;

border-radius: 5px; /*css3属性IE不支持*/

padding-left:10px;

width: 150px;

}

.btn5{ display:block;

border:0px;

margin:0rem auto 0% auto;

width: 94%;

background-color: #ef2122;

text-align: center;

font-weight: bold;

font-size:17px ;

color: #fff3f0;

border-radius: 10px;

}

function doAction() {

var usersignid = document.getElementById("usersignid");

window.location.href = "a.php?usersignid="+ usersignid.value;

}

用户签到记录

<p>签到ID：　　　　签到名次：

签到时间：<a style="font-weight: bold;color:green">　　可兑换</a>

立即兑换

<a style="font-weight: bold;color:red">　　已兑换</a>

兑换时间：

<a style="font-weight: bold;color:orangered">　　已过期</a>

未查询到该签到记录！

</p>

　　兑换按钮文件名：submit.php

　　完整代码：

<p>