1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 麒麟子Cocos Creator实用技巧一:如何正确地显示微信头像

麒麟子Cocos Creator实用技巧一:如何正确地显示微信头像

时间:2020-01-14 07:02:08

相关推荐

麒麟子Cocos Creator实用技巧一:如何正确地显示微信头像

不管是游戏App,还是H5,又或者是微信小游戏。但凡接入了微信登录的应用,都可能需要显示微信头像。

在Cocos Creator中,我们常见的显示方法像下面这样

var headimg = '/mmopen/vi_32/DYAIOgq83erD6MOUwRKV9NyBAqnoFDTnltzAe2zWOkKxyDOFibVBb1ZV5CaATJwYAuNqZ5sXMBC4c8iacaHDf8RA/132';cc.loader.load({url:headimg,type:'jpg'},function(err,tex){self.icon.spriteFrame = new cc.SpriteFrame(tex);});

这样做大部分情况下是没有问题的。但容易踩到两个坑

假如用户在微信中上传的头像不是jpg格式,将会显示为黑屏假如是H5中使用上述代码,会提示跨域访问

而最近(今天日期 -04-22)新出了一个奇怪的事情,就是Android系统7.0+的机器,在4G网下无法正常显示微信头像。包括腾讯的欢乐斗地主里的排行榜也显示不出来。

这个问题我猜测,是4G的Android 7.0+的HTTP头和其他环境下不一样,导致腾讯拒绝了头像访问。应该是封杀某音的时候,误伤。

解决这个问题最直接的办法,就是在自己的服务器上,配置一条NGINX转发协议。

server {listen 80;#server_name ;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或者域名是 ,端口是80,或者其他的。我们修改上面的访问方式为如下

var headimg = '/mmopen/vi_32/DYAIOgq83erD6MOUwRKV9NyBAqnoFDTnltzAe2zWOkKxyDOFibVBb1ZV5CaATJwYAuNqZ5sXMBC4c8iacaHDf8RA/132';var url = ':port/image?url=' + headimg + '&sb=213.jpg'; cc.loader.load(url,function(err,tex){self.icon.spriteFrame = new cc.SpriteFrame(tex);});

这样改的原因如下

1、假如你做的是H5项目,域名刚好就是你的页面加载域名,那么你将处于同域中,不再有跨域问题

2、当我们请求最后合成的url时,NGINX会将url参数作为请求地址,转发出去,并且将获取到的信息,原路返回。而我们添加的proxy_redirect off;将会抹去我们系统机型为我们添加的各种HTTP HEADER。不会再出现Android 7.0+ 4G网加载不了的问题。

3、添加 &sb=213.jpg参数,是为了让cc.loader.load函数识别到这是一个图片加载。但由于不是强制的填写type,即使PNG也是可以正常显示的。

以上就是麒麟子在做项目的时候,解决微信头像,以及一些第三方服务器图片的最终方案。希望能够帮助到大家。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。