???? 一款高仿mac版微信的单页面应用(不断更新...)
2020/3/12 11:01:32
本文主要是介绍???? 一款高仿mac版微信的单页面应用(不断更新...),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
概述
👍👍 利用Vue2.0模仿微信app,努力做到以假乱真的效果。个人独立开发,本项目可以为初学者带来很好的入门经验,有兴趣的同学可以clone 下来自己完成。。项目目前进度==30%==,后期不断更新,直至整个项目完成。努力和mac微信能够达到 90%的相似度,让它更接近微信App的用户交互体验。
仿 mac 版 微信 复制代码
图片预览
项目步骤
npm install npm run serve npm run build npm run lint 复制代码
项目地址
预览地址
项目进度
个人信息
- 用户头像资料展示
聊天列表
- 主体页面
- 聊天列表
- 聊天对话框
- 聊天资料
- 发送图片
- 群聊天
- 公众号对话框
- 切换用户聊天
- 表情选择
- 列表右击操作
- 删除添加操作
通讯录列表
- 通讯列表
- 通讯录跳转聊天列表
- 列表详情
收藏列表
- 收藏列表
- 列表详情
文件列表
- 文件列表
- 列表详情
部分代码
<div class="messageList" :class="classList[list.megType]" v-for="(list, index) in messageList" :key="index"> <span v-if="list.megType === 2">{{list.megTime}}</span> <img :src="list.avator" alt="" v-if="list.megType === 1" class="userAvator" /> <pre class="messageText" v-if="list.megType !== 2 && list.textType === 0"> {{list.megText}} <img v-if="list.megType !== 2 && list.textType === 1" :src="list.megText" alt=""> </pre> <img :src="list.avator" alt="" v-if="list.megType === 0" class="userAvator" /> </div> 复制代码
sendMes() { if(this.onInputValue !== '') { const onMesList = { avator: 'https://web.lieme.cn/stack/72.jpg', megType: 0, // 0 自己 1 对方 2 时间 megText: this.onInputValue, megTime: dateUtil.formatDate(), textType: 0, // 0 文字 1 图片 } this.messageList.push(onMesList) } this.onInputValue = '' this.scollDiv() }, 复制代码
前端公众号和交流群
这篇关于???? 一款高仿mac版微信的单页面应用(不断更新...)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04el-table 开启定时器下,表格的选中状态会消失是什么原因-icode9专业技术文章分享
- 2024-10-03如何安装和初始化飞牛私有云 fnOS?-icode9专业技术文章分享
- 2024-10-03如何安装 App 并连接到飞牛 NAS?-icode9专业技术文章分享
- 2024-10-03如何安装飞牛 TV 并连接到影视服务器?-icode9专业技术文章分享
- 2024-10-03如何在PVE和ESXI上安装飞牛私有云 fnOS?-icode9专业技术文章分享
- 2024-10-03fnOS国产最强NAS安装系统异常情况处理-icode9专业技术文章分享
- 2024-10-03飞牛NAS如何创建存储空间?-icode9专业技术文章分享
- 2024-10-03fnOS国产最强NAS硬盘会自动休眠吗?-icode9专业技术文章分享
- 2024-10-03fnOS国产最强NAS如何安装飞牛影视和创建媒体库?-icode9专业技术文章分享
- 2024-10-03fnOS国产最强NAS如何为家人朋友开通影视账号?-icode9专业技术文章分享