小游戏初始化，资源加载异常处理，黑屏处理

无论是小游戏也好还是其他游戏，都会把一些图片，多媒体资源放到云端，减少包得大小，等用户打开游戏后再时事加载，如果网络部好，或者等游戏正在加载得时候断网了，好多游戏就会卡死，这样得用户体验很糟糕，接下来我就教大家如果处理这样得问题。

 

• 我就部从下载开始了 ，上一篇有教大家如果使用微信云存储，和显示进度条https://www.cnblogs.com/zhangzhaowei/p/12343966.html
• 上面那种就没有做网络卡死和异常处理，导致有的打开小游戏直接卡死黑屏，或者进度条不动了，然后造成小游戏的用户丢了了很多，这样太糟糕了，鱼是我做了改进。
• 下面具体就来看看我的解决方案。

1. 1分析问题

　　　造成下载问题，大部分两个方面，一个是网络不好,导致资源无法下载下来；二是云端存储限制权限无法下载，CDN过期等等云端问题。　　　

1. 2假设方案

　　　　　无论上面那种问题造成的，我们的客户端都不应该卡死或者黑屏幕，虽然CDN过期，我们会主动续费等等，但是作为用户端的体验我们应该做到更好的交互，所以当加载的资源失败，超时的资源我们应该提示下载失败，并且重新下载。这样用户至少知道是网络的问题，小游戏不背这个锅。

1. 3具体方案，验证假设

　　　　　 我们接着https://www.cnblogs.com/zhangzhaowei/p/12343966.html这个代码改造，当一定时间下载未完成 ，我们视为下载失败，重新下载，这样下载递归，只要有失败就重新下载，但是递归的出口始终异步，这样会导致不一致，也就是新的一轮下载已经开始，但是上一轮下载还有失败的 ，并且唤起再一次的异常。这样就的话如果网络异常的话会不断的下载下去，反复下载，递归死循环了。

　　　　　 我们可以用一个更简单的方法，那就是规定一定的时间，如果下载时间超过这个时间，就视为下载失败，这时候先终止所有的下载，然后开启新一轮下载，知道下载完成。这个方案比起上面那个方案来说，如果网络不好是提示下载失败反复加载，但是网络恢复了 ，就会立马下载成功，完成下载。这样用户也知道什么情况，小游戏更不会卡死，黑屏了。

　　我们设定10秒钟如果下载不完成就重新下载，类似于刷新

　　

wx.cloud.init({
      env: 'test-x1dzi'
    })
    downLoadPic()
    setTimeout(()=>{
      if(netResourse.length != list.length){
        wx.showToast({
          title: '网络无连接，加载失败，正在重新加载！',
          icon: 'none',
          duration: 2000
        })
        for(let obj of downloadTaskList){
          obj.abort()
        } 
        run()
      }
    },10000)

　　判定已下载数量不等于被下载数量就视为下载失败，开启新的下载刷新

let downloadTaskList = []
  let list = []
  let index = 0

  function downLoadPic() {
    list = []
    downloadTaskList = []
    index = 0
    for (let obb of netResourse) {
      let task = wx.cloud.downloadFile({
        fileID: obb.fileId, // 文件 ID
        success: res => {
          index++
          let obj = obb
          obj.url = res.tempFilePath
          list.push(obj)
          initRender(ctx, index / netResourse.length * 100, image)//显示进度条
          if (netResourse.length == list.length) {//下载成功
            databus.allImages = list
            loadingImage()
            new Main(ctx)
          }

        },
        fail: () => {}
      })
      downloadTaskList.push(task)//添加下载任务，用于下载超时终止下载
    }
  }

　　大体逻辑，和方案就这么简单，我才现在的游戏大体都这么做，可以试试用我的优化后的小游戏当正在加载资源的时候关掉网 ，然后反复加载的时候再开网验证下。

 

 

 

 

wx.cloud.init({

      env: 'test-x1dzi'

    })

    downLoadPic()

    setTimeout(()=>{

      if(netResourse.length != list.length){

        wx.showToast({

          title: '网络无连接，加载失败，正在重新加载！',

          icon: 'none',

          duration: 2000

        })

        for(let obj of downloadTaskList){

          obj.abort()

        } 

        run()

      }

    },10000)