【分享】微信小游戏中加载头像导致假死问题

Creator 2.x
#1

起因

这段时间公司的几款游戏都是IO对战型的，都有一个类似的匹配等待界面，展示了匹配到的全部玩家的头像和名字。项目上线前，在我们的全部测试机上都是没问题的。过了几天发行方那边陆续反应有在匹配界面卡住的情况。我排查了一个下午，最终才把问题定位到cocos自带的cc.loader.load这个方法上。

cc.loader.load({ url: 'https://xxx', type: 'png' }, (error, texture) => {
    let spriteFrame = new cc.SpriteFrame(texture);
    avatarSp.spriteFrame = spriteFrame;
});

思路

首先在cocos社区里面搜索，找到了麒麟子大大写的一篇文章。下面是他的解释。

  1. 假如用户在微信中上传的头像不是jpg格式，将会显示为黑屏
  2. 假如是H5中使用上述代码，会提示跨域访问
  3. 而最近（今天日期 2019-04-22）新出了一个奇怪的事情，就是Android系统7.0+的机器，在4G网下无法正常显示微信头像。 包括腾讯的欢乐斗地主里的排行榜也显示不出来。
  4. 这个问题我猜测，是4G的Android 7.0+的HTTP头和其他环境下不一样，导致腾讯拒绝了头像访问。 应该是封杀某音的时候，误伤。

他的方法是在自己的服务器用nginx转发来解决问题。但是这个方法对我们来说不太好，我们的小游戏日活比较高，走自己服务器容易把带宽撑爆。

如果正如他所说的是图片格式与请求头的问题的话，在小游戏中完全可以使用wx.downloadFile方法将图片下载到本地再根据临时的url去创建SpriteFrame从而达到相同的效果。

实现

核心代码如下，请根据自己的需求把容错做好。

wx.downloadFile({
    url: 'https://xxx',
    success: res => {
        if (res.statusCode === 200) {
            let url = res.tempFilePath;
            let spriteFrame = new cc.SpriteFrame(url);
            avatarSp.spriteFrame = spriteFrame;
        }
    },
});

然后封装好一个方法后，将全部头像加载部分全部换成这样加载。

发给发行方，果然问题解决~

原文来自我的博客: cocos显示微信小游戏头像

1赞
#2

mark

#3

优秀，mark

#4

downloadFile 这个方法不行，只能下载注册服务器的图片，不能下载微信头像（错误信息：VM151:1 downloadFile:fail createDownloadTask:fail url not in domain list），问题还是没有解决

#6

mp后台添加服务器域名，request合法域名 downloadFile合法域名 https://wx.qlogo.cn

#7

这个问题应该在 2.1.1 或者 2.0.10 已经修复了的

1赞