Web版微信登录
github地址:https://github.com/hty7/vue-wechat
如有不足与错误,请见谅
Web版微信主要参考Web微信协议进行设计开发
项目主要分成三大模块
登录模块:微信扫码登录流程
微信容器:微信信息、会话接收发送、心跳监测
数据存储:用户登录信息、状态信息、会话信息
先祭图拜八哥已求无bug
效果图
我们希望实现的功能包括基本的登录、聊天群发功能(文本/表情/图片/文件/公众号链接)、公众号阅读、聊天记录导出保存、用户画像、聊天机器人
前期工作准备
DEMO主要采用web微信接口进行开发,因此在实际开发中必须调用微信接口(https://cn.vuejs.org/v2/guide/custom-directive.html)
问题:
- 接口跨域问题(本地开发跨域、cookie)
- 状态检测问题(心跳检测,微信会话活动中必须保持心跳接口的正常联接)
- 接口前缀问题(微信常用有wx及wx2两个版本)
- 数据存储问题(用户通讯录的用户UserName会随着每次登录而改变,因此必须通过特殊方法处理数据一致性及连贯性)
在前期我们需要解决(1)(2)两个问题
由于项目里使用vue+axios+webpack
本地开发,请求如下
// 获取微信唯一uid
export const getUUID = params => {
return axios.get('/login/jslogin', {params: params})
}
开发阶段使用***http-proxy-middleware***
解决跨域问题
'/login': {
target: 'https://login.wx.qq.com', // 重定向路径
secure: false, // htts转http证书验证问题
changeOrigin: true,
headers: { // 设置报头
Referer: 'https://login.wx.qq.com'
},
pathRewrite: { // 路径重写
'^/login': '/'