小程序獲取用戶頭像大圖 小程序獲取用戶頭像模糊的問題 小程序自定義轉發頭像模糊 小程序自定義轉發分享大圖

  在開發小程序的時候，大家肯定有做過自定義轉發分享圖片的。我們現在做了一個名片小程序，需要做的一個功能就是，用戶在轉發分享自己的名片，在微信里顯示的小程序縮略圖，我們使用的是用戶的微信頭像，但是發現一個問題，就是縮略圖一直很模糊。轉發出去以后就跟打了馬賽克一樣。為什么會這樣？能獲取更大的圖片嗎？ 能否獲取到用戶的頭像大圖呢？

 我們來看看微信的API接口文檔是怎么說的。

 下面這個是微信官方的代碼，使用這個來獲取用戶的頭像的 

Page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  onLoad: function() {
    // 查看是否授權
    wx.getSetting({
      success: function(res){
        if (res.authSetting['scope.userInfo']) {
          // 已經授權，可以直接調用 getUserInfo 獲取頭像昵稱
          wx.getUserInfo({
            success: function(res) {
              console.log(res.userInfo)
            }
          })
        }
      }
    })
  },
  bindGetUserInfo: function(e) {
    console.log(e.detail.userInfo)
  }

獲取到了以后，頭像默認是132*132，這張圖片用來做自定義轉發分享圖片，分享出去以后圖片就明顯變模糊了。所以我們就要調整代碼了。

 

userInfo參數說明：

avatarUrl String 用戶頭像，最后一個數值代表正方形頭像大小（有0、46、64、96、132數值可選，0代表132*132正方形頭像），用戶沒有頭像時該項為空。若用戶更換頭像，原有頭像URL將失效。

   這段話要仔細看，沒仔細看，還真不知道微信官方說的是什么意思。尤其是他說0代表132*132，這套路太深了。

  由於沒找到微信的demo頭像，又為了不侵犯別人的肖像，那么就只能犧牲下自己的色相了，好吧就用我的頭像了，看到沒有，這張圖片點擊以后，圖片模糊，如果作為分享圖，分享出去一定也是模糊的。顧客一定臭罵你一頓，game over了 

  見證奇跡的時刻來了，怎么獲取用戶的大圖呢？最后這個尾數132，你直接替換為0就可以了，仔細看好了

https://wx.qlogo.cn/mmopen/vi_32/wibq8B2t2y4Hx6d60nhskKWv4Vuhk2YWou2xFQArWbuoS3tdwF1jAaicwtLjiasSLEtOsibfuE6ickevcpepgqYh1lw/132

 

如下，這個地址的最后尾數132被替換為0，就自動獲取大圖了。

https://wx.qlogo.cn/mmopen/vi_32/wibq8B2t2y4Hx6d60nhskKWv4Vuhk2YWou2xFQArWbuoS3tdwF1jAaicwtLjiasSLEtOsibfuE6ickevcpepgqYh1lw/0

 然后將這個圖片放入到下面代碼里，做小程序的自定義轉發分享縮略圖即可。

Page({
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 來自頁面內轉發按鈕
      console.log(res.target)
    }
    return {
      title: '自定義轉發標題',
      path: '/page/xinweiyun/com/user?id=888',
　　　　imageUrl:'這里輸入頭像的地址就可以了'
    }
  }
})

  注意的是，在用戶獲取授權的時候，如果不是有特殊需要，直接使用132的頭像大小是足夠的，你需要高清大圖的時候，再將132換為0即可

  好了，今天就給大家分享到這里了。我，秋峰，phper、java后端開發，目前自創業，做項目系統開發，后端加小程序前端結合，  今天就給大家分享到這里，希望對大家有所幫助。歡迎交流  大家相互學習 共同提高 我的 微信號：qiufeng2999