×

一面微信墙的诞生(3) 用户端界面的创建

96
忠叔
2017.11.22 22:45* 字数 463

上一节:一面微信墙的诞生(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 代码。初步的界面只有三个部分:

  1. 用户的昵称
  2. 输入文本域
  3. 提交按钮

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

<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 已经完成的部分

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

下一节:一面微信墙的诞生(4) 消息推送的实现

一面微信墙的诞生
Web note ad 1