摘要：版微信登錄地址如有不足與錯(cuò)誤，請(qǐng)見(jiàn)諒版微信主要參考微信協(xié)議進(jìn)行設(shè)計(jì)開(kāi)發(fā)項(xiàng)目主要分成三大模塊登錄模塊微信掃碼登錄流程微信容器微信信息會(huì)話接收發(fā)送心跳監(jiān)測(cè)數(shù)據(jù)存儲(chǔ)用戶(hù)登錄信息狀態(tài)信息會(huì)話信息先祭圖拜八哥已求無(wú)效果圖我們希望實(shí)現(xiàn)的功能包括基本的

github地址：https://github.com/hty7/vue-w...
如有不足與錯(cuò)誤，請(qǐng)見(jiàn)諒

Web版微信主要參考Web微信協(xié)議進(jìn)行設(shè)計(jì)開(kāi)發(fā)
項(xiàng)目主要分成三大模塊
登錄模塊：微信掃碼登錄流程
微信容器：微信信息、會(huì)話接收發(fā)送、心跳監(jiān)測(cè)
數(shù)據(jù)存儲(chǔ)：用戶(hù)登錄信息、狀態(tài)信息、會(huì)話信息

*先祭圖拜八哥已求無(wú)bug*

效果圖
我們希望實(shí)現(xiàn)的功能包括基本的登錄、聊天群發(fā)功能（文本/表情/圖片/文件/公眾號(hào)鏈接）、公眾號(hào)閱讀、聊天記錄導(dǎo)出保存、用戶(hù)畫(huà)像、聊天機(jī)器人

DEMO主要采用web微信接口進(jìn)行開(kāi)發(fā)，因此在實(shí)際開(kāi)發(fā)中必須調(diào)用微信接口
問(wèn)題：
（1）接口跨域問(wèn)題（本地開(kāi)發(fā)跨域、cookie）
（2）狀態(tài)檢測(cè)問(wèn)題（心跳檢測(cè)，微信會(huì)話活動(dòng)中必須保持心跳接口的正常聯(lián)接）
（3）接口前綴問(wèn)題（微信常用有wx及wx2兩個(gè)版本）
（4）數(shù)據(jù)存儲(chǔ)問(wèn)題（用戶(hù)通訊錄的用戶(hù)UserName會(huì)隨著每次登錄而改變，因此必須通過(guò)特殊方法處理數(shù)據(jù)一致性及連貫性）

在前期我們需要解決（1）（2）兩個(gè)問(wèn)題
由于項(xiàng)目里使用vue+axios+webpack本地開(kāi)發(fā)，請(qǐng)求如下

// 獲取微信唯一uid
export const getUUID = params => {
  return axios.get("/login/jslogin", {params: params})
}

開(kāi)發(fā)階段使用http-proxy-middleware解決跨域問(wèn)題

"/login": {
    target: "https://login.wx.qq.com", // 重定向路徑
    secure: false, // htts轉(zhuǎn)http證書(shū)驗(yàn)證問(wèn)題
    changeOrigin: true,
    headers: { // 設(shè)置報(bào)頭
      Referer: "https://login.wx.qq.com"
    },
    pathRewrite: { // 路徑重寫(xiě)
      "^/login": "/"
    }
  }

通過(guò)上面代理，可以將本地localhost:8080//login/jslogin => https://login.wx.qq.com/jslogin完成跨域操作
但上面的方面還不能完全解決跨域問(wèn)題，在后面的請(qǐng)求我們可以知道心跳checkasync和通訊錄頭像等請(qǐng)求都需要使用到cookie，因此我們必須將wx.qq.com域名下返回的cookie保存的本地域名下，因此我們必須解決跨域cookie的問(wèn)題

因此我們可以通過(guò)配置proxy進(jìn)行跨域處理，通過(guò)cookieDomainRewrite重寫(xiě)domian，我們可以將不同域名下的cookie保存到我們所需域名下。同時(shí)由于默認(rèn)請(qǐng)求是不帶cookie，發(fā)起請(qǐng)求前需要配置請(qǐng)求中的withCredentials = true，使請(qǐng)求帶上cookie.

"/wx1": {
    target: "https://wx.qq.com",
    secure: false,
    changeOrigin: true,
    headers: {
      Referer: "https://wx.qq.com"
    },
    pathRewrite: {
      "^/wx1": "/"
    },
    onProxyRes: (proxyRes, req, res) => {
      let cookies = proxyRes.headers["set-cookie"]
      let cookieRegex = /Secure/i
      //修改cookie secure
      if (cookies) {
        let newCookie = cookies.map((cookie) => {
          if (cookieRegex.test(cookie)) {
            return cookie.replace(cookieRegex, "")
          }
          return cookie
        })
        //修改cookie path
        delete proxyRes.headers["set-cookie"]
        proxyRes.headers["set-cookie"] = newCookie
      }
    },
    // 重寫(xiě)cookie domian
    cookieDomainRewrite: {
      "*": "localhost"
    }
  }

如果需要在生產(chǎn)環(huán)境中需要跨域，可以參考網(wǎng)上解答
如nginx環(huán)境下可以修改nginx.conf配置

proxy_cookie_domain "wx.qq.com" $host;

問(wèn)題（2）中，我們需要注意web微信接口并非一成不變，不同賬號(hào)登錄會(huì)跳到不一樣的接口，已知的存在兩種可能性
如獲取微信登錄用戶(hù)信息/cgi-bin/mmwebwx-bin/webwxnewloginpage接口，就存在兩種前綴
https://wx.qq.com/cgi-bin/mmw...
https://wx2.qq.com/cgi-bin/mm...
因此我們必須在登錄前從login登錄接口（下面會(huì)詳細(xì)解析）獲取該微信重定向的地址

method: GET
path: /login/jslogin
參數(shù)：

appid: "wx782c26e4c19acffb", // appid (固定值)
redirect_uri: "https://wx.qq.com/cgi-bin/mmwebwx-bin/webwxnewloginpage", // 重定向路徑
fun: "new", // (固定值)
lang: "zh_CN", // 語(yǔ)言版本 (固定值)
_: new Date().getTime() // 時(shí)間戳

響應(yīng)返回值：window.QRLogin.code = 200; window.QRLogin.uuid = "AZc-ETs6NA==";
返回值為字符串，可以通過(guò)正則式得到code和uuid

res = {
    code: 200,
    uuid: "AZc-ETs6NA=="
}

https://login.weixin.qq.com/q...{uuid}

https://login.weixin.qq.com/qrcode/AZc-ETs6NA==

method: GET
path: /cgi-bin/mmwebwx-bin/login
參數(shù)：

loginicon: true,
uuid: uuid,
tip: 0,
r: ~new Date().getTime(),
_: new Date().getTime()

等待登錄掃碼是一個(gè)長(zhǎng)輪詢(xún)接口（25S左右），用戶(hù)掃碼到確定存在不同響應(yīng)狀態(tài)
（1）長(zhǎng)時(shí)間未掃碼，登錄超時(shí)

window.code=408;

（2）掃碼未確定，獲取用戶(hù)頭像

window.code=201;window.userAvatar="data:img/jpg;base64";

（3）掃碼未確定，超出限制時(shí)間，二維碼無(wú)效需重新掃碼
window.code=400;
（4）掃碼并確定

window.code=200;
window.redirect_uri="https://wx.qq.com/cgi-bin/mmwebwx-bin/webwxnewloginpage?ticket=Acej3HhQ4Mcb8CrNtZkOooln@qrticket_0&uuid=Ia-L18JF6w==&lang=zh_CN&scan=1535295440";

method: GET
path: /cgi-bin/mmwebwx-bin/webwxnewloginpage

上一步掃碼成功后redirect_uri后面加上&fun=new&version=v2
例如：https://wx.qq.com/cgi-bin/mmw...

響應(yīng)：

0

@crypt_ca4ca197_6abe45393fc8632b547d6231c537a5f5
gYCDNcRRyujtvMEF
********
6huRNbBOP9XzXc4bZiD8H%2BJIRH6spE11Vn86Fgpn6VNfW5%2BJfDcxlQ%2B%2Bt5TSb7Cb
1

返回值未XML格式，需要把skey, wxsid, wxuin, pass_ticket參數(shù)解析出來(lái)并保存，后面的請(qǐng)求參數(shù)都需要用到

同時(shí)我們也需要保存Response cookie，也就是前面提到的第一個(gè)問(wèn)題