------------恢復內容開始------------

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

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

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

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

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

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

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

　　

---

　　自己動手豐衣足食

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

在開發平臺界面打開云開發平臺，

　　　　

　　會初始化些步驟，很簡單

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

編寫下載文件

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

　　

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屬性 這個路勁就是在本機內存里，可以理解是游戲包里的相對路勁

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

------------恢復內容結束------------

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

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

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

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

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

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

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

　　

---

　　自己動手豐衣足食

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

在開發平臺界面打開云開發平臺，

　　　　

　　會初始化些步驟，很簡單

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

編寫下載文件

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

　　

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屬性 這個路勁就是在本機內存里，可以理解是游戲包里的相對路勁

　　　并且記錄返回數，這樣就知道和總下載數的比例，實現進度條的百分比了，并且當進度條100%時 開始游戲

送上我的小游戲 一開始界面就是下載資源頁 可以看看效果

總結

以上是生活随笔為你收集整理的微信小游戏资源加载页与云存储的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。