zhaohaodang / vue-wechat

:fire: 基于Vue2.0高仿微信App的单页应用

基于 Vue.js2.0 高仿微信 App 的单页应用

概述

本项目是使用 Vue.js2.0 框架，搭配样式库WeUI，模仿微信 app 的样式和交互。

项目地址 https://github.com/zhaohaodang/vue-WeChat

扫码体验

如果你觉得不错想给作者点个赞，可以给项目增加一个 Star ★，项目会被收录在 Your stars 中，方便日后查看。

如果你想时时关注项目动态，可 Watch ⊙ 此项目，github 平台会及时通知你项目的动态。

启动项目

1.克隆代码到本地

git clone https://github.com/zhaohaodang/vue-WeChat.git

2.进入项目路径

cd vue-WeChat

3.安装依赖（安装较慢的话建议使用淘宝镜像）

npm install

4.启动项目

npm run dev

动图预览

微信列表的滑动交互

搜素组件的动画效果

进入对话框

对话框信息

首页 Tab 切换

技术相关

• vue-WeChat Wiki 中记录了开发此项目需要的知识储备、开发思路、开发利器等。
• 每个主要的.vue 和.js 文件都有详细的注释提示，建议将仓库 clone 到本地，查看源码。

问题反馈

移步Issues，欢迎提出问题和建议。

推荐

• vue-see 适用于 Vue.2x 的图片预览插件

vue-wechat's Issues

消息列表组件

你好，大神，我想问下mes-item页面中的props:['item']中的item里面的数据在哪里？

请问一下，这个我可以在uniapp 项目中作为一个组件使用吗？

请问一下，我做的是一个uniapp的项目，需要兼容小程序，ios, 以及安卓，现在需要一个即时通讯的功能，但是现在uniapp 没有一个好一点的即时通讯组件，我能否将您这个项目放在uniapp作为一个组件使用呢？可以的话能提供一下方法吗？

build 报错文件路径不对

build 无非正常显示

修改index.js -> assetsPublicPath: './',

但是还是有部分文件无法加载导致icon无法显示

不懂

看了一下你的源码，一脸懵逼，在我编辑器上都出错了，求指教
[email protected]

想问你一下，那个vux用localhost可以访问，但是ios10.3微信端就是不行，知道怎么解决吗？

自已发的信息与对方发的信息都在同一侧面

聊天页面，自已发的信息与对方发的信息都在同一侧面，不符合聊天情形。

我也有一个问题

老铁功能呢

好像缺个登陆页。哈哈

如题

关于本地运行的问题

代码clone后在本地运行的时候，点击底部的导航，点击第二遍的时候页面的数据会不存在了 ，也没有报错，不知道什么原因，运行命令： npm run dev

建议改成vue-cli3.0

app.js2M加载慢有解决方法？

app.js2M加载慢有解决方法？我这每次打开或者 返回需要14s，有什么办法优化么？，项目做得真心赞

底部Tab路由切换并且返回

底部切换Tab后点击返回，能做成直接退出么，而不是返回上个tab

index.html引入js文件作用

楼主你好,小白问你引入的qrcode.js是干什么的,在业务中需要操作吗

我想问楼主的是直接把生成的文件放到虚拟机里面就行了么，虚拟机不支持node啊，怎么直接启动的

项目跑不起来

大神，我npm run build直接就报错了，是怎么回事呢

WxHeader好像没有固定吧？

当在通讯录或者聊天导航界面下，往下拉的时候WxHeader应该也是固定在顶部的

建议

里面的第三方链接可以设置为在新窗口打开，这样就不会出现打开链接再返回时会看到重新登录的界面。

效果图的制作

楼主，你的那个展示效果的gif是怎么做的，用的那个软件

有考虑用微信小程序写一个微信聊天吗？

如题。
小程序语法和vue类似，需要注意的是 https协议 和 不超过2M。

博主我有一个疑问

就是我通过npm run build，然后再本地打开dist文件下面的index.html,会发现js和css引得路径出错，然后我将它们改为正确路径，但是还是提示
GET http://localhost:63342/static/js/3.42d1c4d5ecba6bf82e4b.js ；
Error: Loading chunk 3 failed.
at HTMLScriptElement.a (bootstrap 0cbc91a…:91)
这些错误是什么原因呢？目前就是底边栏的4个选择都出来了，就是大的页面显示不出来

底部状态栏

底部状态栏能固定在底部吗

build打包提示找不到文件

@zhaohaodang

跑起来之后，经过测试电脑端和手机端都能正常使用，但是发现不能聊天？请问怎么解决？

没有发送按钮

梳理一下大伙提出的需要改进的地方

个人开发达不到企业级那种严谨程度，或多或少存在一些错误，下面是大伙在其他平台提出的问题：

• 利用 Safari 手势返回时，上一页会重复一次过渡效果
• 聊天框的顶栏应该固定
• 返回操作还需优化
• 聊天框中，上滑发送语音，这个模拟效果需要优化

通讯录->搜索->页面向上滑，可以看到朋友列表啊

语音录入touchstart touchend 触发两次

语音录入touchstart touchend 触发两次

不支持华为P9浏览器？

项目已克隆本地，并安装运行成功，可在电脑上浏览，但在华为P9手机的浏览器里打开应用时不显示网页内容，用微信内置浏览器可正常查看。请问什么原因？如何解决？
谢谢！

路由设置方式疑惑

楼主你好,不太懂你这种路由配置,一般都是在上面把所有组件import进来,然后设置路由,你这种require([''])方式有什么特别吗还有resolve用法

这项目没有维护了吗

聊天内容无法发送也

双向聊天

还加上双向聊天，用户注册等吗？