版权声明：本文为博主原创文章。转载请联系博主授权。博主微信公众号【知行校园汇】。 https://blog.csdn.net/cxh_1231/article/details/90744494
- 说明：本文讲述基于公众号实现的签到程序的全部开发过程。开发环境：PHP+MySQL。
- 源码下载地址：敬请期待
- 关注微信公众号【知行校园汇】可免费下载全部源码。
- >>点击查看WUTer计算机专业实验汇总
- 谨记：纸上得来终觉浅，绝知此事要躬行。
0 成果展示
本文较长，为了减少读者的时间，先展示本项目的成果图，以便读者快速确实这篇文章是不是正在寻找的文章。
这里有必要说明一下，项目中的前端页面配色配图等参考自网络公开的CSS样式表。
关于项目的详情，请见后文。
0.1 签到主页面：
用户点击公众号的菜单【早起签到】后，即实现自动微信登录，进入签到主页面。
主页面展示如下：
主页面分为三个展示页面。未到签到时间（0:00到05:50期间）显示图如上左图所示。到签到时间时，按钮状态可点击，如上中图。签到完成后，将显示该用户在本公众号的当日签到名次。
0.2 签到记录页
用户签到后，可以查看本用户自己的签到记录。详情如下图所示：
在本项目中，用户签到后，可以在本日或者次日的06:50至08:30到指定地点领取奖励。超过这个时间，本条签到记录即作废。三种状态的签到记录如上图所示。
0.3 后台兑换页
下图为后台兑换的测试页面。输入签到ID即可查询该签到记录。
如上图。如果前来兑换的用户的签到记录已过期，则显示如上左图所示。如果用户的签到记录已兑换，则显示如上中图所示。如果用户的签到记录可兑换，则显示如上右图所示。
点击“立即兑换”按钮，则显示“兑换成功”弹窗，如下图所示。
看到这里，如果这不是你想要的项目，那么你可以关闭本篇博客了。
如果这是你想要的项目，或者本项目和你当前项目接近，或者想学习这个项目的编写，或者……
请继续往下看。下面正式开始^_^
1 项目背景与需求分析
1.1 项目背景
关于此需求分析部分，先从项目的背景说起吧。
起因是这样的。项目组要在公众号内举办一个活动。这个活动简单易懂，就是“早起签到领奖励”。每天早上指定时间开启签到系统，然后用户点击菜单栏的“早起签到”按钮，即可通过微信登录后，进入签到系统。
用户签到完成后，用户可以凭签到记录到指定地点领取早餐一份。同时每日的早餐限量，所以先到先得。同时签到记录也有兑换期限，本项目组指定的计划是本日或者次日的8:30前均可领取。所以今天签到，后天早上就领不到早餐了^_^
1.2 需求分析
通过对项目背景的分析，本项目的需求有如下几部分：
1、本项目为公众号项目，微信网页开发；
2、实现用户的微信登录授权，以确定用户身份，并实现单日只能签到一次；
3、用户签到后，记录签到时间以及当日签到名次；
4、显示用户签到记录，以及签到记录的状态（可兑换、已兑换、已过期）；
5、后台管理员进行兑换确定。
2 概要设计
2.1 开发技术分析
既然是微信网页开发，并且要实现用户的登录，那么就需要学习一下微信的公众号网页授权机制。
微信开放平台中有关于这方面的使用说明的介绍，可以通过开发者文档自行学习。链接如下：
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842
具体而言，网页授权流程分为四步：
1、引导用户进入授权页面同意授权，获取code
2、通过code换取网页授权access_token（与基础支持中的access_token不同）
3、如果需要，开发者可以刷新网页授权access_token，避免过期
4、通过网页授权access_token和openid获取用户基本信息（支持UnionID机制）
只有通过微信认证的服务号可以使用“网页授权”接口。
如果想用来进行开发测试，可以申请测试账号。申请链接如下：
https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
关于微信网页授权登录的详细过程，将在实践代码中（后边编码实现过程）进行讲解。
————————————————————
然后需要对开发语言进行分析确定。
微信网页可以采用任意Web开发语言实现。
但是结合本项目来说，需要对数据库的数据进行增删改查，所以最终采用的编程语言是PHP。
（在此项目前，笔者未接触过PHP开发o(╥﹏╥)o，笔者熟悉的Web开发语言是Java Web。所以编码实现过程。如有不妥之处，多多包涵(*^▽^*)）
最后数据库采用MySQL。
2.2 数据库设计
这个项目本身并不大，所以设计的数据库表单也很简单。
首先是用户表。
在本项目中，只需要获取用户对此公众号产生的唯一标识OpenID即可，并不需要获取用户的昵称、城市、头像等其他开放信息。如果需要用户的这些信息，可以对user表进行扩展。
用户表user的字段只有2列。如下图所示：
各个字段含义：
- userid：用户在本签到系统中的用户ID，即项目中的唯一标识。主键。int型。
- openid：通过微信授权接口获取的用户在此公众号所产生的唯一标识。int型。
然后是用户签到记录表。signin表单详情如下：
各个字段含义：
- signid：用户签到记录的唯一标识。主键。int型。
- userid：用户ID，为表user的外键。int型。
- signdata：用户签到的时间戳，单位为ms，含义为1970年至今的时间秒数。int型。
- signmon：签到的月份。int型。
- signday：签到记录为本月的第几日。int型
- signhour：签到记录的时。int
- signmin：签到记录的分。int
- mingci：本日签到名次（这里请忽略使用拼音表示Ծ‸Ծ主要是因为排名（rank）为SQL语言的关键字）int
- isused：本签到记录是否已兑换奖品。是：1，否：0。
- usetime：兑换时间，同为时间戳。（上图中此列拼写错误，可忽略。）
如果你的项目还需要其他表单，可自行设计。
3 开发环境配置
工欲善其事，必先利其器。进行开发之前，首先需要对开发环境等进行配置。
3.1 编程环境：
本项目使用ＰＨＰ语言。所以编译程序使用的是JetBrains PhpStorm。
PHPStorm为付费软件。如果你是学生用户，拥有教育邮箱，可以从JetBrains官网授权获取免费版。
3.2 编译环境：
项目编写过程，难免要进行调试。所以这里用到的PHP网页运行环境为phpStudy。
此软件为免费软件。具体如何，可从phpStudy官网查询相关文档。
3.3 MySQL数据库可视化：
调试过程，难免需要对数据库中的数据进行核实检查。
笔者使用的MySQL数据库可视化工具为：Navicat for MySQL。
此软件为付费软件。
3.4 网页调试：
如何对公众号网页进行调试？微信公众平台的开发者工具栏就给出了Web开发者工具：微信web开发者工具
如上图，点击【web开发者工具】，跳转到绑定开发者微信号页面。这里将开发者的微信号进行绑定。
然后前往：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 下载微信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
详细代码以及注释如下所示：
<?php
//模型层，实现与数据库的数据交换
//设置时区
date_default_timezone_set('Asia/Chongqing');
//忽略错误警告
error_reporting(0);
Class Dao{
/**
* constructor：构造函数
*/
function __construct()
{
//这里换成你自己的数据库信息，如服务器地址127.0.0.1，登录名root，密码123456，数据库名qiandao，端口号3306
$this->conn=mysqli_connect("127.0.0.1","root","123456","qiandao","3306");
mysqli_query($this->conn,"SET NAMES gbk");
}
/**
* __destruct：析构函数
*/
function __destruct()
{
// TODO: Implement __destruct() method.
mysqli_close($this->conn);
}
/**
* 根据用户的OpenID查询该用户是否已登录注册
* 输入：用户OpenID
* 返回值：如果注册，返回用户userID，否则，返回0
*/
public function getUser($openid){
$sql="SELECT userid FROM user WHERE openid='".$openid."'";
$results = $this->conn->query($sql);
if($row = $results->fetch_row()){
return $row[0];//返回用户userID
}else{
return 0;//返回0
}
}
/**
* 查询当前数据库中的userID最大值
* 返回：最后注册的用户的userID
*/
public function getMaxUserID(){
$sql="SELECT MAX(userid) FROM user";
$results = $this->conn->query($sql);
if($row = $results->fetch_row()){
return $row[0];//返回用户userID
}else{
return 10000;//返回初始值10000
}
}
/**
* 为该用户创建新用户userID
* 输入：用户OpenID
* 返回：成功true 或者失败 false
*/
public function createID($userid,$openid){
$sql="INSERT INTO user(userid,openid) VALUES('".$userid."','".$openid."')";
$this->conn->query($sql);
}
/**
* 获取目前签到日（signday）中的排名最大值（rank）
* 如果查询为空，说明当日没有签到的用户，返回：0
* 返回：0 或者最大值
*/
public function getMaxRank(){
$now=getdate(date("U"));
$day = $now[mday];
$sql="SELECT MAX(mingci) FROM signin where signday='".$day."'";
$results = $this->conn->query($sql);
if($row = $results->fetch_row()){
//print $row[0];
return $row[0];//返回最大值
}else{
return 0;//返回0
}
}
/**
* 获取当前签到表中签到ID最大值
* 返回：最大签到ID signid
*/
public function getMaxSignID(){
$sql="SELECT MAX(signid) FROM signin";
$results = $this->conn->query($sql);
if($row = $results->fetch_row()){
return $row[0];//返回最大值
}else{
return 10000;//返回0
}
}
/**
* 将签到记录保存至数据库
* 输入：signid userid 签到时间signdata 签到日signday 签到排名rank isuserd默认为0
*/
public function saveSign($signid,$userid,$signdata,$signmon,$signday,$signhour,$signmin,$mingci,$isused,$usertime){
$sql="INSERT INTO signin(signid,userid,signdata,signmon,signday,signhour,signmin,mingci,isused,usertime) VALUES('".$signid."','".$userid."','".$signdata."','".$signmon."','".$signday."','".$signhour."','".$signmin."','".$mingci."','".$isused."','".$usertime."')";
try{
$this->conn->query($sql);
}catch (Exception $exception){
print $exception->getMessage();
return false;
}
return true;
}
/**
* 查询指定用户的当日签到记录
*/
public function judgesign($userid){
$now=getdate(date("U"));
$day = $now[mday];
$sql="SELECT mingci FROM signin WHERE userid='".$userid."' AND signday='".$day."'";
$results = $this->conn->query($sql);
if($row = $results->fetch_row()){
return $row[0];//返回本日的签到名次
}else{
return 0;//返回0，表示名次为0，即未签到
}
}
/**
* 查询所有的签到记录
* 返回：结果集
*/
public function getSign($userid){
$sql = "SELECT signid,signdata,mingci,isused,usertime,signday,signhour,signmin FROM signin WHERE userid='".$userid."' ORDER BY signdata DESC";
$results = $this->conn->query($sql);
return $results;//返回结果集
}
/**
* 查询指定签到ID的签到信息
*/
public function getUserSignInfo($usersignid){
$sql = "SELECT signid,signdata,mingci,isused,usertime,signday,signhour,signmin FROM signin WHERE signid='".$usersignid."'";
$results = $this->conn->query($sql);
return $results;
}
/**
* 更新指定签到ID的签到信息（兑换、兑换时间等）
*/
public function updateSignInfo($usetime,$signid){
$sql = "UPDATE signin SET isused='1',usertime='".$usetime."' WHERE signid='".$signid."'";
try{
$this->conn->query($sql);
}catch (Exception $exception){
print $exception->getMessage();
return false;
}
return true;
}
}
上面代码中，细节方面就不纠结了，保证正确的情况下，能实现功能即可。其实应该对数据库操作相关的语句进行Try-Catch判断……
4.2 控制（Control）层control类代码：
这个类文件中实现的是从前端获取用户的数据，如时间等信息，控制签到程序，然后将数据发送到模型层，对前端和数据库操作进行控制，起到中介的作用。
文件名：control.php
详细代码及注释如下所示：
<?php
include ('dao.php');
session_start();
class control{
/**
* 用户登录时执行的操作
* 新用户：分配ID
* 旧用户：直接获取ID
*/
public static function login($openid){
if(empty($openid))
return 0;
$dao = new Dao();
$results = $dao->getUser($openid); //新用户：返回0，老用户：返回userID
//新用户
if($results === 0){
$userid = $dao->getMaxUserID() + 1 ; //计算新用户ID
$dao->createID($userid,$openid); //创建新用户
return $userid; //返回用户userID
}
//老用户
else{
return $results; //返回用户userID
}
}
/**
* 获取当前用户当日是否已经签到,即用户的名次
*/
public static function issign(){
$dao = new Dao();
$mingci = $dao->judgesign($_SESSION["userid"]);
return $mingci;
}
/**
* 获取当前用户签到记录
*/
public static function getMySign(){
$dao = new Dao();
$results = $dao->getSign($_SESSION["userid"]);
return $results;
}
/**
* 获取当前指定签到ID的签到信息
*/
public static function getSignInfo(){
$dao = new Dao();
$signid = $_SESSION["usersignid"];
$results = $dao->getUserSignInfo($signid);
return $results;
}
/**
* 进行兑换
*/
public static function duiHuan(){
$usedata = microtime(true);//时间戳
$usersignid = $_SESSION["usersignid"];
$dao = new Dao();
$success = $dao->updateSignInfo($usedata,$usersignid);
return $success;
}
}4.3 授权接口调用weixin类
下面这篇开发者文档给出了获取用户OpenID，以及用户个人信息的几个步骤：
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842
建议读者认真阅读开发者文档中的这篇文章，然后再往下看。
4.3.1 获取（或者说是创建）用户授权链接
用户点击公众号菜单栏后，如果用户未登录，需要引导用户前往确认授权页面。
用户点击这个链接，打开的授权页面是这样的：
这里的关键代码如下所示：
/**
* 第1步： 获取用户授权code url
* @param string $scope 授权作用域:snsapi_base or snsapi_userinfo，这里选择base
* @param string $state 重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值
* @param string $redirect_url 重定向URL
* @return string
*/
public static function createCodeUrl($scope,$state,$redirect_url){
$open_url = 'https://open.weixin.qq.com';
$redirect_url = urlencode($redirect_url);//这里必须对链接进行处理，即连接中的斜线转换成字符
//参考链接示例：https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
$url = $open_url.'/connect/oauth2/authorize?appid='.APPID.'&redirect_uri='.$redirect_url.'&response_type=code&scope='.$scope.'&state='.$state.'#wechat_redirect';
return $url;
}return语句前面一行的字符串中的几个变量值说明一下：
- APPID：这是开发者ID，本文前面3.3.5节记录的就是这个，也是公众号的唯一标识；
- redirect_uri：这是用户允许公众号获取信息后，继续跳转到的页面；
- scope：这是公众号应用授权的作用域。这个变量只有两个值：①值为snsapi_base时，只获取用户的OpenID，不获取用户的昵称、头像等信息，如果scope=snsapi_base，则不会出现上图的授权页面，即实现的是静默授权，最多用户的屏幕会显示“正在登录……”几个字。②值为snsapi_userinfo 时，弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注公众号的情况下，只要用户授权，也能获取其信息。
- state：重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节。这个参数根据项目实际进行赋值。
如果用户同意授权，页面将跳转至 redirect_uri/?code=CODE&state=STATE。
在开发者工具中可以清晰的看到这些信息：
其中code的值为换取access_token的票据。每次用户授权后，code值均不同，code只能使用一次，有效期5分钟。
4.3.2 通过code换取网页授权access_token，从Token中读取用户OpenID
这部分的关键代码如下：
/**
* 第2步： 获取用户授权access_token
* @param type $code 授权时获得code值
* @return type
*/
public static function getAuthToken($code){
//参考链接示例：https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
$url = self::API_URL.'/sns/oauth2/access_token?appid='.APPID.'&secret='.APPSECRET.'&code='.$code.'&grant_type=authorization_code';
$content = curl_get( $url );
$ret = json_decode($content, true );
return self::getResult( $ret ) ? $ret : null;
}这里链接中用到的三个变量的说明如下：
- APPID：公众号的唯一标识，同上；
- secret：公众号的appsecret，前面3.5.3节让记下的一串字符；
- code：授权时跳转的链接中带的参数。
如果函数执行正确，返回的数据为一个JSON数据包，可以简单理解为C++中的结构体。开发者文档的解释如下：
这里边就包含用户的唯一标识：OpenID。
在本项目中，进行到这里就结束了。
4.3.3 完整代码
如果你还想继续获取用户的昵称、头像等公开信息，请看完整代码。
各个过程就是请求链接、获取JSON包的过程。
文件名：weixin.class.php
<?php
//下面是全局变量的几个值
define('APPID','这里换成你自己的APPID');//
define('APPSECRET','这里换成你自己的APPSECRET');
//define('open_url','https://open.weixin.qq.com');
class weixin extends wxcommon{
/**
* 第1步： 获取用户授权code url
* @param string $scope 授权作用域:snsapi_base or snsapi_userinfo，这里选择base
* @param string $state 重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值
* @param string $redirect_url 重定向URL
* @return string
*/
public static function createCodeUrl($scope,$state,$redirect_url){
$open_url = 'https://open.weixin.qq.com';
$redirect_url = urlencode($redirect_url);
//参考链接示例：https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
$url = $open_url.'/connect/oauth2/authorize?appid='.APPID.'&redirect_uri='.$redirect_url.'&response_type=code&scope='.$scope.'&state='.$state.'#wechat_redirect';
return $url;
}
/**
* 第2步： 获取用户授权access_token
* @param type $code 授权时获得code值
* @return type
*/
public static function getAuthToken($code){
//参考链接示例：https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
$url = self::API_URL.'/sns/oauth2/access_token?appid='.APPID.'&secret='.APPSECRET.'&code='.$code.'&grant_type=authorization_code';
$content = curl_get( $url );
$ret = json_decode($content, true );
return self::getResult( $ret ) ? $ret : null;
}
/**
* 第3步：刷新用户授权access_token
* @param type $refresh_token 用户刷新access_token
* @return type
*/
public static function refershAuthToken($refresh_token){
//参考链接示例：https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN
$url = self::API_URL.'/sns/oauth2/refresh_token?appid='.APPID.'&grant_type=refresh_token&refresh_token='.$refresh_token;
$content = curl_get( $url );
$ret = json_decode($content, true );
return self::getResult( $ret ) ? $ret : null;
}
/**
* 第4步： 获取用户基本信息
* @access_token 网页授权接口调用凭证,注意：此access_token与基础支持的access_token不同
* @param type $openid 普通用户的标识，对当前公众号唯一
* @param string $lang 返回国家地区语言版本，zh_CN 简体，zh_TW 繁体，en 英语
* @return type
*/
public static function getUserInfoByID( $access_token, $openid, $lang='zh_CN' ){
if( !$lang ) $lang = 'zh_CN';
//$access_token = self::getToken();
//参考链接示例：https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
$url = self::API_URL . "/sns/userinfo?access_token={$access_token}&openid={$openid}&lang={$lang}";
$ret = json_decode(curl_get( $url ), true );
return self::getResult( $ret ) ? $ret : null;
}
}
/**
* GET方式获取服务器响应
* @param {string} $url
* @return {string|boolen} 成功时返回服务器响应内容，失败则返回false
*/
function curl_get( $url ){
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);;
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
if(!curl_exec($ch)){
error_log( curl_error ( $ch ));
$data = '';
} else {
$data = curl_multi_getcontent($ch);
}
curl_close($ch);
return $data;
}
/**
*微信通用接口
*/
class wxcommon{
const API_URL = 'https://api.weixin.qq.com';
private static $access_token;
private static $expries_time = 0;
/**
* 用于获取AccessToken。如成功返回AccessToken，失败返回false
*/
public static function getToken(){
if(isset(self::$access_token) && time() < self::$expries_time){
return self::$access_token;
}
$url = self::API_URL."/cgi-bin/token?grant_type=client_credential&appid=".APPID."&secret=".APPSECRET;
$content=curl_get($url);
$ret=json_decode($content,true);//{"access_token":"ACCESS_TOKEN","expires_in":7200}
if(array_key_exists('errcode',$ret) && $ret['errcode'] != 0){
return false;
}else{
self::$access_token = $ret['access_token'];
self::$expries_time = time() + intval($ret['expires_in']);
return self::$access_token;
}
}
public static function getResult($ret) {
if(!is_array($ret) || !array_key_exists('errcode',$ret)){
return $ret;
}
$errcode = intval($ret['errcode']);
if(in_array($errcode, self::$ERRCODE_MAP)){
if($errcode == 0){
return true;
}
return array('errcode' => $errcode, 'errinfo' => self::$ERRCODE_MAP[$errcode]);
}
return array('errcode'=>'-2','errinfo'=>'未知错误');
}
static $ERRCODE_MAP = array(
'-1' => '系统繁忙',
'0' => '请求成功',
'40001' => '获取access_token时AppSecret错误，或者access_token无效',
'40002' => '不合法的凭证类型',
'40003' => '不合法的OpenID',
'40004' => '不合法的媒体文件类型',
'40005' => '不合法的文件类型',
'40006' => '不合法的文件大小',
'40007' => '不合法的媒体文件id',
'40008' => '不合法的消息类型',
'40009' => '不合法的图片文件大小',
'40010' => '不合法的语音文件大小',
'40011' => '不合法的视频文件大小',
'40012' => '不合法的缩略图文件大小',
'40013' => '不合法的APPID',
'40014' => '不合法的access_token',
'40015' => '不合法的菜单类型',
'40016' => '不合法的按钮个数',
'40017' => '不合法的按钮个数',
'40018' => '不合法的按钮名字长度',
'40019' => '不合法的按钮KEY长度',
'40020' => '不合法的按钮URL长度',
'40021' => '不合法的菜单版本号',
'40022' => '不合法的子菜单级数',
'40023' => '不合法的子菜单按钮个数',
'40024' => '不合法的子菜单按钮类型',
'40025' => '不合法的子菜单按钮名字长度',
'40026' => '不合法的子菜单按钮KEY长度',
'40027' => '不合法的子菜单按钮URL长度',
'40028' => '不合法的自定义菜单使用用户',
'40029' => '不合法的oauth_code',
'40030' => '不合法的refresh_token',
'40031' => '不合法的openid列表',
'40032' => '不合法的openid列表长度',
'40033' => '不合法的请求字符，不能包含\uxxxx格式的字符',
'40035' => '不合法的参数',
'40038' => '不合法的请求格式',
'40039' => '不合法的URL长度',
'40050' => '不合法的分组id',
'40051' => '分组名字不合法',
'41001' => '缺少access_token参数',
'41002' => '缺少appid参数',
'41003' => '缺少refresh_token参数',
'41004' => '缺少secret参数',
'41005' => '缺少多媒体文件数据',
'41006' => '缺少media_id参数',
'41007' => '缺少子菜单数据',
'41008' => '缺少oauth code',
'41009' => '缺少openid',
'42001' => 'access_token超时',
'42002' => 'refresh_token超时',
'42003' => 'oauth_code超时',
'43001' => '需要GET请求',
'43002' => '需要POST请求',
'43003' => '需要HTTPS请求',
'43004' => '需要接收者关注',
'43005' => '需要好友关系',
'44001' => '多媒体文件为空',
'44002' => 'POST的数据包为空',
'44003' => '图文消息内容为空',
'44004' => '文本消息内容为空',
'45001' => '多媒体文件大小超过限制',
'45002' => '消息内容超过限制',
'45003' => '标题字段超过限制',
'45004' => '描述字段超过限制',
'45005' => '链接字段超过限制',
'45006' => '图片链接字段超过限制',
'45007' => '语音播放时间超过限制',
'45008' => '图文消息超过限制',
'45009' => '接口调用超过限制',
'45010' => '创建菜单个数超过限制',
'45015' => '回复时间超过限制',
'45016' => '系统分组，不允许修改',
'45017' => '分组名字过长',
'45018' => '分组数量超过上限',
'46001' => '不存在媒体数据',
'46002' => '不存在的菜单版本',
'46003' => '不存在的菜单数据',
'46004' => '不存在的用户',
'47001' => '解析JSON/XML内容错误',
'48001' => 'api功能未授权',
'50001' => '用户未授权该api',
);
}上面这个代码是笔者从一本参考书中摘抄的，可以直接拿来使用。
但是需要将前两行的APPID和APPSECRET补充完整。
4.4 签到主页面设计
主页面主要是HTML代码，以及加载HTML代码前执行的几段PHP代码。
这里我们要想清楚几个问题：
用户真正能够授权，后台并且能够拿到code的链接长这样：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf0e81c3bee622d60&redirect_uri=http%3A%2F%2Fnba.bluewebgame.com%2Foauth_response.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
//注：这是微信开发者文档给出的实例链接但是这样的链接，太长，看起来就不舒服。
我们正常理解的，我们能接受的公众号网页链接，应该是这样的：
https://wx.yourdomain.com/index.php所以这就需要在index.php中进行控制。
这里笔者简单说一下笔者的思路：
if(没有创建客户端到服务端的session["userid"]){ //说明是第一次访问，session中没有userid这个字段
if(GET到了链接中的state值){ //说明已经拿到code
//通过code获取Token
//解析Token获取openid
//将openid与数据库即有数据对比，获取用户userid
//获取其他信息
}
else{
//跳转到授权链接，就是前面那个很长的链接
}
else{ //反之就是已经创建包含userid的session，用于已经登录，则可以获取网页中需要的信息
//获取其他信息
}所以这里的关键代码，笔者是这样写的：
/**
* 首次访问进行登录
*/
//从登录链接返回的两个参数：code和state，其中state用来获取用户的OpenID，state用来判断是否是首次打开页面
//如果没有设置全局session变量userID，执行if内函数
if(!isset($_SESSION["userid"])){
if(isset($_GET["state"])){
$token=weixin::getAuthToken($_GET['code']); //根据请求链接获取返回的Token，其中包含access_token
$_SESSION["userid"] = control::login($token['openid']); //根据返回的JSON包，将用户的OpenID进行登录验证，并拿到用于的userID，保存到session中。
$_SESSION["issign"] = control::issign(); //拿到用户的登签到名次，未签到为0
}else{
$url = weixin::createCodeUrl("snsapi_base","123","https://wx.XXX.com/index.php");
header("location:$url");
}
}
else{
$_SESSION["issign"] = control::issign(); //拿到用户的登签到名次issign，未签到为0
}完整代码，以及代码详解如下：
文件名：index.php
<?php
//设置时区
date_default_timezone_set('Asia/Chongqing');
session_start();
/**
* 本项目中使用session全局数组保存用户名，以及用户的签到名次
* 当然也可以改用cookie
* */
//加载几个引用的文件
require 'lib/weixin.class.php';
require 'lib/control.php';
/**
* 首次访问进行登录
*/
//从登录链接返回的两个参数：code和state，其中state用来获取用户的OpenID，state用来判断是否是首次打开页面
//如果没有设置全局session变量userID，执行if内函数
if(!isset($_SESSION["userid"])){
if(isset($_GET["state"])){
$token=weixin::getAuthToken($_GET['code']); //根据请求链接获取返回的Token，其中包含access_token
$_SESSION["userid"] = control::login($token['openid']); //根据返回的JSON包，将用户的OpenID进行登录验证，并拿到用于的userID，保存到session中。
$_SESSION["issign"] = control::issign(); //拿到用户的登签到名次，未签到为0
}else{
$url = weixin::createCodeUrl("snsapi_base","123","https://wx.XXX.com/index.php");
header("location:$url");
}
}
else{
$_SESSION["issign"] = control::issign(); //拿到用户的登签到名次，未签到为0
}
//下面是获取用户的信息，没用到……
//$userinfo=weixin::getUserInfoByID($token['access_token'],$token['openid'],'zh_CN');//根据access_Token获取用户的OpenID
//$nickname = $userinfo["nickname"];
//$usersex = $userinfo["sex"];
//………………
?>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
<title>早起签到</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="banner2"><img src="images/banner.jpg" class="img-responsive"></div>
<?php
$now=getdate(date("U")); //当前时间
$hour = $now[hours]; //签到时
$min = $now[minutes]; //签到分
//如果未到签到时间，则不能签到！
if($hour< 6 || ($hour==6 && $min<50) ){
?>
<form name="sign" action="sign.php">
<div id="fromBox" class="fromBox">
<button id="btn-qiandao" class="btn3" disabled="true">5:50开启今日签到</button>
</div>
</form>
<?php
}
//如果用户未签到，显示可签到
else if($_SESSION["issign"]==0) {
//if($issign===0) {
?>
<form name="sign" action="sign.php">
<div id="fromBox" class="fromBox">
<button id="btn-qiandao" class="btn3">立即签到</button>
</div>
</form>
<?php
}
//用户已经签到，显示签到名次
else{
?>
<form name="sign">
<div id="fromBox" class="fromBox">
<button id="btn-qiandao" class="btn3" disabled="true">今日签到名次：<?php echo $_SESSION["issign"]; ?> </button>
</div>
</form>
<?php
}
?>
<p align="right"><a href="mysign.php" style="text-decoration: none">>>我的签到记录 </a></p>
<div class="pt10lr10 mt10">
<div class="pline"></div>
<div class="prizebox">
<div class="ptitle"><strong>活动详情</strong></div>
<div class="" id="demo" style="">
<table style="font-size: 13px;color: #b25d06">
<tr>
<td width="6PX" valign="top" align="right">1、</td><td>每日05:50至23:59开启早起签到。</td>
</tr>
<tr>
<td valign="top" align="right">2、</td><td>其他内容……</td>
</tr>
<tr>
<td valign="top" align="right">3、</td><td>其他内容……</td>
</tr>
</table>
<br>
</div>
</div>
</div>
<div align="center">
<a style="font-size: 10px;color: #ff820b;text-decoration: none" href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzIwODkwOTg5Nw==&scene=124#wechat_redirect">技术支持：@拾年之璐</a>
</div>
</body>
这个主页面用到的CSS文件，来自网络，篇幅较长，将在文末展示。
这里注意上面代码中的“立即签到”按钮所在的form表单中，action是跳转到sign.php文件，这里要注意！
所以需要对sign.php文件进行编写。这个文件，就是个控制页面，以及跳转页面。详细代码如下：
文件名：sign.php
<?php
header("Content-type:text/html;charset=UTF-8");
error_reporting(0);
include('lib/dao.php');
//下面代码完全可以放在control.php文件中实现，然后此处调用！
session_start();
$dao = new Dao();
//获取签到的基本信息
$signid = $dao->getMaxSignID()+1;//签到ID
$userid=$_SESSION["userid"];//用户ID
$signdata = microtime(true);//时间戳
$now=getdate(date("U")); //当前时间
$signmon = $now[mon]; //签到月份
$signday = $now[mday]; //签到日
$signhour = $now[hours]; //签到时
$signmin = $now[minutes]; //签到分
$mingci = $dao->getMaxRank()+1;//签到名次
$isused = 0; //是否兑换
$usertime = 0; //兑换时间
$success = $dao->saveSign($signid,$userid,$signdata,$signmon,$signday,$signhour,$signmin,$mingci,$isused,$usertime);
//上面代码完全可以放在control.php文件中实现，然后此处调用！
//签到名次保存到session中！
//setcookie("issign",$mingci,time()+60*60*24); //有效期24个小时，弃用cookie
$_SESSION["issign"] = $mingci;
if($success === true) {
echo "<script charset='UTF-8' language='javascript' type='text/javascript'> { window.alert('签到成功！')}; setTimeout( window.parent.location.href='index.php',2000); </script>";
//echo "<script> {window.alert('签到成功！')} </script>";
}
else{
echo "<script charset='UTF-8'language='javascript' type='text/javascript'> {window.alert('签到失败，请联系管理员！')} ;window.parent.location.href='index.php'</script>";
}4.5 我的签到记录页面
前面index.php代码中，有一个“我的签到记录”按钮，是个超链接的形式，所跳转的页面是mysign.php。详细代码如下：
文件名：mysign.php
<?php
require 'lib/control.php';
$results = control::getMySign();//得到签到记录集合
$exist = false;//是否存在签到记录
//时间戳转换成标准时间格式
function get_microtime_format($time)
{
if(strstr($time,'.')){
sprintf("%01.3f",$time); //小数点。不足三位补0
list($usec, $sec) = explode(".",$time);
$sec = str_pad($sec,3,"0",STR_PAD_RIGHT); //不足3位。右边补0
}else{
$usec = $time;
$sec = "000";
}
$date = date("Y-m-d H:i:s.x",$usec);
return str_replace('x', $sec, $date);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>我的签到记录</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrap">
<div class="banner2"><img src="images/banner.jpg"/></div>
<div class="tabsbox tabsbox2">
<div class="title1">我的签到记录</div>
<?php
while($row = $results->fetch_row()) {
$exist = true;
?>
<div class="Prize">
<p>签到ID：<?php echo $row[0]; ?> 当日签到名次：<?php echo $row[2]; ?></p>
<div>签到时间：<?php echo get_microtime_format($row[1]);
$now=getdate(date("U")); //当前时间
$nowday = $now[mday]; //当前日
$nowhour = $now[hours]; //当前时
$nowmin = $now[minutes]; //当前分
//1、昨天5.5.到24.00签到的用户，今天8.30前可兑换
//2、今天5.50到8.30之间签到的用户，可在今天8.30前兑换，或者明天兑换
if(($row[3]==0 && $row[5] == ($nowday-1) && $nowhour<=8 && $nowmin<=30) || ($row[3]==0 && $row[5] == $nowday) ){
?><a style="font-weight: bold;color:green"> 可兑换</a></div><?php
}
else if($row[3]==1 ){
?><a style="font-weight: bold;color:red"> 已兑换</a></div>
<div>兑换时间：<?php echo get_microtime_format($row[4]); ?></div>
<?php
}
else{
?><a style="font-weight: bold;color:orange"> 已过期</a></div><?php
}
?>
</div>
<?php
}
if($exist === false){?>
<div class="Prize">
<div align="center">您还没有签到记录，快去签到吧^_^</div>
</div>
<?php
}
?>
</div>
<a href="index.php" class="btn4" style="text-decoration: none">返回</a>
</div>
</body>
</html>4.6 后台兑换页面
后台兑换页面就是一个很简单的HTML页面。其中主要由两个PHP文件组成：
主页面文件名：search.php
完整代码：
<?php
require 'lib/control.php';
//测试用
//$_SESSION["usersignid"] = 10005;
//↑ 测试用
$exist = false;
if(isset($_REQUEST["usersignid"])){
$usersignid2 = $_REQUEST["usersignid"];
$_SESSION["usersignid"] = $usersignid2;
}
if(isset($_SESSION["usersignid"])){
$result = control::getSignInfo();
}
else{
$result = 0;
}
//时间戳转换
function get_microtime_format($time)
{
if(strstr($time,'.')){
sprintf("%01.3f",$time); //小数点。不足三位补0
list($usec, $sec) = explode(".",$time);
$sec = str_pad($sec,3,"0",STR_PAD_RIGHT); //不足3位。右边补0
}else{
$usec = $time;
$sec = "000";
}
$date = date("Y-m-d H:i:s.x",$usec);
return str_replace('x', $sec, $date);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>后台查询系统</title>
<link rel="stylesheet" href="css/style.css">
<style type="text/css">
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;
}
</style>
<script type="text/javascript">
function doAction() {
var usersignid = document.getElementById("usersignid");
window.location.href = "a.php?usersignid="+ usersignid.value;
}
</script>
</head>
<body>
<div>
<br><br><br>
</div>
<form action="a.php" method="post">
<table align="center" width="85%">
<tr>
<td width="40%">
<input placeholder="请输入签到ID" type="text" tabindex="1" name="usersignid" id="usersignid" required autofocus autocomplete="on">
</td>
<td width="40%">
<input class="btn5" type="button" value="立即查询" onclick="doAction()">
</td>
</tr>
</table>
</form>
<div>
<br><br><br><br>
</div>
<div id="wrap">
<div class="tabsbox tabsbox2">
<div class="title1">用户签到记录</div>
<?php
if(isset($_SESSION["usersignid"])){
while($row = $result->fetch_row()) {
$exist = true;
?>
<div class="Prize">
<p>签到ID：<?php echo $row[0]; ?> 签到名次：<?php echo $row[2]; ?></p>
<div>签到时间：<?php echo get_microtime_format($row[1]);
$now=getdate(date("U")); //当前时间
$nowday = $now[mday]; //当前日
$nowhour = $now[hours]; //当前时
$nowmin = $now[minutes]; //当前分
//1、昨天5.5.到24.00签到的用户，今天8.30前可兑换
//2、今天5.50到8.30之间签到的用户，可在今天8.30前兑换，或者明天兑换
if(($row[3]==0 && $row[5] == ($nowday-1) && $nowhour<=8 && $nowmin<=30) || ($row[3]==0 && $row[5] == $nowday) ){
?><a style="font-weight: bold;color:green"> 可兑换</a>
<br>
<br>
<a href="duihuan.php" class="btn4" style="text-decoration: none">立即兑换</a>
<?php
}
else if($row[3]==1){
?><a style="font-weight: bold;color:red"> 已兑换</a>
<div>兑换时间：<?php echo get_microtime_format($row[4]); ?></div>
<?php
}
else{
?><a style="font-weight: bold;color:orangered"> 已过期</a><?php
}?>
</div>
<?php
}
}
if($exist === false){?>
<div class="Prize">
<div align="center">未查询到该签到记录！</div>
</div>
<?php
}
?>
</div>
</div>
</body>
</html>兑换按钮文件名：submit.php
完整代码：
<?php
header("Content-type:text/html;charset=UTF-8");
require 'lib/control.php';
$success = control::duiHuan();
if($success === true) {
echo "<script charset='UTF-8' language='javascript' type='text/javascript'> { window.alert('兑换成功！')}; setTimeout( window.parent.location.href='a.php',2000); </script>";
//echo "<script> {window.alert('签到成功！')} </script>";
}
else{
echo "<script charset='UTF-8'language='javascript' type='text/javascript'> {window.alert('兑换失败，请联系管理员！')} ;window.parent.location.href='a.php'</script>";
}
至此，本项目的关键代码展示完毕。
本文结束。
5 参考文献：
| [1] 软件开发技术联盟编著.PHP+MySQL开发实战[M].北京：清华大学出版社.2013. |
| [2] 刘乃琦，李忠主编.PHP和MySQL Web应用开发[M].北京：人民邮电出版社.2013. |
| [3] 于荷云编著.PHP+MySQL网站开发全程实例[M].北京：清华大学出版社.2012. |
| [4] 易伟著.微信公众平台服务号开发 揭秘九大高级接口[M].北京：机械工业出版社.2014. |
| [5] 席新亮编著.微信公众平台JSSDK开发实战 公众号与HTML5混合模式揭秘[M].北京：电子工业出版社.2015. |
| [6] 闫小坤，周涛.微信公众平台应用开发实践[M].北京：清华大学出版社.2017. |
| [7] 闫小坤，周涛著.微信公众平台应用开发从入门到精通[M].北京：清华大学出版社.2015. |
| [8] 张暑军主编.基于HTML 5的APP开发教程[M].北京：北京理工大学出版社.2016. |
6 附：style.css文件代码
注：此文件来自网络！
文件名：style.css
完整代码：
@charset "UTF-8";
h1,h2,h3,h4,h5,h6,span,p,a,.btn,input,select,textarea,div{ font-weight: normal; font-family: "Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu,Helvetica Neue, Helvetica, Arial, sans-serif ;}
ul,li{list-style: none;margin:0;padding:0;}
a{ color: #323232;}
a:hover{ color: #323232; text-decoration: none;}
.w100{width:100%;}
body{background-color:#faca34}
/*背景颜色*/
.bodybg{background:#f7f7f7;}
.bgbody{background:#eeeff3;}
.bg-white{background:#fff;}
.bg-red{background:#e3393a;}
.bgmainy{background-color:#ffa15c;}/*crm商品管理，页面主题黄色*/
.bgea{background:#EA6846;}
.bgf1{background:#F1F2F4;}
.bgf7{background:#f7f7f7;}
.bgfb{background:#fbfbfb;}
.bgf36{background:#ff3366;}
.bgf2f1{background:#f2f1f1;}
.bgef1e3b{background:#ef1e3b;}
/*字体大小*/
.font10{font-size:10px;}
.font12{font-size:12px;}
.font13{font-size:13px;}
.font14{font-size:14px;}
.font15{font-size:15px;}
.font16{font-size:16px;}
.font18{font-size:18px;}
.font20{font-size:20px;}
.font42{font-size:42px;}
.font2m{font-size: 2em;}
.font3m{font-size: 3em;}
/*字体颜色*/
.text-red{color:#df493b;}
.text-white{color:#fff;}
.text-grey{color:#ccc;}
.text-grey1{color:#9e9ea1;}
.text1{color:#50d2c2;}
.text-f36{color:#ff3366;}
.colorb5{color:#b5b5b5;}
.colorstar {color:#ff4444;}
.color29{color:#292929;}
.text-orange{color:#ffa15c;}
.text-blue{color:#41a4e3;}
.text-jiangjiu{color:#da5141;}/* 广东酱酒专家 */
.texthidden{text-overflow:ellipsis;white-space: nowrap;overflow: hidden;}/* 1行 */
.rows2{display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; overflow: hidden;}/* 2行 */
/*高度和行高*/
.h30{height:30px;}
.h35{height:35px;}
.h43{height:43px;line-height: 43px;}
.h48{height:48px;line-height: 48px;}
.h50{height:50px;line-height: 50px;}
.h70{height:70px;}
.lh25{line-height: 25px;}
.lh33{line-height: 33px;}
.lh34{line-height: 34px;}
.lh47{line-height: 47px;}
/*边框样式*/
.bordernone{border:none;}
.border0{border:none;}
.border{border: 1px solid #e8e9eb;}
.bordert{border-top: 1px solid #e8e9eb;}
.borderr{border-right: 1px solid #e8e9eb;}
.borderb{border-bottom: 1px solid #e8e9eb;}
.borderl{border-left:1px solid #e8e9eb;}
.bordertb{border-top:1px solid #e8e9eb;border-bottom:1px solid #e8e9eb;}
.btn-simple{width:100%;border-radius:0;border:none;}
.bradius3{border-radius:3px;}
.bradius20{border-top-left-radius:20px;border-bottom-left-radius:20px;border-top-right-radius:20px;border-bottom-right-radius:20px;}
.bg-success1{background: #66c300;}
/*delete*/
.bordertop{border-top: 1px solid #e8e9eb;}
.borderright{border-right: 1px solid #e8e9eb;}
.borderbottom{border-bottom: 1px solid #e8e9eb;}
/* 内外边距 */
.clearMargin{margin:0;}
.clearPadding{padding:0;}
.clearPtb{padding-top:0px;padding-bottom:0;}
.clearMb{margin-bottom:0;}
.clearPb{padding-bottom:0;}
/* 内边距 */
.padding5{padding:5px;}
.padding10{padding:10px; background-color:#FFF; width:90%; margin:0px auto 10px auto}
.padding15{padding:15px;}
.p15{padding:15px;}
.pt10b3{padding-top:10px;padding-bottom:3px;}
.ptb5{padding-top: 5px;padding-bottom: 5px;}
.ptb6{padding-top: 6px;padding-bottom: 6px;}
.ptb10{padding-top:10px;padding-bottom: 10px;}
.ptb15{padding-top: 15px;padding-bottom: 15px;}
.ptb20{padding-top: 20px;padding-bottom: 20px;}
.ptb30{padding-top:30px;padding-bottom:30px;}
.plr0{padding-left:0px;padding-right:0px;}
.plr10{padding-left:10px;padding-right:10px;}
.plr15{padding-left:15px;padding-right:15px;}
.plr25{padding-left: 25px;padding-right: 25px;}
.pb5{padding-bottom: 5px}
.pb10{padding-bottom: 10px}
.pb13{padding-bottom: 13px}
.pb15{padding-bottom: 15px}
.pb20{padding-bottom: 20px}
.pb55{padding-bottom: 55px}
.pt5{padding-top:5px;}
.pt10{padding-top: 10px;}
.pt12{padding-top: 12px}
.pt15{padding-top: 15px;}
.pt20{padding-top: 20px;}
.pt25{padding-top: 25px;}
.pt42{padding-top: 42px;}
.pt5p{padding-top: 5%;}
.pr0{padding-right: 0;}
.pr5{padding-right: 5px;}
.pl0{padding-left:0;}
.pl2{padding-left: 2px;}
.pl5{padding-left:5px;}
.pl10{padding-left:10px;}
.pl15{padding-left: 15px;}
.pl60{padding-left: 60px;}
.-pl20{padding-left:-20px;}
.pl12p{padding-left: 12%;}
/* 外边距 */
.margin15{margin:15px;}
.margin30{margin:30px;}
.m30{margin: 30px;}
.mt0{margin-top: 0;}
.mt1{margin-top: 1px;}
.mt5 {margin-top: 5px;}
.mt9{margin-top: 9px;}
.mt10{margin-top: 10px;}
.mt15{margin-top: 15px;}
.mt20 {margin-top: 20px;}
.mt30{margin-top: 30px;}
.mt-1{margin-top:-1px;}
.mb0{margin-bottom: 0;}
.mb5{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.mb15{margin-bottom: 15px;}
.mb46{margin-bottom:46px;}
.mb60{margin-bottom: 60px;}
.mr6{margin-right:6px;}
.mr20{margin-right:20px;}
.ml20{margin-left:20px;}
.mtb5{margin-top:5px;margin-bottom:5px;}
.mtb10{margin-top: 10px;margin-bottom: 10px;}
.mtb15{margin-top: 15px;margin-bottom: 15px;}
.mtb20{margin-top: 20px;margin-bottom: 20px;}
.mt20b50{margin-top: 20px;margin-bottom: 50px;}
.mlr3{margin-right: 3px;margin-left: 3px;}
.mlr10{margin-right:10px;margin-left:10px;}
.mlr15{margin-left: 15px;margin-right: 15px;}
/*签到*/
.maskbox{width:100%;height:100%;background:rgba(0,0,0,0.7);display: none;position: absolute;z-index:1000;top:0;left:0;}
.calendar{background:#faca34;padding:0px 15px 0;}
.libaolist .bg-red{background:#e60012;}
.libaolist .pt2{padding-top:2px;}
.libaolist .pt3{padding-top:3px;}
.libaolist .btn-lingqu{width:70px;text-align:center;background:#e60012;color:#fff;}
.libaolist .btn-disable{width:70px;text-align:center;background:#c9c9c9;color:#fff;}
.btn-qiandao{width:160px;height:50px;background:#e60012;border:5px solid #faca34;color:#fff;font-size:18px;font-weight:bolder;border-radius:25px;text-align:center;position:relative;bottom:-20px;}
.qdbox{display:none;padding:15px 0;width:250px;border:3px solid #f82729;border-radius:10px;background:#fff;position:fixed;z-index:1001;top:50%;left:50%;margin-top:-113px;margin-left:-120px;}
.qdbox .text-green{color:#e60012;}
.btn-lottery{width:120px;text-align:center;color:#fff;background:#e60012;font-size:16px;}
.calenbox{width:100%;margin:0 auto;background:#faca34;}
.calenbox .date{width:14%;text-align:center;background:#fff;border-radius:7px;color:#6a3906;font-weight:bolder;font-size:18px;padding:10px 0;float:left;border-right:1px solid #faca34;border-bottom:1px solid #faca34;}
.singer_r_img{display:block;width:114px;height:52px;line-height:45px;background:url(images/sing_week.gif) right 2px no-repeat;vertical-align:middle;*margin-bottom:-10px;text-decoration:none;}
.singer_r_img:hover{background-position:right -53px;text-decoration:none;}
.singer_r_img span{margin-left:14px;font-size:16px;font-family:'Hiragino Sans GB','Microsoft YaHei',sans-serif !important;font-weight:700;color:#165379;}
.singer_r_img.current{background:url(images/sing_sing.gif) no-repeat 0 2px;border:0;text-decoration:none;}
.sign table{width:100%;border-collapse: collapse;border-spacing: 0;color: #a46626;font-weight: bold;font-size:20px;}
.sign th,.sign td {width: 30px;height: 40px;text-align: center;line-height: 40px;border:1px solid #faca34;border-radius:6px;background:#fff;}
.sign th {font-size: 16px;border-radius:6px;background:#fff;}
.sign td {color: #404040;vertical-align: middle;border-radius:6px;background:#fff;color: #a46626;}
.sign .on {background-color:#f0bc1a;}
.calendar_month_next,.calendar_month_prev{width: 34px;height: 40px;cursor: pointer;background:url(images/sign_arrow.png) no-repeat;}
.calendar_month_next {float:right;line-height:40px;}
.calendar_month_span {display:inline;line-height: 40px;font-size: 16px;color: #a46626;letter-spacing: 2px;font-weight: bold;}
.calendar_month_prev {float:left;line-height:40px;}
.sign_succ_calendar_title {text-align: center;border-left:1px solid #faca34;border-right:1px solid #faca34;background:#faca34;}
.sign_main{border-top:1px solid #faca34;font-family: "Microsoft YaHei",SimHei;}
/* 大转盘样式 */
.turbg{background:#e60012;}
.banner{display:block;width:90%;margin:-60px auto 0;}
.banner .turnplate{display:block;width:100%;position:relative;}
.banner .turnplate canvas.item{width:100%;}
.banner .turnplate img.pointer{position:absolute;width:31.5%;height:42.5%;left:34.6%;top:23%;}
.prizebox{background:#ffffff;margin:-3px 15px 10px;box-shadow:#d9d9d9 0 5px 20px 3px;color:#6a3906;}
.pline{height:12px;border-radius:10px;background:#ef2122;}
.ptitle{color:#6a3906;font-size:16px;padding:10px 15px;font-size:16px;}
.prizebox .ptitle .text-yellow{color:#6a3906;}
.prizebox .ptitle .text-red{color:#ff0000;}
.prizebox .prizelist{padding:0 15px;}
.prizebox .prizelistwrap{height:auto;overflow:scroll;}
.pt10lr10{padding:10px 10px 0;}
.turRule{padding:0 15px;color:#7d0000;margin-bottom:20px;}
.turRule .text-brown{color:#7d0000;}
.turRule .line{height:3px;background:#7d0000;margin-top:10px;}
.turRule .ball{display:inline-block;width:10px;height:10px;border-radius:5px;position:absolute;background:#7d0000;top:7px;}
.turRule .ball1{left:0;}
.turRule .ball2{right:0;}
.turRule dl{margin-bottom:10px;}
.turRule dl dt{margin-bottom:5px;}
.turRule dl dt strong{font-size:16px;}
.turRule dl span{display:inline-block;width:18px;height:18px;border-radius:9px;background:#faca34;text-align:center;margin-right:5px;}
.banner2{ width:100%}
.banner2 img{ width:100%}
.from{ width:90%; margin:0px auto;}
.from input {width: 100%; border: none; font-size:15px; background-color: #fff; border-radius: 0.5rem; padding: 15px 10px; margin-bottom: 5%;}
.from > div input {width: 50%; float: left;}
.from > div button {width: 42%; float: right; padding: 15px 0px;display: inline-block;}
.sorrytext{ display:none; text-align:center; color:#FFF; margin-bottom:10px}
.btn2 {border-radius: 0.5rem; background-color: #ffe335; border: none; padding: 15px 0px; color: #d31427; }
.btn3{
display:block;
border:0px;
margin:0rem auto;
width: 90%;
padding: 17px 0px;
background-color: #ef2122;
text-align: center;
font-weight: bold;
font-size:18px;
color: #ffffff;
border-radius: 0.26666667rem;
}
a.btn-lingqu2{background:#e60012;color:#fff;}
.btn-disable3{background:#c9c9c9;color:#fff;}
.banner2{ width:100%; margin:0px auto 5% auto;}
.banner2 img{ width:100%;}
.tabsbox { width:94%; margin:0px auto 5% auto;font-size: 80%; color: #fff; background-color:#FFF; padding:11% 0% 5% 0%; position:relative; }
.tabsbox2{padding:11% 0% 0% 0%;}
.tabsbox .title1 {width:160px;height:44px; line-height:44px;background:#e60012;border:5px solid #faca34;color:#fff;font-size:18px;font-weight:bolder;border-radius:25px;text-align:center;position:absolute; left:50%;top:-27px; margin-left:-85px;}
.tabsbox p { width:90%; margin:0px auto; line-height:26px; color:#a46626}
.btn4{ display:block;
border:0px;
margin:0rem auto 5% auto;
width: 94%;
height: 44px;
line-height: 44px;
background-color: #ef2122;
text-align: center;
font-weight: bold;
font-size:18px ;
color: #fff3f0;
border-radius: 4px;}
.Prize { border-bottom: solid 1px #faca34; padding:3% 2% 3% 2%; }
.Prize > div { color: #000; width:90%; margin:0 auto; line-height:40px}