Mac
概述
利用 vue2.0 模仿微信 App, 努力做到以假乱真的效果. 个人独立开发, 本项目可以为初学者带来很好的入门经验, 有兴趣的同学可以 clone 下来自己完成.. 项目目前进度 ==30%==, 后期不断更新, 直至整个项目完成. 努力和 Mac 微信能够达到 90% 的相似度, 让它更接近微信 App 的用户交互体验.
仿 Mac 版 微信
图片预览
WX202003112216382x.PNG
项目步骤
- 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()
- },
前端公众号和交流群
gg.gif
来源: http://www.jianshu.com/p/9462f958e435