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

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中编辑：

效果如图：

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

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

  
  
  image.png