首页
登录 | 注册

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

不管是游戏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也是可以正常显示的。

 

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


相关文章

  • 页面性能优化-原生JS实现图片懒加载
         在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再加载更多的图片.这种加载图片的 ...
  • ERP不规范,同事两行泪
    最近的很多次对外交流,都聊到了ERP建设的话题,并且无一例外的不那么让人省心,回想我这么多年走过的ERP坑坑路,在这里也写下经验和总结,希望能给正在或者即将走上ERP建设路的企业一些思考和帮助. 导读 1.几个瞎眼而普遍的案例 2.ERP的 ...
  • .NET Core Dapper操作mysql数据库
    前言 现在ORM盛行,市面上已经出现了N款不同的ORM套餐了.今天,我们不谈EF,也不聊神马黑马,就说说 Dapper.如何在.NET Core中使用Dapper操作Mysql数据库呢,让我们跟随镜头(手动下翻)一看究竟. 配置篇 俗话说得 ...
  • Vue 进阶之路(七)
    之前的文章我们对 vue 的列表输出做了介绍,本章我们来看一下 vue 的组件 component. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head ...
  • Entity Framework Core in Action Entityframework Core in action是 Jon P smith 所著的关于Entityframework Core 书籍.原版地址. 是除了官方文档外另 ...
  • 1 最有影响力的30篇计算机视觉会议论文 选取论文的原则: (1)会议论文,主要来源于以下会议:CVPR, ICCV, ECCV, BMVC, FG, ICIP, ICPR, WACV, ICASSP, MM, IJCAI, UAI, AA ...

2019 cecdns.com webmaster#cecdns.com
12 q. 0.078 s.
京ICP备10005923号