麒麟子Cocos Creator實用技巧一：如何正確地顯示微信頭像
摘要：
不管是遊戲App，還是H5，又或者是微信小遊戲。但凡接入了微信登入的應用，都可能需要顯示微信頭像。
在Cocos Creator中，我們常見的顯示方法像下面這樣
var headimg = 'http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOg...
不管是遊戲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 {
listen80;
#server_nameh5.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也是可以正常顯示的。
以上就是麒麟子在做專案的時候，解決微信頭像，以及一些第三方伺服器圖片的最終方案。 希望能夠幫助到大家。