成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue ＋ 微信獲取用戶信息

luoyibu / 2739人閱讀

摘要：分享頁面的實(shí)際鏈接當(dāng)前頁面的鏈接需要編碼公眾號的當(dāng)前頁面的鏈接，需要編碼其他值均不用改動點(diǎn)擊允許后跳轉(zhuǎn)的鏈接是。此處的可以用來調(diào)取接口獲取微信用戶的相關(guān)信息每次用戶授權(quán)帶上的將不一樣，只能使用一次，分鐘未被使用自動過期。

vue ＋ 微信獲取用戶信息

本次項目做到一個點(diǎn)贊功能，即分享出去一個頁面給微信好友，微信好友點(diǎn)開并點(diǎn)贊，需要將點(diǎn)贊用戶的微信昵稱，微信頭像以及微信openid，微信unionid（這個需要關(guān)注公眾號才會有該字段）傳給后端，記錄點(diǎn)贊人的相關(guān)信息

微信網(wǎng)頁授權(quán)

微信公眾號網(wǎng)頁授權(quán)配置，詳見官網(wǎng)

關(guān)于網(wǎng)頁授權(quán)的兩種scope的區(qū)別說明 （詳細(xì)見官網(wǎng)）
－scope=snsapi_base 獲取微信用戶openid,獲取后直接跳轉(zhuǎn)業(yè)務(wù)頁面，不需要用戶操作
－scope=snsapi_userinfo 獲取微信用戶詳細(xì)信息（昵稱，頭像等），需要用戶手動點(diǎn)擊授權(quán)，當(dāng)點(diǎn)擊允許時，會跳轉(zhuǎn)業(yè)務(wù)頁面（類似于關(guān)閉彈窗），點(diǎn)擊拒絕時會推出頁面，授權(quán)如圖：

??用戶管理類接口中的“獲取用戶基本信息接口”，是在用戶和公眾號產(chǎn)生消息交互或關(guān)注后事件推送后，才能根據(jù)用戶OpenID來獲取用戶基本信息。這個接口，包括其他微信接口，都是需要該用戶（即openid）關(guān)注了公眾號后，才能調(diào)用成功的。

分享頁面的實(shí)際鏈接：
?? 當(dāng)前頁面的鏈接需要 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：當(dāng)前頁面的鏈接，需要編碼
// scope： snsapi_base / snsapi_userinfo
// 其他值均不用改動

點(diǎn)擊允許后跳轉(zhuǎn)的鏈接是 REDIRECT_URI + code=CODE&state=STATE。
?? 此處的code可以用來調(diào)取接口獲取微信用戶的相關(guān)信息
?? 每次用戶授權(quán)帶上的code將不一樣，code只能使用一次，5分鐘未被使用自動過期。
－官方說法code只能被使用一次，在H5頁面中，如果有跳轉(zhuǎn)的情況，再返回當(dāng)前頁面，微信會判斷是否已經(jīng)授權(quán)，如果授權(quán)過，則code返回的還是上一次的code，而你如果用code調(diào)取用戶信息（code已失效）會報 invalid code, hints: [ req_id: GGJbIz4ce-oGYwya ]，所以在第一次獲取用戶信息的時候就可以將該用戶信息存儲在本地

需要獲取用戶信息，且二次分享的問題
雖然當(dāng)前頁面沒有問題，但是當(dāng)前微信用戶使用微信進(jìn)行二次分享，則微信會分享當(dāng)前頁面的鏈接（不包含https://open.weixin.qq.com...），新用戶點(diǎn)擊則不會進(jìn)行授權(quán)，但是微信的二次分享會在當(dāng)前鏈接加上 &from＝ ，可以在vue created的生命周期里進(jìn)行參數(shù)獲取并判斷，如果有from參數(shù)，則跳轉(zhuǎn) https://open.weixin.qq.com/co... 鏈接，讓用戶授權(quán)
?? 二次分享樣式顯示問題可以查看我的另一篇文章 vue ＋ 微信二次分享／自定義分享

代碼如下

// created 周期
if(this.$route.query.from) {  // 判斷鏈接中是否有from參數(shù)，下面的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) {
    // 調(diào)取 獲取微信用戶信息的接口（后端參考微信官方文檔進(jìn)行封裝）   code－－參數(shù)
    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,則需要引導(dǎo)用戶關(guān)注公眾號，可以在返回的用戶信息中判斷是否含有unionid，如果沒有，可以展示微信公眾號的二維碼，供用戶識別關(guān)注

??－－－－－－－－－－－－－－－－－－－－

當(dāng)前頁面的域名，需要在公眾號后臺配置添加（詳見官網(wǎng)）

如果頁面存在＃，可能會出問題，可以使用nginx進(jìn)行配置

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102746.html

相關(guān)文章

  • vue ＋ 微信獲取用戶信息

    摘要：分享頁面的實(shí)際鏈接當(dāng)前頁面的鏈接需要編碼公眾號的當(dāng)前頁面的鏈接，需要編碼其他值均不用改動點(diǎn)擊允許后跳轉(zhuǎn)的鏈接是。此處的可以用來調(diào)取接口獲取微信用戶的相關(guān)信息每次用戶授權(quán)帶上的將不一樣，只能使用一次，分鐘未被使用自動過期。 vue ＋ 微信獲取用戶信息 本次項目做到一個點(diǎn)贊功能，即分享出去一個頁面給微信好友，微信好友點(diǎn)開并點(diǎn)贊，需要將點(diǎn)贊用戶的微信昵稱，微信頭像以及微信openid，微信...

    Corwien 評論0 收藏0

  • vue微信網(wǎng)頁授權(quán)最終解決方案

    摘要：微信網(wǎng)頁授權(quán)，基于適配方案，開發(fā)的微信授權(quán)方案。項目地址又又又一次來寫微信網(wǎng)頁授權(quán)，一年前寫過的微信授權(quán)解決方案。 vue微信網(wǎng)頁授權(quán)，基于vue-cli3.0+webpack 4+vant ui + sass+ rem適配方案+axios，開發(fā)的微信授權(quán)方案。項目地址：vue-wechat-auth 又又又一次來寫微信網(wǎng)頁授權(quán)，一年前寫過的 [vue 微信授權(quán)解決方案]。 參考了[v...

    wawor4827 評論0 收藏0

  • vue 項目如何引入微信sdk，使用微信接口

    摘要：接口注入權(quán)限接入微信接口的最主要也是最重要一步步就是填寫下面這些信息，填完這些信息之后，基本就好了。 寫在前面： 做微信的網(wǎng)頁基本上都要接入微信的sdk，我在做的時候，也頗費(fèi)了一番功夫，然后就想記錄一下，供自己日后翻閱，以及讓有需要的朋友可以做一下參考，如果喜歡的可以點(diǎn)波贊，或者關(guān)注一下，希望可以幫到大家。 本文首發(fā)于我的個人blog：obkoro1.com 安裝sdk np...

    fish 評論0 收藏0

  • vue ＋ 微信二次分享／自定義分享

    摘要：但是在本次開發(fā)中，我只使用了，，個別微信版本分享出來的還是沒有圖片和文案，的是沒有問題，所以又加上了棄用的，之后，安卓機(jī)也可以正常分享。 微信二次分享／自定義分享 從App中使用App分享（一次分享） showImg(https://segmentfault.com/img/bVbp83T?w=593&h=278); 使用微信導(dǎo)航欄的分享（二次分享） －－已做處理 showImg(...

    diabloneo 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<