微信开发-技术文档(1)10.8-10.15

1.前端页面构建

登录注册界面

仿造网页微信的登录界面，把二维码扫描登录改成了双面翻转的登录注册板块。
动画部分，使用animate.css制作登录与注册界面的翻转动画。
具体实现代码：
正反双面div容器

#card {
    display: block;
    position: absolute;
    transition: width 1.8s cubic-bezier(0.23, 1, 0.32, 1), height 1.8s cubic-bezier(0.23, 1, 0.32, 1), transf/Users/trick/Documents/web/学习日记/技术文档10.08-10.15.mdorm 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
}

正面登录

.front-box {
    backface-visibility: hidden;
    transition: background 0.15s ease, line-height 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

反面注册

#card .back-box {
    /*在反过来之前,它是倒着的*/
    transform: translateZ(-1px) rotateY(180deg);
}

当点击翻转时，给双面容器div添加.is-open的class

.is-open {
    transform: rotateY(180deg);
}

微信聊天界面

完全仿造网页微信聊天窗口，后期还需要修改成手机端效果

2.schema规划

用户表

/*用户定义*/
var userSchema;
userSchema = new Schema({
    username: String,
    password: String,
    sexual: Boolean,
    //该用户的好友数组,用户可以再这个数组中不断push入新的好友
    contact :[{
        type: Schema.Types.ObjectId,
        ref: 'User'  
    }],
    meta: {
        createAt : { type:Date, default: Date.now()},
        lastLoginAt : { type:Date, default: Date.now()},
    }
});

聊天会话表

/*会话定义*/
var msgSchema =  new Schema({
    sender: String,
    receiver: String,
    msgContent: String,
    createAt: {type:Date, default: Date.now()}
});

var sessionSchema = new Schema({
    contact1: {
        type: Schema.Types.ObjectId,
        ref: 'User'
    },
    contact2: {
        type: Schema.Types.ObjectId,
        ref: 'User'
    },
    //该会话的聊天消息数组，每次新增一条聊天记录，就push进这个消息数组中
    chatHistory: [msgSchema],
    meta: {
        createAt: {type:Date, default: Date.now()},
        lastChatAt: {type:Date, default: Date.now()}
    }
})

3.socket.io学习笔记

搭建http服务

var server = require('http').createServer(app);
var io = require('socket.io').listen(server);

还要在前端页面引入socke.js文件

<script src="/socket.io/socket.io.js"></script>

在打开页面的同时，创建一个io对象

var socket = io();

emit和on

socket.emit('action');表示发送了一个action命令，命令是字符串的，在另一端接收时，可以这么写： socket.on('action',function(){...});
socket.emit('action',data);表示发送了一个action命令，还有data数据，在另一端接收时，可以这么写： socket.on('action',function(data){...});
socket.emit(action,arg1,arg2); 表示发送了一个action命令，还有两个数据，在另一端接收时，可以这么写： socket.on('action',function(arg1,arg2){...});
在emit方法中包含回调函数，例如：
socket.emit('action',data, function(arg1,arg2){...} );那么这里面有一个回调函数可以在另一端调用，另一端可以这么写：socket.on('action',function(data,fn){ fn('a','b') ; });
上面的data数据可以有0个或者多个，相应的在另一端改变function中参数的个数即可，function中的参数个数和顺序应该和发送时一致
上面的fn表示另一个端传递过来的参数，是个函数，写fn('a','b') ;会回调函数执行。一次发送不应该写多个回调，否则只有最后一个起效，回调应作为最后一个参数。

总结：
socket.emit('action')：发送一个'action'请求，添加data参数表示同时发送data数据，添加function表示同时调用回调函数。类似于自定义函数调用
socket.on(‘action',function(){})：接收一个'action'请求时，调用执行function函数。类似于自定义函数声明。

官方API

io.on('connection', function(socket){});
在连接socket时，启动I/O通讯，自动触发其中的函数，相当于是当前socket的入口文件。
io.on('disconnect', function(socket){});
与socket断开I/O通讯时，执行。