不管是游戲App，還是H5，又或者是微信小游戲。但凡接入了微信登錄的應用，都可能需要顯示微信頭像。
在Cocos Creator中，我們常見的顯示方法像下面這樣
var headimg = 'http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83erD6MOUwRKV9NyBAqnoFDTnltzAe2zWOkKxyDOFibVBb1ZV5CaATJwYAuNqZ5sXMBC4c8iacaHDf8RA/132';
cc.loader.load({url:headimg,type:'jpg'},function(err,tex){ self.icon.spriteFrame = new cc.SpriteFrame(tex); });
這樣做大部分情況下是沒有問題的。但容易踩到兩個坑
- 假如用戶在微信中上傳的頭像不是jpg格式，將會顯示為黑屏
- 假如是H5中使用上述代碼，會提示跨域訪問
而最近（今天日期 2019-04-22）新出了一個奇怪的事情，就是Android系統7.0+的機器，在4G網下無法正常顯示微信頭像。 包括騰訊的歡樂斗地主里的排行榜也顯示不出來。
這個問題我猜測，是4G的Android 7.0+的HTTP頭和其他環境下不一樣，導致騰訊拒絕了頭像訪問。 應該是封殺某音的時候，誤傷。
解決這個問題最直接的辦法，就是在自己的服務器上，配置一條NGINX轉發協議。
server {
listen 80; #server_name h5.ooxx.cn; root /root/wwwroot/; location /image { proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass $arg_url; } }
假如，我們的外網IP或者域名是 h5.ooxx.cn, 端口是80，或者其他的。 我們修改上面的訪問方式為如下
var headimg = 'http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83erD6MOUwRKV9NyBAqnoFDTnltzAe2zWOkKxyDOFibVBb1ZV5CaATJwYAuNqZ5sXMBC4c8iacaHDf8RA/132';
var url = 'http://h5.ooxx.cn:port/image?url=' + headimg + '&sb=213.jpg'; cc.loader.load(url,function(err,tex){ self.icon.spriteFrame = new cc.SpriteFrame(tex); });
這樣改的原因如下
1、假如你做的是H5項目，h5.ooxx.cn域名剛好就是你的頁面加載域名，那么你將處於同域中，不再有跨域問題
2、當我們請求最后合成的url時，NGINX會將url參數作為請求地址，轉發出去，並且將獲取到的信息，原路返回。 而我們添加的proxy_redirect off; 將會抹去我們系統機型為我們添加的各種HTTP HEADER。 不會再出現Android 7.0+ 4G網加載不了的問題。
3、添加 &sb=213.jpg參數，是為了讓cc.loader.load函數識別到這是一個圖片加載。 但由於不是強制的填寫type，即使PNG也是可以正常顯示的。
以上就是麒麟子在做項目的時候，解決微信頭像，以及一些第三方服務器圖片的最終方案。 希望能夠幫助到大家。