卖坚果的怪叔叔 卖坚果的怪叔叔
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 关于
首页 › 技术 › 一款高仿mac版微信的单页面应用(还在更新中)

一款高仿mac版微信的单页面应用(还在更新中)

坚果大叔
2020-03-13 16:50:03技术阅读 331

一款高仿mac版微信的单页面应用(还在更新中)-卖坚果的怪叔叔

概述

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

仿 mac 版 微信

图片预览

一款高仿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版微信的单页面应用(还在更新中)-卖坚果的怪叔叔

vue 微信
赞赏 赞(0)
本文系作者 @坚果大叔 原创发布在 卖坚果的怪叔叔。未经许可,禁止转载。
Python爬取微信好友昵称和头像
上一篇
周末出行~
下一篇
今日天气
摸鱼日历
摸鱼人日历
近期文章
  • 二维数组数据动态组合
  • Vite自动全局注册组件!
  • element-ui 控制台 『 Prop being mutated: "placement" 』的报错~
  • 猫🐱
  • Input 空格问题
归档
  • 2022年7月
  • 2022年6月
  • 2022年5月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年7月
  • 2021年5月
  • 2021年4月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年6月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年12月
  • 2019年11月
  • 2019年10月
  • 2019年9月
  • 2019年8月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年3月
  • 2018年2月
  • 2017年12月
  • 2017年11月
  • 2017年9月
二维数组数据动态组合
2022-07-28 10:50:47
144 0 0
Vite自动全局注册组件!
2022-07-07 14:05:48
226 1 2
element-ui 控制台 『 Prop being mutated: "placement" 』的报错~
2022-06-28 19:41:29
1,678 0 0
Input 空格问题
2022-06-22 10:52:44
243 0 1
  • 0
博主

一枚佛系前端开发,会一丢丢摄影,喜欢折腾,爱好美食。分享点前端技巧、笔记以及各种有趣的APP和资源教程♥♥

友链
Lieme
公众号
西豆 崔欣 执行上下文 卖坚果的怪叔叔 集赞助手
Copyright © 2017-2022 卖坚果的怪叔叔. Designed by nicetheme.

苏ICP备18048410号-2
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 关于
坚果大叔
201
文章
48
评论
121
喜欢