微信开发-技术文档(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规划用户表```js/*用户定义*/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()},    }});```聊天会话表```js/*会话定义*/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服务```jsvar server = require('http').createServer(app);var io = require('socket.io').listen(server);```还要在前端页面引入socke.js文件```js```在打开页面的同时，创建一个io对象```jsvar socket = io();```#### emit和onsocket.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函数。类似于自定义函数声明。  #### 官方APIio.on('connection', function(socket){});  在连接socket时，启动I/O通讯，自动触发其中的函数，相当于是当前socket的入口文件。  io.on('disconnect', function(socket){});  与socket断开I/O通讯时，执行。