vue ＋ 微信獲取用戶信息

vue ＋ 微信獲取用戶信息

本次項目作到一個點贊功能，即分享出去一個頁面給微信好友，微信好友點開並點贊，須要將點贊用戶的微信暱稱，微信頭像以及微信openid，微信unionid（這個須要關注公衆號纔會有該字段）傳給後端，記錄點贊人的相關信息

微信網頁受權

1. 微信公衆號網頁受權配置，詳見官網
2. 關於網頁受權的兩種scope的區別說明 （詳細見官網）
   －scope=snsapi_base 獲取微信用戶openid,獲取後直接跳轉業務頁面，不須要用戶操做
   －scope=snsapi_userinfo 獲取微信用戶詳細信息（暱稱，頭像等），須要用戶手動點擊受權，當點擊容許時，會跳轉業務頁面（相似於關閉彈窗），點擊拒絕時會推出頁面，受權如圖：
   
3. ⚠️用戶管理類接口中的「獲取用戶基本信息接口」，是在用戶和公衆號產生消息交互或關注後事件推送後，才能根據用戶OpenID來獲取用戶基本信息。這個接口，包括其餘微信接口，都是須要該用戶（即openid）關注了公衆號後，才能調用成功的。

4. 分享頁面的實際連接：
   ⚠️ 當前頁面的連接須要 encodeURIComponent( url ) 編碼

   https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
   // APPID: 公衆號的appid
   // REDIRECT_URI：當前頁面的連接，須要編碼
   // scope： snsapi_base / snsapi_userinfo
   // 其餘值均不用改動

5. 點擊容許後跳轉的連接是 REDIRECT_URI + code=CODE&state=STATE。
   ⚠️ 此處的code能夠用來調取接口獲取微信用戶的相關信息
   ⚠️ 每次用戶受權帶上的code將不同，code只能使用一次，5分鐘未被使用自動過時。
   －官方說法code只能被使用一次，在H5頁面中，若是有跳轉的狀況，再返回當前頁面，微信會判斷是否已經受權，若是受權過，則code返回的仍是上一次的code，而你若是用code調取用戶信息（code已失效）會報 invalid code, hints: [ req_id: GGJbIz4ce-oGYwya ]，因此在第一次獲取用戶信息的時候就能夠將該用戶信息存儲在本地
6. 須要獲取用戶信息，且二次分享的問題
   雖然當前頁面沒有問題，可是當前微信用戶使用微信進行二次分享，則微信會分享當前頁面的連接（不包含https://open.weixin.qq.com...），新用戶點擊則不會進行受權，可是微信的二次分享會在當前連接加上 &from＝ ，能夠在vue created的生命週期裏進行參數獲取並判斷，若是有from參數，則跳轉 https://open.weixin.qq.com/co... 連接，讓用戶受權
   ⚠️ 二次分享樣式顯示問題能夠查看個人另外一篇文章 vue ＋ 微信二次分享／自定義分享

---

代碼以下

// created 週期
if(this.$route.query.from) {  // 判斷連接中是否有from參數，下面的studentId，activityId項目須要
  let _nowUrl = window.location.href.split('?')[0] + `?resource=1&studentId=${this.$route.query.studentId}&activityId=${this.$route.query.activityId}`
  let _shareUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURIComponent(_nowUrl)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
  window.location.href = _shareUrl
  return
}

// 處理微信用戶信息
  handleWechatMsg(code) {
    // 調取 獲取微信用戶信息的接口（後端參考微信官方文檔進行封裝）   code－－參數
    api.getWechatInfo(code).then((res)=>{
      if(res.data.code == 200) {
        // 返回的是json字符串
        let _data = res.data.content
        let _personMsg = JSON.parse(_data)
        this.wechatMsg = _personMsg
        // 本地存儲微信用戶信息，防止頁面被刷新，code失效
        window.localStorage.setItem('wechatMesssage', _data)
      } else if (res.data.code == 400) {  //  400-code失效，400是後端返回，具體看後端返回哪一個碼
        let msgs = window.localStorage.getItem('wechatMesssage')
        this.wechatMsg = JSON.parse(msgs)       
      } else {
        this.$Message.message(res.data.message);
      }

    })
  },

• 若是須要獲取微信unionid,則須要引導用戶關注公衆號，能夠在返回的用戶信息中判斷是否含有unionid，若是沒有，能夠展現微信公衆號的二維碼，供用戶識別關注

⚠️－－－－－－－－－－－－－－－－－－－－

1. 當前頁面的域名，須要在公衆號後臺配置添加（詳見官網）
2. 若是頁面存在＃，可能會出問題，可使用nginx進行配置