如何开发一个个性化的Web版微信（1)

最新推荐文章于 2024-08-08 08:29:22 发布

HTY_7

最新推荐文章于 2024-08-08 08:29:22 发布

阅读量3.5k

点赞数 1

文章标签： vue javascript wechat chat

本文链接：https://blog.csdn.net/HTY_7/article/details/82707056

版权

本文介绍了开发Web版微信的登录流程，包括获取UUID、二维码、等待扫码登录和获取登录令牌的步骤。项目基于Vue.js，面临接口跨域、状态检测等问题。通过代理和配置处理跨域，利用长轮询处理登录状态，并解析登录响应以获取关键参数。

摘要由CSDN通过智能技术生成

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': '/'