當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

微信小游戏资源加载页与云存储

發(fā)布時間：2023/12/19 综合教程 29 生活家

生活随笔收集整理的這篇文章主要介紹了微信小游戏资源加载页与云存储小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

------------恢復(fù)內(nèi)容開始------------

微信小游戲為什么要有開始資源加載頁？

　　　　當小游戲包過大的時候，我們?nèi)绾蝺?yōu)化包的大小，最直接的先把圖片或者聲音等資源放到云端，等小游戲初始化后再從云端下載到本地，而小游戲包里只放代碼和幾張簡單的加載圖。

為什么微信加載資源的頁面和初始化的頁面是兩個頁面？

　　　　微信小游戲自帶初始化頁面是，微信從云端下載小游戲代碼到本地（這個是自帶的，不需要處理，更沒有必要再自定義）。資源加載頁是，當小游戲初始化完成后再下載資源圖片和其他媒體素材，如果沒有下載進度頁面會停住用戶體驗不好，所以需要一個素材下載的進度條頁面，下載完成，進度條走完，就可以進入游戲。

云存儲哪家好，做小游戲當然微信自帶云存儲！

　　　　我們將媒體資源放到遠端文

件服務(wù)器，CDN等等，但是相對于現(xiàn)在流行的比如阿里云，AWS，騰訊云等等，甚至什么云盤啥的都不如微信自帶的云存儲。因為免費5　　個　　G！！！！！足夠了。而且上傳文件后會生成一個id，通過微信下載函數(shù)傳入此Id,就可以下載了！

　　自己動手豐衣足食

首先，我們需要將游戲的媒體資源放到云端，這里我們用微信官方的云存儲

在開發(fā)平臺界面打開云開發(fā)平臺，

　　會初始化些步驟，很簡單

打開存儲，這幾我們可以新建文件夾，以及文件

編寫下載文件

　　將所有要下載的文件id，用數(shù)組記錄下來

export const booms = [{
    name: 'boom1',
    fileId: 'cloud://imge8-5z6gt.696d-imge8-5z6gt-1300789023/booms/1.png',
  },
  {
    name: 'boom2',
    fileId: 'cloud://imge8-5z6gt.696d-imge8-5z6gt-1300789023/booms/2.png',
  },
  {
    name: 'boom3',
    fileId: 'cloud://imge8-5z6gt.696d-imge8-5z6gt-1300789023/booms/3.png',
  },
  {
    name: 'boom4',
    fileId: 'cloud://imge8-5z6gt.696d-imge8-5z6gt-1300789023/booms/4.png',
  },
  {
    name: 'boom5',
    fileId: 'cloud://imge8-5z6gt.696d-imge8-5z6gt-1300789023/booms/5.png',
  }
]

批量下載

for (let obb of booms) {
    wx.cloud.downloadFile({
      fileID: obb.fileId, // 文件 ID
      success: res => {
        index++
        // 返回臨時文件路徑
        let obj = obb
        obj.url = res.tempFilePath
        list.push(obj)
        if (netResourse.length == list.length) {
          databus.allImages = list
          loadingImage()
          new Main(ctx)
        }
        initRender(ctx, index / netResourse.length * 100)
      },
      fail: console.error
    })
  }

下載之后會返回一個本地緩存tempFilePath，在new image（）直接賦值給.src屬性這個路勁就是在本機內(nèi)存里，可以理解是游戲包里的相對路勁

　　　并且記錄返回數(shù)，這樣就知道和總下載數(shù)的比例，實現(xiàn)進度條的百分比了　

------------恢復(fù)內(nèi)容結(jié)束------------