微信墙服务器地址,一面微信墙的诞生(3) 用户端界面的创建

在用户发表留言之前，需要进入登录状态。在微信平台中，登录应该是一个自动的过程：用户只需要进行一次授权，往后的登录都由后台自己来处理。

在 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 代码。初步的界面只有三个部分：

用户的昵称

输入文本域

提交按钮

由于我们的界面是要在手机上跑的，所以要加上移动显示屏的适配：

整体HTML代码：

欢迎使用微信墙

欢迎您：<?php echo $user['nickname'];?>

留言

图3-1 Chrome浏览器开发者工具中的效果

将数据发送给服务器

导入 jQuery

在 head 部分导入 jQuery CDN，也可以下载到本地服务器上引用：

编写 post 脚本

在 body 中编写 javascript 语句，当按钮被触发时，将文本域的数据发送给服务器，并 alert 返回的信息：

$(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);

})

});

});

图3-2 发送消息测试

图3-3 消息已经显示在数据库

完整代码

/client/index.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('用户不存在');

?>

欢迎使用微信墙

欢迎您：<?php echo $user['nickname'];?>

留言

$(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);

})

});

});

至此，我们完成了从数据库提取用户信息、向消息服务端发送留言两大过程。

图3-3 已经完成的部分

下一步我们将完成消息的推送功能。