用vue全家桶实现mac版微信(不断更新中...)
概述
👍👍 利用Vue2.0模仿微信app，努力做到以假乱真的效果。个人独立开发，本项目可以为初学者带来很好的入门经验，有兴趣的同学可以clone 下来自己完成。。项目目前进度==30%==，后期不断更新，直至整个项目完成。努力和mac微信能够达到 90%的相似度，让它更接近微信App的用户交互体验。
仿 mac 版 微信
图片预览
项目步骤
npm install
npm run serve
npm run build
npm run lint
项目地址
🥺🥺源码后台回复【微信mac】
预览地址
🥺🥺阅读原文查看，PC效果更佳
项目进度
个人信息
- [x] 用户头像资料展示
聊天列表
- [x] 主体页面
- [x] 聊天列表
- [x] 聊天对话框
- [x] 聊天资料
- [x] 发送图片
- [ ] 群聊天
- [ ] 公众号对话框
- [ ] 切换用户聊天
- [ ] 表情选择
- [ ] 列表右击操作
- [ ] 删除添加操作
通讯录列表
- [ ] 通讯列表
- [ ] 通讯录跳转聊天列表
- [ ] 列表详情
收藏列表
- [ ] 收藏列表
- [ ] 列表详情
文件列表
- [ ] 文件列表
- [ ] 列表详情
部分代码
<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()
},
点击https://web.lieme.cn/vueWechatDesktop/dist/index.html#/查看demo！
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-03-12，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录