上一節(jié)：一面微信墻的誕生(2) 消息服務(wù)端的搭建
本項(xiàng)目 github 地址 : https://github.com/heygirlwhatyournameis/wechatwall
在用戶發(fā)表留言之前版姑，需要進(jìn)入登錄狀態(tài)猛铅。在微信平臺(tái)中镐牺，登錄應(yīng)該是一個(gè)自動(dòng)的過程：用戶只需要進(jìn)行一次授權(quán)逞带，往后的登錄都由后臺(tái)自己來處理。
在 client 文件夾下新建 index.php ：
登錄流程
首先要處理自動(dòng)登錄這一流程拂玻，在沒有接入微信平臺(tái)之前酬凳，我們可以先這樣做：用戶進(jìn)入客戶端時(shí)自動(dòng)登錄我們的測(cè)試帳號(hào) abcdefg，方法很簡(jiǎn)單朝墩，直接給 session 賦值即可。
session_start();
if(!isset($_SESSION['wall_open_id'])){
//未登錄時(shí)自動(dòng)登錄abcdefg
$_SESSION['wall_open_id']='abcdefg';
//預(yù)留：后期需要跳轉(zhuǎn)到微信授權(quán)頁
}
$openid=$_SESSION['wall_open_id'];
提取用戶信息
登錄之后伟姐，我們就可以用 openid 從數(shù)據(jù)庫拉取當(dāng)前用戶的信息：
//獲取當(dāng)前用戶數(shù)據(jù)
require('../util/database.class.php');
$db=Db::getInstance();
$user=$db->find("SELECT * FROM user where openid='$openid'");
if(empty($user))
die('用戶不存在');
構(gòu)造界面
將之前的 php 語句塊封閉，在下面直接編寫 html 代碼亿卤。初步的界面只有三個(gè)部分：
- 用戶的昵稱
- 輸入文本域
- 提交按鈕
由于我們的界面是要在手機(jī)上跑的愤兵，所以要加上移動(dòng)顯示屏的適配：
<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>
將數(shù)據(jù)發(fā)送給服務(wù)器
導(dǎo)入 jQuery
在 head 部分導(dǎo)入 jQuery CDN，也可以下載到本地服務(wù)器上引用：
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
編寫 post 腳本
在 body 中編寫 javascript 語句排吴，當(dāng)按鈕被觸發(fā)時(shí)秆乳，將文本域的數(shù)據(jù)發(fā)送給服務(wù)器，并 alert 返回的信息：
<script>
$(document).ready(function(){
$('#post-button').click(function(){
$.post('../server/new.php',{
content:$('#message').val()
},function(response){
var data=JSON.parse(response); //解析json數(shù)據(jù)
alert(data.message);
})
});
});
</script>
完整代碼
/client/index.php
<?php
session_start();
if(!isset($_SESSION['wall_open_id'])){
//未登錄時(shí)自動(dòng)登錄abcdefg
$_SESSION['wall_open_id']='abcdefg';
//預(yù)留：后期需要跳轉(zhuǎn)到微信授權(quán)頁
}
$openid=$_SESSION['wall_open_id'];
//獲取當(dāng)前用戶數(shù)據(jù)
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數(shù)據(jù)
alert(data.message);
})
});
});
</script>
</body>
</html>
至此钻哩，我們完成了從數(shù)據(jù)庫提取用戶信息屹堰、向消息服務(wù)端發(fā)送留言兩大過程。
下一步我們將完成消息的推送功能街氢。
下一節(jié)：一面微信墻的誕生(4) 消息推送的實(shí)現(xiàn)
