微信小程序开发之——WebSocket通信-示例(2)

发送

4.2 样式文件(index.wxss)

page{

background-color: #f7f7f7;

height: 100%;

}

.wrap{

width: 100%;

height: 100%;

display: flex;

border-top: 0px;

box-sizing: border-box;

}

.chat{

padding: 5rpx 10rpx;

font-size: 14px;

line-height: 80rpx;

word-break: break-all;

margin-bottom: 100rpx;

box-sizing: border-box;

}

/* 聊天*/

.chat-news{

width: 100%;

overflow: hidden;

}

.news-lf{

float: right;

padding-right: 20rpx;

}

.chat-news::after{

display: block;

height: 0;

clear: both;

content: ‘’;

}

.new-rl{

float: left;

padding-left: 20rpx;

}

.new-img{

width: 60rpx;

height: 60rpx;

border-radius: 50%;

vertical-align: middle;

margin-right: 10rpx;

}

.new-txt{

max-width: 300rpx;

display: inline-block;

border-radius: 6rpx;

line-height: 60rpx;

background: #95d4ff;

padding: 5rpx 20rpx;

margin: 0 10rpx;

margin-left: 50rpx;

}

.new-text{

margin-left: 0;

background: lightgreen;

}

/* 信息输入区域*/

.message{

position: fixed;

bottom: 0;

width: 100%;

height: 102rpx;

padding: 10rpx;

background-color: #fff;

border-top: 2rpx solid #eee;

box-sizing: border-box;

z-index: 3;

}

.message input{

float: left;

width: 76%;

height: 100%;

line-height: 80rpx;

padding: 0 10rpx;

font-size: 35rpx;

color: #666;

}

.message button{

float: right;

font-size: 35rpx;

}

4.3 逻辑文件(index.js)

Page({

/**

• 页面的初始数据

*/

data: {

scrollTop: 0,

list: []

},

id: 0,

/** 生命周期函数–监听页面加载*/

onLoad: function (options) {

wx.connectSocket({

//本地服务器地址

url: ‘ws://localhost:3000’,

})

//连接成功

wx.onSocketOpen((res) => {

console.log(‘连接成功’)

})

wx.onSocketMessage((res) => {

var data = JSON.parse(res.data)

data.id = this.id++

data.role = ‘server’

var list = this.data.list

list.push(data)

this.setData({

list: list

})

this.rollingBottom()

})

},

//发送内容

message: ‘’,

send() {

//判断发送内容是否为空

if (this.message) {

wx.sendSocketMessage({

data: this.message,

})

//我自己的消息

console.log(this.data.list)

var list = this.data.list

list.push({

id: this.id++,

content: this.message,

role: ‘me’

})

this.setData({

list: list

})

this.rollingBottom()

} else {

最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~

祝大家都能收获大厂offer~

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分内容