在用戶發(fā)表留言之前，需要進(jìn)入登錄狀態(tài)。在微信平臺中，登錄應(yīng)該是一個自動的過程：用戶只需要進(jìn)行一次授權(quán)，往后的登錄都由后臺自己來處理。

在 client 文件夾下新建 index.php ：

登錄流程

首先要處理自動登錄這一流程，在沒有接入微信平臺之前，我們可以先這樣做：用戶進(jìn)入客戶端時自動登錄我們的測試帳號 abcdefg，方法很簡單，直接給 session 賦值即可。

session_start();

if(!isset($_SESSION['wall_open_id'])){

//未登錄時自動登錄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 代碼。初步的界面只有三個部分：

用戶的昵稱

輸入文本域

提交按鈕

由于我們的界面是要在手機(jī)上跑的，所以要加上移動顯示屏的適配：

整體HTML代碼：

歡迎使用微信墻

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

留言

圖3-1 Chrome瀏覽器開發(fā)者工具中的效果

將數(shù)據(jù)發(fā)送給服務(wù)器

導(dǎo)入 jQuery

在 head 部分導(dǎo)入 jQuery CDN，也可以下載到本地服務(wù)器上引用：

編寫 post 腳本

在 body 中編寫 javascript 語句，當(dāng)按鈕被觸發(fā)時，將文本域的數(shù)據(jù)發(fā)送給服務(wù)器，并 alert 返回的信息：

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

})

});

});

圖3-2 發(fā)送消息測試

圖3-3 消息已經(jīng)顯示在數(shù)據(jù)庫

完整代碼

/client/index.php

session_start();

if(!isset($_SESSION['wall_open_id'])){

//未登錄時自動登錄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('用戶不存在');

?>

歡迎使用微信墻

歡迎您：<?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數(shù)據(jù)

alert(data.message);

})

});

});

至此，我們完成了從數(shù)據(jù)庫提取用戶信息、向消息服務(wù)端發(fā)送留言兩大過程。

圖3-3 已經(jīng)完成的部分

下一步我們將完成消息的推送功能。

總結(jié)

以上是生活随笔為你收集整理的微信墙服务器地址,一面微信墙的诞生(3) 用户端界面的创建的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。