當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時(shí)間：2025/3/15 编程问答 17 豆豆

生活随笔收集整理的這篇文章主要介紹了微信墙服务器地址,一面微信墙的诞生(3) 用户端界面的创建小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

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

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

登錄流程

首先要處理自動(dòng)登錄這一流程，在沒(méi)有接入微信平臺(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)頁(yè)

}

$openid=$_SESSION['wall_open_id'];

提取用戶信息

登錄之后，我們就可以用 openid 從數(shù)據(jù)庫(kù)拉取當(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 語(yǔ)句塊封閉，在下面直接編寫(xiě) html 代碼。初步的界面只有三個(gè)部分：

用戶的昵稱

輸入文本域

提交按鈕

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

整體HTML代碼：

歡迎使用微信墻

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

留言

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

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

導(dǎo)入 jQuery

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

編寫(xiě) post 腳本

在 body 中編寫(xiě) javascript 語(yǔ)句，當(dāng)按鈕被觸發(fā)時(shí)，將文本域的數(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ā)送消息測(cè)試

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

完整代碼

/client/index.php