bi站学习即时聊天：前端篇（1）

作者: baronY | 来源:发表于2020-05-14 23:00 被阅读0次

bi站学习即时聊天：前端篇（1）
bi站学习即时聊天：前端篇（2）
bi站学习即时聊天：后端篇（1）
即时聊天_即时推送
即时聊天
Go语言打造高并发web即时聊天(IM-Instant Mess
webrtc
iOS_环信
前端的演化
关于即时聊天

https://space.bilibili.com/485469670?from=search&seid=4770263165694618607
本文为看教程所写的笔记，本次开发使用uni-app开发。

一、创建新项目，目录结构如下：

image.png

二、去蓝湖看看原型图，修改基础配色

蓝湖链接：https://lanhuapp.com/web/#/item/project/board?pid=8aa1d219-5aff-4833-b50f-c254feb48f11&from=nav

image.png

之后不做蓝湖演示，自行查看：

在uni.scss中修改基础配色

/* 颜色变量 */

/* 行为相关颜色 */
$uni-color-primary: rgba(255,228,49,1);
$uni-color-success: rgba(87,153,255,1);
$uni-color-warning: rgba(255,93,91,1);
$uni-color-error: rgba(255,93,91,1);

/* 文字基本颜色 */
$uni-text-color:rgba(39,40,50,1);//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:rgba(39,40,50,0.6);//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:rgba(39,40,50,0.4);

/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:rgba(243,244,246,1);
$uni-bg-color-hover:rgba(39,40,50,0.2);//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色

/* 边框颜色 */
$uni-border-color:#c8c7cc;

/* 尺寸变量 */

/* 文字尺寸 */
$uni-font-size-sm:24rpx;
$uni-font-size-base:28rpx;
$uni-font-size-lg:32rpx;

/* 图片尺寸 */
$uni-img-size-sm:80rpx;
$uni-img-size-base:96rpx;
$uni-img-size-lg:104rpx;

/* Border Radius */
$uni-border-radius-sm: 10rpx;
$uni-border-radius-base: 20rpx;
$uni-border-radius-lg: 40rpx;
$uni-border-radius-circle: 50%;

三、创建首页面

图片自行从蓝湖切
在index.vue中编辑：

<template>
    <view class="content">
        <!-- 顶栏 -->
        <view class="top-bar">
            <view class="top-bar-left"><image src="../../static/images/img/avatar2.jpg"></image></view>
            <view class="top-bar-center"><image src="../../static/images/index/logo.png" class="logo"></image></view>
            <view class="top-bar-right">
                <view class="search"><image src="../../static/images/index/search.png"></image></view>
                <view class="add"><image src="../../static/images/index/add.png"></image></view>
            </view>
        </view>
        <!-- 消息列表  -->
        <view class="main">
            <view class="friends">
                <view class="friends-list">
                    <view class="friends-list-l">
                        <text class="tip">1</text>
                        <image src="../../static/images/index/main.png"></image>
                    </view>
                    <view class="friends-list-r">
                        <view class="top">
                            <view class="name">好友申请</view>
                            <view class="time">上午12：21</view>
                        </view>
                        <view class="messages">茫茫人海，相聚就是缘分！</view>
                    </view>
                </view>
            </view>
            <view class="friends">
                <view class="friends-list">
                    <view class="friends-list-l">
                        <text class="tip">1</text>
                        <image src="../../static/images/img/avatar2.jpg"></image>
                    </view>
                    <view class="friends-list-r">
                        <view class="top">
                            <view class="name">baron.Y</view>
                            <view class="time">上午12：21</view>
                        </view>
                        <view class="messages">[content;substance] 按键都结束ajsdoasjdjdasojaddsaasddas</view>
                    </view>
                </view>
            </view>
        </view>
    </view> 
</template>

<script>
export default {
    data() {
        return {
            title: 'Hello'
        };
    },
    onLoad() {},
    methods: {}
};
</script>

<style lang="scss">
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.top-bar {
    position: absolute;
    top: 0;
    width: 100%;
    height: 88rpx;
    box-sizing: border-box;
    background: $uni-bg-color;
    box-shadow: 0rpx 1rpx 0rpx 0rpx rgba(0, 0, 0, 0.1);
    // padding-left: $uni-spacing-col-base;
    // padding-right: $uni-spacing-col-base;
    margin-top: 16rpx;
    .top-bar-left {
        float: left;
        image {
            padding-left: 32rpx;
            width: 68rpx;
            height: 68rpx;
            border-radius: 16rpx;
        }
    }
    .top-bar-center {
        position: absolute;
        text-align: center;
        left: 0;
        right: 0;
        margin: auto;
        .logo {
            width: 130rpx;
            height: 130rpx;
            top: -40rpx;
        }
        .title {
        }
    }
    .top-bar-right {
        float: right;
        margin-bottom: 30rpx;
        .search {
            width: 88rpx;
            height: 88rpx;
            display: inline-block;
        }
        .add {
            width: 88rpx;
            height: 88rpx;
            display: inline-block;
        }
        image {
            padding: 18rpx 0 0 18rpx;
            width: 52rpx;
            height: 52rpx;
            bottom: 10rpx;
        }
    }
}
.main{
    padding: 88rpx $uni-spacing-col-base;
    width: 100%;
}
.friends{
    padding: 10rpx;
    .friends-list-l{
        height: 96rpx;
        padding: 25rpx 0;
        float: left;
        image{
            width:96rpx;
            height:96rpx;
            margin-left: 16rpx;
            border-radius:$uni-border-radius-base;
            background-color: $uni-bg-color;
        }
        .tip{
            position: absolute;
            z-index: 10;
            left: 100rpx;
            text-align: center;
            height: 36rpx;
            min-width: 36rpx;
            background: $uni-color-warning;
            border-radius: $uni-border-radius-circle;
            font-size: $uni-font-size-sm;
            color: $uni-text-color-inverse;
            line-height: 36rpx;
        }
    }
    .friends-list-r{
        width: 100%;
        padding: 22rpx;
        .top{
            display: flex;
            padding-left: 32rpx;
            .name{
                font-size:36rpx;
                font-family:PingFangSC-Regular,PingFang SC;
                font-weight:400;
                line-height:50rpx;
            }
            .time{
                padding-left: 320rpx;
                padding-right: 10rpx;
                font-size:24rpx;
                font-family:PingFangSC-Regular,PingFang SC;
                font-weight:400;
                color:rgba(39,40,50,0.4);
                line-height:34rpx;
            }
        }
        .messages{
            display: flex;
            padding-left: 32rpx;
            font-size:28rpx;
            font-family:PingFangSC-Regular,PingFang SC;
            font-weight:400;
            color:rgba(39,40,50,0.6);
            line-height:40rpx;
              /* 固定套路 */
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                display: inline-block;
                /* 宽度自定义*/
                max-width: 80%;
        }
    }
}
</style>

效果如图：

index.png

四、写数据做数据绑定

在js文件夹下创建data.js

export default {
    friends: function() {
        let friendsarr = [
            {
                id:1,
                imgurl:'avatar2.jpg',
                tip:2,
                name:'baron.Y',
                time: new Date(),
                messages:'君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。'
            },
            {
                id:2,
                imgurl:'avatar6.jpg',
                tip:1,
                name:'baron.H',
                time: new Date(),
                messages:'人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。'
            },
            {
                id:3,
                imgurl:'avatar5.jpeg',
                tip:5,
                name:'baron.A',
                time: new Date(),
                messages:'烹羊宰牛且为乐，会须一饮三百杯。'
            },
            {
                id:4,
                imgurl:'avatar4.jpeg',
                tip:6,
                name:'baron.J',
                time: new Date(),
                messages:'岑夫子，丹丘生，将进酒，杯莫停。'
            },
            {
                id:5,
                imgurl:'avatar6.jpeg',
                tip:2,
                name:'baron.T',
                time: new Date(),
                messages:'古来圣贤皆寂寞，惟有饮者留其名。'
            },
        ];
        return friendsarr
    }
}

修改主页面index.vue

<template>
    <view class="content">
        <!-- 顶栏 -->
        <view class="top-bar">
            <view class="top-bar-left"><image src="../../static/images/img/avatar2.jpg"></image></view>
            <view class="top-bar-center"><image src="../../static/images/index/logo.png" class="logo"></image></view>
            <view class="top-bar-right">
                <view class="search"><image src="../../static/images/index/search.png"></image></view>
                <view class="add"><image src="../../static/images/index/add.png"></image></view>
            </view>
        </view>
        <!-- 消息列表  -->
        <view class="main">
            <view class="friends" name="好友通知">
                <view class="friends-list">
                    <view class="friends-list-l">
                        <text class="tip">1</text>
                        <image src="../../static/images/index/main.png"></image>
                    </view>
                    <view class="friends-list-r">
                        <view class="top">
                            <view class="name">好友申请</view>
                            <view class="time">上午12：21</view>
                        </view>
                        <view class="messages">茫茫人海，相聚就是缘分！</view>
                    </view>
                </view>
            </view>
            <view class="friends" v-for="(item, index) in friends" :key="item.id">
                <view class="friends-list">
                    <view class="friends-list-l">
                        <text class="tip">{{ item.tip }}</text>
                        <image :src="item.imgurl"></image>
                    </view>
                    <view class="friends-list-r">
                        <view class="top">
                            <view class="name">{{ item.name }}</view>
                            <view class="time">{{ changeTime(item.time)}}</view>
                        </view>
                        <view class="messages">{{ item.messages }}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import data from '../../common/js/data.js';
import myfun from '../../common/js/myfun.js'

export default {
    data() {
        return {
            title: 'Hello',
            friends: [{
                imgurl: {}
            }]
        };
    },
    onLoad() {
        this.getFriends();
    },
    methods: {
        changeTime: function(date){
            return myfun.dateTime(date)
        },
        getFriends: function() {
            this.friends = data.friends();
            for (let i = 0; i < this.friends.length; i++) {
                this.friends[i].imgurl = '../../static/images/img/' + this.friends[i].imgurl;
            }
            console.log(this.friends);
        }
    }
};
</script>

中间有个时间格式转化的js，可自行找度娘。
效果：

image.png

bi站学习即时聊天：前端篇（1）
https://space.bilibili.com/485469670?from=search&seid=477...
bi站学习即时聊天：前端篇（2）
今天来把登陆注册页面搞定，开冲！一、登陆页面搭建新建signin页面，在signin页面：效果如图：二、注...
bi站学习即时聊天：后端篇（1）
这次用node后端来开发即时聊天，这篇博客将进行前后端的接口对接。一、创建项目创建server文件夹，安装ex...
即时聊天_即时推送
在线测试：http://www.cnblogs.com/romanticcrystal/p/8979869.htm...
即时聊天
六个免费开源的即时通讯软件源代码常见即时通讯：网易IM 、腾讯IM、环信IM、融云IM、leancloud IM...
Go语言打造高并发web即时聊天(IM-Instant Mess
Go语言打造高并发web即时聊天(IM)应用-支持10万人同时在线 1.技术栈 1.1.前端技术 h5ajax发送...
webrtc
使用WebRTC搭建前端视频聊天室——入门篇使用WebRTC搭建前端视频聊天室——信令篇Android之WebRTC介绍
iOS_环信
对于环信(即时聊天)分为三个方面学习： 1，Socket的网络通信，Socket相关难点理解（详见——Socket...
前端的演化
20200420 今天突然看见一篇关于前端演化：原文由作者“司徒正美”发布于公众号“前端你别闹”，即时通讯网收...
关于即时聊天
https://github.com/coderMyy/MYCoreTextLabel 图文混排 , 实现图片文...