mac

????一款高仿mac版微信的单页面应用

概述

???? 利用Vue2.0模仿微信app，努力做到以假乱真的效果。个人独立开发，本项目可以为初学者带来很好的入门经验，有兴趣的同学可以clone 下来自己完成。。项目目前进度==30%==，后期不断升级，直至整个项目完成。努力和mac微信能够达到 90%的类似度，让它更接近微信App的客户交互体验。

仿 mac 版 微信

图片预览

WX202003112216382x.png

项目步骤

npm installnpm run servenpm run buildnpm 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()},

前台公众号和交流群

gg.gif