一面微信墙的诞生(3) 用户端界面的创建
2017-11-22 本文已影响258人
忠叔
上一节：一面微信墙的诞生(2) 消息服务端的搭建
本项目 github 地址 : https://github.com/heygirlwhatyournameis/wechatwall
在用户发表留言之前，需要进入登录状态。在微信平台中，登录应该是一个自动的过程：用户只需要进行一次授权，往后的登录都由后台自己来处理。
在 client 文件夹下新建 index.php ：
登录流程
首先要处理自动登录这一流程，在没有接入微信平台之前，我们可以先这样做：用户进入客户端时自动登录我们的测试帐号 abcdefg，方法很简单，直接给 session 赋值即可。
session_start();
if(!isset($_SESSION['wall_open_id'])){
//未登录时自动登录abcdefg
$_SESSION['wall_open_id']='abcdefg';
//预留：后期需要跳转到微信授权页
}
$openid=$_SESSION['wall_open_id'];
提取用户信息
登录之后，我们就可以用 openid 从数据库拉取当前用户的信息：
//获取当前用户数据
require('../util/database.class.php');
$db=Db::getInstance();
$user=$db->find("SELECT * FROM user where openid='$openid'");
if(empty($user))
die('用户不存在');
构造界面
将之前的 php 语句块封闭，在下面直接编写 html 代码。初步的界面只有三个部分：
- 用户的昵称
- 输入文本域
- 提交按钮
由于我们的界面是要在手机上跑的，所以要加上移动显示屏的适配：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
整体HTML代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>欢迎使用微信墙</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<p>欢迎您：<?php echo $user['nickname'];?></p>
<div>
<textarea id="message" rows="10" style="width:100%;border:solid 2px #000;"></textarea>
</div>
<div>
<button id="post-button" style="width:100%;font-size:20px">留言</button>
</div>
</body>
</html>
图3-1 Chrome浏览器开发者工具中的效果
将数据发送给服务器
导入 jQuery
在 head 部分导入 jQuery CDN，也可以下载到本地服务器上引用：
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
编写 post 脚本
在 body 中编写 javascript 语句，当按钮被触发时，将文本域的数据发送给服务器，并 alert 返回的信息：
<script>
$(document).ready(function(){
$('#post-button').click(function(){
$.post('../server/new.php',{
content:$('#message').val()
},function(response){
var data=JSON.parse(response); //解析json数据
alert(data.message);
})
});
});
</script>
图3-2 发送消息测试
图3-3 消息已经显示在数据库
完整代码
/client/index.php
<?php
session_start();
if(!isset($_SESSION['wall_open_id'])){
//未登录时自动登录abcdefg
$_SESSION['wall_open_id']='abcdefg';
//预留：后期需要跳转到微信授权页
}
$openid=$_SESSION['wall_open_id'];
//获取当前用户数据
require('../util/database.class.php');
$db=Db::getInstance();
$user=$db->find("SELECT * FROM user where openid='$openid'");
if(empty($user))
die('用户不存在');
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>欢迎使用微信墙</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<p>欢迎您：<?php echo $user['nickname'];?></p>
<div>
<textarea id="message" rows="10" style="width:100%;border:solid 2px #000;"></textarea>
</div>
<div>
<button id="post-button" style="width:100%;font-size:20px">留言</button>
</div>
<script>
$(document).ready(function(){
$('#post-button').click(function(){
$.post('../server/new.php',{
content:$('#message').val()
},function(response){
var data=JSON.parse(response); //解析json数据
alert(data.message);
})
});
});
</script>
</body>
</html>
至此，我们完成了从数据库提取用户信息、向消息服务端发送留言两大过程。
图3-3 已经完成的部分
下一步我们将完成消息的推送功能。
