麒麟子Cocos Creator實用技巧一：如何正确地顯示微信頭像

最近（今天日期 2019-04-22）新出了一個奇怪的事情，就是Android系統7.0+的機器，在4G網下無法正常顯示微信頭像。 包括騰訊的歡樂鬥地主裡的排行榜也顯示不出來。

這個問題我猜測，是4G的Android 7.0+的HTTP頭和其他環境下不一樣，導緻騰訊拒絕了頭像通路。 應該是封殺某音的時候，誤傷。

解決這個問題最直接的辦法，就是在自己的伺服器上，配置一條NGINX轉發協定。

不管是遊戲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);
});      

這樣做大部分情況下是沒有問題的。但容易踩到兩個坑

1. 假如使用者在微信中上傳的頭像不是jpg格式，将會顯示為黑屏
2. 假如是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也是可以正常顯示的。

以上就是麒麟子在做項目的時候，解決微信頭像，以及一些第三方伺服器圖檔的最終方案。 希望能夠幫助到大家。

作者：麒麟子

出處：http://www.cnblogs.com/qilinzi/

蠻牛專欄：麒麟子

簡介：麒麟子，程式設計15年，科技創始人，技術作家。

09年進入遊戲行業，16年創立成都幼麟科技有限公司。十年從業經驗練就了遊戲全棧技能，目前專注于手機遊戲領域。

版權聲明：本文版權歸作者和部落格園共有，歡迎轉載。轉載必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，否則保留追究法律責任的權利。