CocosCreator微信小游戲遠程資源設置REMOTE_SERVER_ROOT(zip資源包)

微信小游戲限制主包大小4MB

子包可擁有額外4MB空間

然而這往往還是不夠

因此對於更大一些的游戲,就需要設置遠程資源服務器的方式

來加載更多的資源

首先官方文檔(非常簡略)

http://docs.cocos.com/creator/manual/zh/publish/publish-wechatgame.html?h=remote

詳細攻略如下

轉載請注明原文出處https://www.cnblogs.com/billyrun/articles/9798387.html

 

1.CocosCreator工程設置REMOTE_SERVER_ROOT

在微信輸出目錄(類似/output/wechatgame/game.js)

設置game.js中的REMOTE_SERVER_ROOT

wxDownloader.REMOTE_SERVER_ROOT = "https://xxx.yourhost.com/xxx";(注意目錄截止位置,沒有/res)

默認未設置狀態是這樣的

wxDownloader.REMOTE_SERVER_ROOT = "";或wxDownloader.REMOTE_SERVER_ROOT = "undefined";

為了不要在每一次打完包都去手動設置這個東西

可以在build-templates里面的game.js去設置,打包會復制該文件,就不用每次手動改了

 

2.上傳資源文件包

將打包生成的res目錄整體放到REMOTE_SERVER_ROOT所指定的位置

放置之后大概如下

http://xxx.yourhost.com/res/
../
import/                                            16-Oct-2018 11:50       -
raw-assets/                                        16-Oct-2018 14:06       -

如果是https的貌似看不到目錄結構

反正就這樣放上去,要確保能訪問到每一個文件

需要說明的是

實測在CocosCreator1.8版本,如果遠程目錄缺了某張紋理

比如某個按鈕的紋理圖被人為刪掉了

那么這個按鈕僅僅是不顯示而且,其余界面正常

而在1.10版本,直接整個界面都黑掉報錯了

因此要保證遠程資源目錄的完整性

 

3.移除部分文件,減小包體大小

此時最簡單的方式,可以把res目錄整體刪掉

這也是官方文檔中第3條所選擇的方案

1. 構建時，勾選 md5Cache 功能。
2. 將小游戲發布包中的 res 文件夾完整的上傳到服務器。
3. 刪除發布包內的 res 文件夾。
4. 在構建發布面板中設置 遠程服務地址。
5. 對於測試階段來說，可能你無法部署到正式服務器上，需要用本地服務器來測試，那么請在微信開發者工具中打開詳情頁面，勾選項目設置中的 不檢驗安全域名、TLS 版本以及 HTTPS 證書 選項。

這樣做優點是最大化減少包大小

但對於整包大概在10M左右的程序,可能還是希望保留大部分資源在微信包內

也就是說僅刪除res中的部分文件

理論上在加載資源時,留下的文件將會快速直接加載

而刪掉的部分會從我們設置的遠程資源服務器中獲取

在1.8.x/1.9.x版本中剔除部分文件十分簡單,自己看着刪或者寫腳本批處理都不難

而在2.0之后的版本,res打包出來的目錄不再與工程目錄一一對應

怎樣快速剔除文件目前我還沒有好的方法

補充

將需要剔除的文件放在resources目錄下

獲取其實際位置

例如cc.url.raw('resources/remote/pet5b.png')

得到"res/import/64/64102090-e897-459b-b00d-d274e933a4dc.png"

修改自定義打包腳本,在打包結束時先生成資源包再刪除遠程文件,使包體符合微信限制

# 遠程資源包相關
cd ${BUILD_PATH}${FOLDER}
zip -qr ../res.zip res
# 刪除包外資源
rm res/raw-assets/b3/b32e1868-7bed-47e8-9bdf-55dfbd3357d2.png
rm res/raw-assets/b4/b49304e7-dbdc-425b-a9d8-55621d7efca4.png
rm res/raw-assets/11/11f0dbed-a2f6-4c67-8618-0fcb944b772e.png
rm res/raw-assets/21/217708bb-93e8-4539-b3f8-c73f63f8b7e2.png
rm res/raw-assets/02/02016667-0698-42f2-84f1-e14a25340ba4.png

注意路徑替換import/raw-assets

 

4.微信相關配置

以上3步完成后,即可從資源服務器加載資源

可能會報錯如下

Tue Oct 16 2018 14:49:21 GMT+0800 (CST) downloadFile 合法域名校驗出錯
gamePage.html:1 如若已在管理后台更新域名配置，請刷新項目配置后重新編譯項目，操作路徑：“詳情-域名信息”
gamePage.html:1 https://xxx.yourhost.com 不在以下 downloadFile 合法域名列表中，請參考文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html

看到這個只要去公眾平台設置即可

設置->開發設置->服務器域名

request合法域名	https://xxx.yourhost.com	一個月內可申請5次修改 本月還可修改4次	修改
socket合法域名
uploadFile合法域名
downloadFile合法域名	https://xxx.yourhost.com

注意https的問題,如果是http需要升級協議

否則只能做調試時用,無法發布面向用戶使用

 

5.ZIP資源包加載與微信解壓

某些情況下可以讓用戶把全部資源下載完畢再進行游戲

這樣可以將res目錄壓縮成zip包上傳CDN

在游戲開始后通過以下方式下載並解壓

解壓后的文件路徑與原包內的資源位置是一致的

可以直接使用

同時REMOTE_SERVER_ROOT加載遠程散列文件的方式依然可以使用

在解壓完成后，資源直接從本地獲取，不會走遠程加載

在解壓完成前，從遠程獲取散列資源文件

下載的過程是不會阻塞渲染進程的！

var fileManager = wx.getFileSystemManager();

// 下載資源
var downloadTask = wx.downloadFile({
    url: "https://cdn.hbabei.com/test2/test2.zip",
    success:function(res){ // 下載成功
             var filePath = res.tempFilePath; // 下載路徑
              fileManager.unzip({
                          zipFilePath:filePath,   // 資源下載后路徑
                          targetPath:wx.env.USER_DATA_PATH,  // 解壓資源存放路徑
                           success : function(res){// 解壓成功
                                console.log('解壓縮成功')
                           },                           
                          fail : function(res){// 解壓失敗
                                console.log('解壓縮失敗')
                           },
              })
    },
    fail : function(res){ // 下載失敗
        console.log('下載失敗') // 下載的進度
     },
})
// 下載資源進度
downloadTask.onProgressUpdate((res) => {
      console.log('下載的進度:' +res.progress) // 下載的進度
})

 

6.總結

以上方案可以與開放數據域/子包共存

如果有更好的方案,歡迎留言