仿微信朋友圈项目梳理(1)

2301_79099480

于 2024-05-07 18:54:13 发布

阅读量709

点赞数 22

分类专栏：程序员文章标签：微信数码相机

本文链接：https://blog.csdn.net/2301_79099480/article/details/138541862

版权

程序员专栏收录该内容

286 篇文章

订阅专栏

验证码输入后点击同意并阅读相关条款后注册/确定按钮变成激活状态
登录成功后该页面跳转至上一需登录页面
将用户信息存入store中（Vuex）

2. 主页：

在这里插入图片描述

2.1 上半部分：

头部导航返回按钮相机标志（见主题3）
背景图头像用户昵称如果用户未登录是系统随机匹配的图片

2.1.1 头部：

在这里插入图片描述

当导航条在最顶部时此导航部分为透明，并且不显示朋友圈文字，当用户向下混动一定距离时，导航部分为灰色背景色显示文字，并且相机颜色为黑色，点击相机图标跳转到发布动态页面

2.1.1.1导航栏的变色实现

检测当滚动条的滚动具体大于100时为导航栏元素添加一个类名小于时取消类名
使用交集选择器判断元素具备两个类名时才添加背景颜色隐藏文字切换相机图片

2.1.1.2点击相机发表动态

判断用户是否登录上面当用户登录成功后会将用户的信息存入公共可访问的store 中，所有可以在store数据中查询用户是否登录
如果未登录跳转到login登录页面（见主题1）
若登录后跳转动态发表页面（见主题3）

2.1.2 背景图的切换

点击背景图像运用weui.actionSheet会弹出一选择框

在这里插入图片描述

点击取消后选框消失
点击从相册选择会通过ref属性用代码进行对uploader中的单击事件的触发
我们将weui-uploader这模块隐藏不显示
但uploader被单击时会执行像主题3.3中的步骤进行图片的上传

onSuccess: function (ret) {

// 更换用户的背景图像

self.submit(ret)

}

上传成功后我们会触发submit函数并且将ret图片的信息作为参数进行传递

async submit (obj) {

// 更新数据库中的背景图像

const res = await service.post(‘users/update’, {

userId: this.$store.state.currentUser._id,

bgurl: obj.data.url

})

// 更新本地中的北背景图像

if (res.data.code === 0) {

this.$store.dispatch(‘setUser’, {

…this.$store.state.currentUser,

bgurl: obj.data.url

})

}

通过调用接口更新用户的背景图成功后我们将调用store中的方法改变本地的背景图
在调用store中的方法时我们传过去的参数中是运用对象的深拷贝（…）

2.1.3 点击头像进入用户中心

判断用户如果没有登录跳转到login登录页面如果已经登录跳转到个人中心页面
个人中心功能见主题4

2.2 下半部分

在这里插入图片描述

动态列表
点赞评论
头像点击查看对方信息
图片的查看

2.2.1 动态列表

显示的头像信息昵称
显示帖子的内容（如果文字较多设置只显示三行超出隐藏）

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;

显示动态中携带的图片（一张图片按照图片的最长边进行成比例缩放，，多张图片按照固定宽高设置）

<img v-for=“imgInfo in data.picList”

:key=“imgInfo.id”

:preview=“data._id”

:src=“imgInfo.url”

class=“img-warp”>

<img

:src=“data.picList[0].url”

class=“img-warp-one”

:preview=“data._id”

:style=“initImgSize(data.picList[0])”>

帖子的发表时间，通过moment来进行时间格式化

2.2.2 点赞评论

点赞
用户点击 - - 的时候出现点赞评论的标识
当该用户已经点过赞时，显示取消点赞，用户未点赞时，显示点赞
点赞宇取消点赞都是用过点击时判断点赞还是取消来请求后端的不同接口进行修改
成功后也要修改store中的本地数据
评论
获取当前手指的坐标并触发bus中的showInput事件

addComment (e) {

// 获取当前点击的坐标

this.data.pageY = e.pageY

this.data.clientY = e.clientY

this. $b u s .$ emit(‘showInput’, this.data)

}

当用户触发showInput事件后显示文本框
通过os进行检测用户的手机系统评论的文本框也是不同的

this. $b u s .$ on(‘showInput’, (currentData) => {

if (this.$refs.inputBar) {

// 显示输入框

this.showInput = true

// 调用输入框组件的focusInput事件，以弹起键盘

this.$refs.inputBar.focusInput(currentData)

// this.$refs.inputWrap.style.top = currentData.pageY + ‘px’

// 调整页面的位置

if (os.isIOS) {

this.$refs.inputWrap.style.top = currentData.pageY + ‘px’

// 计算页面的滚动距离

setTimeout(() => {

const y = currentData.pageY - window.keyboradHeight

window.scroll(0, y)

}, 300)

}

})

调用输入框组件的focusInput事件，以弹起键盘
调整页面的位置
计算页面的滚动距离

2.2.3 点击图片查看大图

在这里插入图片描述

通过使用preview来实现图片的查看
preview作为元素的动态属性值为每组图片公共值这里使用发表用户的_id
可以左右滑动进行切换图片

2.2.4 点击头像查看作者信息

点击自己的头像则会跳转到主题4
点击其他作者的头像则会跳转到用户信息（传递用户id在路径中）

在这里插入图片描述

通过传递过来的id进行查寻用户信息在此进行展示
点击发消息跳转到聊天页面（传递参数用户id用户昵称到路径中）主题5

2.3 上划加载更多

2.4 下拉更新

3. 发表动态页面

在这里插入图片描述

3.1 第一部分（取消发表按钮）

3.1.1 取消按钮————回到上一页面

3.1.2 发布按钮

验证文字是否为空
文字的数量是否合法
请求接口进行发布
成功后会跳转到主页（见主题2）

3.2 第二部分（文本区域）

3.2.1 用户输入的文字数量

将展示用户输入文字数量使用动态数据，通过input事件实时得到文字数量不断改变变量的值

3.2.2 限定用户输入的文字数量为100

采用weui中的form文本域
通过双向绑定的元素得知用户输入的文字数量，当用户输入的文字数量超过100时，获取文字的内容通过substr属性取前一百个文字复制给双向绑定的文字内容的变量造成超出100字不能输入的现象。

3.3 第三部分（上传图片）

3.3.1 采用weui中的uploader技术进行图片的上传

在weui中的this指向并不是Vue实例所以在第一行中加入const self=this 让self常量指向我们的Vue实例

const self = this

weui.uploader(‘#uploader’, {

url: service.baseURL + ‘/post/uploadimg’,

auto: true,

type: ‘file’,

fileVal: ‘image’,

compress: {

width: 1600,

height: 1600,

quality: 0.8

onBeforeQueued: function (files) {

// this 是轮询到的文件, files 是所有文件

if ([‘image/jpg’, ‘image/jpeg’, ‘image/png’, ‘image/gif’].indexOf(this.type) < 0) {

weui.alert(‘请上传符合条件的图片’)

return false // 阻止文件添加

}

if (this.size > 10 * 1024 * 1024) {

weui.alert(‘请上传不超过10M的图片’)

return false

}

// 控制多元每次不能超过五张

if (files.length > self.totalUploadCount) {

weui.alert(‘最多只能上传’ + self.totalUploadCount + ‘张图片，请重新选择’)

return false

}

// 如果已经上传五张图片作为不能继续上传

if (self.uploadCount + 1 > self.totalUploadCount) {

weui.alert(‘最多只能上传’ + self.totalUploadCount + ‘张图片’)

return false

}

self.uploadCount++

// return true; // 阻止默认行为，不插入预览图的框架

onBeforeSend: function (data, headers) {

const token = document.cookie.split(‘=’)[1]

headers[‘wec-access-token’] = token

onProgress: function (procent) {

// console.log(this, procent)

// return true; // 阻止默认行为，不使用默认的进度显示

onSuccess: function (ret) {

ret.data.id = this.id

self.picList.push(ret.data)

onError: function (err) {

console.log(‘error:’ + err)

// return true; // 阻止默认行为，不使用默认的失败态

}

})

onBeforeQueued

选择要上传的图片时触发（验证图片是否符合要求）

验证图片的格式
验证图片的大小不能超过10M
控制每次选择图片不能超过五张
控制如果已经选择五中图片不能继续上传
onBeforeSend

图片上传前触发

我们将用户登录成功后存入Local Storage中的cuser（token）放到请求头headers中
onSuccess

图片上传成功后触发

将图片的id存到 ret.data中
将图片的所有信息添加到picList数组中

3.3.2 查看图片

在这里插入图片描述

点击小图片时可以展现大图点击图片时会通过e.target拿到事件源
通过getAttribute（‘style’）方法获取style中属性background-image: url(“blob:http://192.168.0.107:8080/c1e0e8bf-4ac6-4184-a839-0cdcce473aa4”);
通过“ " ”进行分割得到第二个元素也就是路径
将得到的路径复制给weui.gallery 他具有两个参数，一个是图片的路径，一个是删除图片我们在第二个参数中调用删除图片的函数并且将图片的信息以及查看大图的 div作为参数传递过去（见主题3.3.3）（self指向的是this Vue的实例）

preImg (e) {

const self = this

const url = e.target.getAttribute(‘style’).split(‘"’)[1]

var gallery = weui.gallery(url, {

onDelete: function () {

self.deleteImg(e.target, gallery)

}

})

}