bi站學習即時聊天：前端篇（1）

https://space.bilibili.com/485469670?from=search&seid=4770263165694618607
本文為看教程所寫的筆記，本次開發(fā)使用uni-app開發(fā)。

一、創(chuàng)建新項目，目錄結(jié)構(gòu)如下：

image.png

二、去藍湖看看原型圖，修改基礎(chǔ)配色

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

image.png

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

  • 在uni.scss中修改基礎(chǔ)配色
/* 顏色變量 */

/* 行為相關(guān)顏色 */
$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);//點擊狀態(tài)顏色
$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%;

三、創(chuàng)建首頁面

  • 圖片自行從藍湖切
    在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] 按鍵都結(jié)束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

四、寫數(shù)據(jù)做數(shù)據(jù)綁定

  • 在js文件夾下創(chuàng)建data.js
export default {
    friends: function() {
        let friendsarr = [
            {
                id:1,
                imgurl:'avatar2.jpg',
                tip:2,
                name:'baron.Y',
                time: new Date(),
                messages:'君不見黃河之水天上來，奔流到海不復回。君不見高堂明鏡悲白發(fā)，朝如青絲暮成雪。'
            },
            {
                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>

  • 中間有個時間格式轉(zhuǎn)化的js，可自行找度娘。
    效果：


    image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容