
上一节:一面微信墙的诞生(4) 消息推送的实现
本项目 github 地址 : https://github.com/heygirlwhatyournameis/wechatwall
再将微信墙接入微信平台前,你需要以下两项关键的材料:
- 一个认证的微信公众号
- 一个有域名的公网服务器
如果你是大学生,可以购买阿里云或腾讯云提供的学生服务器,非常优惠。具体的购买方法和配置方法在次不阐述,可上网搜索资料。
配置公众号
你需要将你的域名绑定在公众号上,这样你的服务器才能使用微信提供的接口:
-
登录公众帐号 -> 公众号设置 -> 功能设置 -> 业务域名
将业务域名设置成为你自己的域名,并下载链接中的文件,上传到服务器根目录下,上传完成后点击保存即可。
图5-1 设置业务域名
-
同样在功能设置页面设置网页授权域名,这次就不需要再传文件了(刚才已经穿过了)。
图5-2 设置网页授权域名
业务授权域名的作用是,用户在使用微信访问你的网页时,不会出现防骗的提示条;网页授权的域名是微信接口回调时,所认可的域名。
获取开发者ID和密码
在“基本设置页面”中可以查看到自己的开发者ID和密码,密码需要管理员扫码授权查看,而且只能查看一次,所以要保存在安全的地方。如果忘记了开发者密码,需要扫码重置。

编写授权业务代码
在 client 文件夹下新建 login.php
<?php
//配置你的开发者ID和密码
$app_id='...';
$app_secret='...';
//工程根目录地址
$domain='http://abc.com/wall';
//没有code,发起授权请求获取code
if(!isset($_GET['code'])){
//回调地址,即本页面
$url=urlencode("$domain/client/login.php");
//跳转到授权页面
echo ("<script>
window.location.href='https://open.weixin.qq.com/connect/oauth2/authorize?appid=".$app_id."&redirect_uri=$url&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect';
</script>");
exit;
} else {
$code=$_GET['code'];
//从微信端获取 access_token 和openid
$response=file_get_contents("https://api.weixin.qq.com/sns/oauth2/access_token?appid=$app_id&secret=$app_secret&code=$code&grant_type=authorization_code");
$response=json_decode($response,true);
if(isset($response['errcode'])){
echo 'ERROR '.$response['errcode'];
exit;
}
$token=$response['access_token'];
$openid=$response['openid'];
require('../util/database.class.php');
$db=Db::getInstance();
$user=$db->find("SELECT * FROM user WHERE openid='$openid'");
//如果数据库,没有该用户,用access_token拉取用户信息
if(empty($user)){
$response=file_get_contents("https://api.weixin.qq.com/sns/userinfo?access_token=$token&openid=$openid&lang=zh_CN");
if(isset($response['errcode'])){
echo 'ERROR '.$response['errcode'];
exit;
}
$response=json_decode($response,true);
//将用户信息存入数据库
$nickname=$response['nickname'];
$avatarUrl=$response['headimgurl'];
$db->execute("INSERT INTO user VALUES ('$openid','$nickname','$avatarUrl')");
}
//进入登录状态
session_start();
$_SESSION['wall_open_id']=$openid;
//进入首页
header("Location: index.php");
}
修改 /client/user.php
将以下代码
session_start();
if(!isset($_SESSION['wall_open_id'])){
//未登录时自动登录abcdefg
$_SESSION['wall_open_id']='abcdefg';
//预留:后期需要跳转到微信授权页
}
$openid=$_SESSION['wall_open_id'];
改为
session_start();
if(!isset($_SESSION['wall_open_id'])){
header("Location: login.php");
exit;
}
$openid=$_SESSION['wall_open_id'];
修改 /server/new.php
将以下代码
/**
* 预留使用
* session_start();
* $openid=$_SESSION['wall_open_id'];
*/
$openid='abcdefg';
if(!$openid){
result(1,'未登录');
die;
}
if(!isset($_POST['content'])){
result(2,'消息为空');
die;
}
改为
session_start();
if(!isset($_SESSION['wall_open_id'])){
result(1,'未登录');
die;
}
$openid=$_SESSION['wall_open_id'];
if(!isset($_POST['content'])){
result(2,'消息为空');
die;
}
将工程上传到服务器
我使用了 FTP 工具将我的整个工程文件上传到服务器上,并将本地的数据库也配置到了服务器上。
使用微信web开发者工具测试
在微信提供的开发者工具中,打开你服务器下的 /client/index.php




如果你也测试成功,恭喜你,你的微信墙已经初步完成。

不过你的工作还没有结束,在真正投入使用前,你还需要技术完善它,包括但不限于:
- 优化前端网页的布局,美化网页样式,可以引入微信的 weui 样式库或者 bootstrap 框架;
- 在前后端加上消息验证,设定规则避免空消息和灌水消息;
- 优化目录结构,分离网页中的 css 和 javascript;
- 对 php 中的 get 和 post 参数进行处理,避免数据库注入的发生。
在未来,你还可以对系统进行更好的升级,使其符合完善和健壮:
- 将用户端分离出来,成为一个纯前端应用;将登录的逻辑移至服务端,使客户端和服务端真正相互独立。
- 使用 vue 或 angular 等框架来重构前端,将视图和数据剥离。
- 使用 thinkphp 等框架重构后端,借助 MVVM 架构和方便的数据库交互功能简化服务端的代码。
- 使用 websocket 代替 server-event,让消息的推送更及时和高效
……
如果你在阅读和尝试过程中遇到问题,欢迎在评论区、私信区留言,或者添加我的微信与我联系:

网友评论