點選上方“CSDN”，選擇“置頂公眾號”

關鍵時刻，第一時間送達！

作者 | 凌華彬、王哲

責編 | 徐威龍

【CSDN 編者按】今天，在 2018 年度微信公開課 PRO 上，張小龍以 967 分和一句“今天沒有發揮的很好，我最高紀錄有 6000 多分”開啟了微信的年度盛事。

在現場，張小龍分享了前不久上線「跳一跳」的初心及其漂亮的資料。“這個遊戲釋出以後，其實它的效果有點超出我們的預期，我們自己開玩笑說，這個遊戲突然變成了有史以來可能使用者規模最大的一個遊戲，因為它的 DAU（日活躍使用者數）大概到了 1 點幾億”。

為什麼我們會說玩一個小遊戲才是正經事？對我來說，它是一個很放鬆的方法，我也很期待這樣一個小遊戲，因為它簡單到讓你可以有一個面對自己，一個最個人的時刻。大家在微信上的時間，可能會有很多的訊息要處理，朋友圈裡有很多資訊要你去點贊、評論，可能還有很多工作的資訊也夾雜在裡面。這個時候玩這樣一個小遊戲，反而是一個非常正經的事情。

當然我們也期待有更多的小遊戲能像跳一跳這樣，跳一跳不是我們刻意做的遊戲，它只是我們小遊戲平臺的一個實驗，我們希望有更多的第三方遊戲能夠像跳一跳這個遊戲一樣得到使用者的喜愛。

基於張小龍對於高質量小遊戲的召喚，我們已經分享過由 Cocos 兩位專家凌華彬、王哲主筆撰寫的「微信小遊戲開發上手」和「小遊戲文件解讀」兩篇文章，從框架到 API，從原理到使用都有覆蓋，也聊到了市場展望和小遊戲渠道特性等話題，相信大家對小遊戲環境和開發都有比較深入的瞭解了。今天，將繼續討論一些相對進階的話題：小遊戲除錯、資源管理、第三方庫的移植，希望能夠幫助所有有志於開發小遊戲的開發者們早日“上分”。

以下為正文：

一、小遊戲除錯

除錯是遊戲開發的必經階段，一個好的除錯環境和除錯工具也會大大提升開發效率。不過在小遊戲開發環境中，除錯層面的體驗還不夠完美，下面就給大家介紹一下目前小遊戲的除錯環境以及如何更好得完成除錯工作。

微信開發者工具

首先大家接觸到最直接的除錯工具就是微信開發者工具，這個工具集成了模擬器、程式碼編輯器、偵錯程式。其中偵錯程式使用的就是 Chrome Devtools，做過 HTML5 開發的一定不會陌生，是非常強大的執行時除錯工具。程式碼編輯器可以幫助你在定位問題時修改程式碼，模擬器可以直接看到執行結果，所以已經是比較完整的一個除錯工具了。

雖然根本上是基於 Chrome 核心及其除錯工具，不過微信開發者工具與瀏覽器除錯環境有幾大區別：

• 開發者工具包含小遊戲環境的微信 API，這些 API 在瀏覽器中不支援；

• 開發者工具模擬了小遊戲的載入，以 game.js 作為入口，而不是 HTML 檔案；

• 開發者工具提供了小遊戲的各種配置與便捷的編譯、預覽。

對於依賴 HTML5 遊戲庫或基礎模組，在開發者工具中直接編寫程式碼的開發者來說，這樣的開發體驗其實是足夠的。不過很多開發者都會使用遊戲引擎來開發遊戲，可能會遇到問題。以 Cocos Creator 為例，開發者打包過程中引擎會將遊戲程式碼壓縮為單一檔案，如果選擇釋出模式，還會進一步混淆併合並程式碼。這樣就會導致除錯過程中無法正確使用原始使用者指令碼進行除錯，會加大除錯的難度。

Cocos Creator 引擎中避免此問題的辦法就是在打包時生成 source map：

構建面板中勾選 Source Maps 選項

同時，還要注意，必須將微信開發者工具中的 ES6 轉 ES5 選項給去掉，否則開發者工具會在原始指令碼內容上多包一層閉包，你之前生成的 source map 也就失效了。

詳情頁面中取消勾選 ES6 轉 ES5 選項

真機除錯

儘管開發者工具比較好用，但是我們必須面對它的一大問題，它的模擬器執行環境和微信小遊戲的真機執行環境並不完全相同。在 API 層面，微信的開發者儘可能將他們做到了一致，但是模擬器依然是由瀏覽器來驅動的，而微信小遊戲的真機環境是原生環境 + 繫結 API構成的，我們再回顧一下第一篇中的框架圖。

小遊戲基礎執行框架

也就是說，有可能出現真機環境中的 Bug 在模擬器環境中無法重現的問題。

上面這個訊息不算是個好訊息，然而還有個更糟糕的訊息等著你：小遊戲真機執行環境目前無法進行遠端除錯。

。。。

好了好了，別哭，其實也沒那麼糟糕，微信團隊正在非常努力得解決這個問題，他們也希望儘快將遠端除錯功能帶給大家。在此之前，其實還有一個 vConsole 可以用來輸出 log 進行除錯，所以也算是一點慰藉。好在真機環境中出現問題而模擬器沒問題的情況比較少見，一般遊戲邏輯不會引起類似的問題。如果大家真的遇到，可以嘗試用 log 的方式定位，也可以反饋給你使用的引擎提供方，看看能不能幫助你解決問題。

vConsole 地址：https://mp.weixin.qq.com/debug/wxagame/dev/tutorial/usability/debug.html?t=2018110

使用遊戲引擎除錯

在使用 HTML5 遊戲引擎製作小遊戲的過程中還有一個好處，就是可以先發布 HTML5 版本，在瀏覽器中除錯遊戲邏輯，然後再發布到小遊戲環境中進行相容性測試。當然，你可能需要在 HTML5 版本中隔離微信小遊戲的 SDK 程式碼，以 Cocos Creator 為例，可以使用下面的判斷程式碼：

if (cc.sys.platform === cc.sys.WECHAT_GAME) {
    // wechat exclusive logic
}

二、小遊戲的資源管理

除了前兩篇中提到的 API 級別的差異以外，小遊戲環境和瀏覽器環境的另一大差異就是資源管理了。

資源載入

首先是資源載入的差異，我們通過首場景載入的流程來展示這種差異：

在瀏覽器中始終遵循按需載入的原則，執行到載入的標籤或者指令碼，才會去作出網路請求載入內容。而在小遊戲中，會首先下載你提交的完整遊戲包，再執行 game.js 來啟動遊戲。所謂完整遊戲包，也就是開發者在微信開發者工具中所匯入的資源，不管你是否需要這些資源，在玩家開啟你的小遊戲時，都會被完整下載。所以為了首場景載入的體驗，我們應該儘可能減小自己的小遊戲包體，將可以按需載入的資源，放在遠端伺服器上，用指令碼進行載入。微信團隊也考慮到了首場景載入體驗，所以將小遊戲包體限制在了 4mb。下面是具體的小遊戲包體方面的限制：

• 小遊戲的包內體積不能夠超過 4mb，包含所有程式碼和資源，額外的資源必須通過網路請求下載；

• 對於小遊戲包內資源，小遊戲環境內並不是按需載入的，而是一次性載入所有包內資源，然後再啟動頁面；

• 不可以從遠端伺服器下載指令碼檔案。

基於這些限制，我們給出的建議就是，將所有引擎和遊戲指令碼，放在小遊戲包內，同時可以將首場景資源或者預載入場景資源放在包內。其他資源都應該放在遠端伺服器上。

快取與更新機制

資源管理上的第二點差異我們在第二篇文章中也提到過，對於從遠端伺服器下載的檔案，小遊戲環境沒有瀏覽器的快取以及過期更新機制。

眾所周知，瀏覽器對於使用者已經訪問過的資源，會進行快取，再次訪問時，會優先從快取獲取，而不是傳送請求給服務端，這樣可以儘可能減少網路使用，優化頁面響應速度。微信小遊戲環境所提供的介面則是更為基礎的檔案系統介面：

• wx.downloadFile：下載檔案到快取檔案

• FileSystemManager.saveFile：儲存快取檔案

• FileSystemManager.access：判斷檔案/目錄是否存在

• FileSystemManager.readFile：讀取本地檔案內容

• FileSystemManager.unlink：刪除檔案

基於以上介面來實現瀏覽器的快取方案當然是可行的，但是對於普通開發者來說，太過於繁瑣，所以我們為開發者提供了更完整的資源管理方案。

Cocos Creator 的資源管理方案

首先，微信內將小遊戲的檔案儲存空間按照使用者和遊戲來劃分。所有檔案系統介面，都是在獨立的檔案沙盒環境中執行，所有的檔案目錄也是相對於沙盒環境的，所以不用擔心不同小遊戲或者不同使用者之間的檔案衝突。

在這個沙盒環境之下，Cocos Creator 為小遊戲環境提供了一個 wxDownloader 物件用來載入遠端資源。當用戶給它設定 REMOTE_SERVER_ROOT 屬性後，資源的載入流程就變成了下面這樣：

• 檢查資源是否在小遊戲包內；

• 不存在則查詢本地快取資源；

• 如果沒有快取就從遠端伺服器下載；

• 下載後儲存到小遊戲應用快取內供再次訪問時使用（按照資源相對路徑儲存）。

只要使用者保證 wxDownloader.REMOTE_SERVER_ROOT 路徑下的資源相對路徑與 Cocos Creator 釋出的資源相對路徑一致，那麼再次訪問同一個資源時，就會在小遊戲的檔案沙盒環境中找到對應的檔案。這樣就足夠支撐遊戲資源的載入和快取需求了。

那麼我們如何做到資源的更新呢？假設服務端資源內容更新了，而 URL 沒有變化，那麼我們還是會優先使用快取中的資源，豈不是就沒有得到更新？的確如此，我們解決問題的思路，並不是從資原始檔內容是否變化來判斷，而是一旦內容變化就修改檔案的 URL。這點就依賴於 Cocos Creator 打包時的 md5Cache 功能，這個功能會在打包時給所有資原始檔的檔名附加 md5 字尾，比如 example.png 變成 example.23j8s1.png，一旦檔案內容變化，它的 md5 字尾自然會發生變化。而所有資原始檔的相對路徑，實際上是在執行時由 AssetLibrary 從 settings.js 中解析出來的。

在構建面板中勾選 MD5 Cache 選項

所以開發者只要更新了新的小遊戲包，包含最新版本的 settings.js，那麼所有資源的路徑就得到了更新，自然會從服務端請求最新版本的資源。由此還可引申出多版本共存的方案，就是不同版本的遊戲，指向不同的 wxDownloader.REMOTE_SERVER_ROOT 伺服器路徑，可以保障不同版本都可以訪問，並且不會出現資源的衝突或缺失。

最後，如果想要在本地或非正式伺服器上測試遠端載入功能，需要在詳情頁面中勾選“不檢驗安全域名、TLS 版本以及 HTTPS 證書”。

至此，Cocos Creator 對小遊戲資源管理中，遠端資源載入和更新就解釋清楚了，雖然我們不希望使用者感知到瀏覽器和小遊戲環境的差異，不可否認的是，資源管理方面，使用者仍然需要了解更多的細節，才能夠更好保障自己的小遊戲所帶來的使用者體驗。

三、第三方庫的使用

目前部分第三方庫已經發現有很多不相容小遊戲環境了，這裡可以分享一個判斷原則，如果是純 JS 庫，那麼是沒問題的，但是如果第三方庫使用到了 DOM API，多半是無法支援。舉幾個例子：

• lodash：純 JS 庫，可以放心使用。

• jQuery：此類對 DOM API 有強依賴的第三方庫肯定是無法支援的，也無法通過適配來支援。

• SocketIO：支援，但是需要取消勾選 ES6 轉 ES5 避免閉包的執行環境被改變，這點適用於很多 node module。

• protobuf.js：protobuf.js 已經被驗證是會出現問題的，因為它包含了載入的邏輯，這部分邏輯需要適配到微信小遊戲的 API 才可以使用。

四、總結

三篇系列文章到這裡就正式完結了，感謝所有讀者的耐心和關注。在 Cocos Creator 與微信官方團隊合作正式支援小遊戲之後，我們花費了不少的心血研究微信小遊戲框架和環境，只為了對小遊戲有興趣的開發者能儘快上手，加入這個新興遊戲渠道的探索中去。當然，微信小遊戲的未來還不明朗；開發者也還無法正式提交遊戲；關於盈利方式的問題更是沒有定論。不過這些都不影響微信平臺的龐大使用者量所蘊含的潛力，所以我們相信小遊戲的未來還是非常值得期待的。

從開發者角度來說，龐大的潛在使用者和便捷的觸達方式當然是極好的，但這並不是又一次洗使用者的機會，我認為只有真正理解微信的使用者，為微信的使用者創作遊戲，才有可能獲得真正的爆發。

從微信的角度來說，相信外界的期待讓他們即欣喜又倍感壓力，從謹慎得控制小遊戲的釋出步調中就能看出，我們期待未來能夠開放更多的能力解放開發者的創造力，孕育出行業矚目的遊戲產品給廣大微信使用者。

最後，作為引擎開發商的我們，只有進一步提升易用性、效能，降低開發門檻，努力成為開發者的另一大助力。在這裡也預告一下 Cocos Creator 的下一步計劃，目前 Cocos Creator 2.0 已經在很緊張的開發過程中了，我們徹底重構了渲染層，精簡了引擎的內部框架，並且會在 2.x 階段開放 Material System 介面。無論是效能還是渲染的能力上，都會再上一個臺階。我們非常期待被賦予新生的引擎能夠幫助開發者開發出效能卓越、視效出眾的全新遊戲體驗。

One more thing —— 補遺：常見問題 Q & A

• 小遊戲的盈利方式是什麼？有沒有支付或者廣告 SDK？

目前官方文件中沒有提供這兩種 API，不過從已釋出遊戲的體驗來看，支付未來肯定是會支援的，廣告還沒有見到。未來的進展，還需要開發者們持續關注微信官方的訊息。

• 小遊戲中的資源是否安全？

小遊戲的指令碼和資源都會儲存在微信的檔案沙盒環境中，常規的方式並無法獲得其中的內容，所以相對來說比瀏覽器安全許多。此外，Cocos Creator 打包過程中，如果不勾選 debug 模式，會自動將 JS 指令碼混淆，但是並不支援資源的加密。當然，並不是說沙盒環境永遠不會被破解，這個世界上沒有絕對的安全，不過開發者還是可以更多考慮從伺服器的角度來加強安全性。

如果實在需要加密，理論上純 JS 實現的解密庫是可以被用於微信小遊戲環境的。Cocos Creator 的開發者也可以通過定製 wxDownloader 實現，完成資源的解密，不過這項功能目前引擎並沒有覆蓋。

• 微信小遊戲環境中還需要微信 JS-SDK 嗎？

微信小遊戲環境包含完整的微信 API，不需要任何額外的 SDK 支援。

• 開發者工具中提示 "未找到入口 app.json" 怎麼辦？

目前微信公眾平臺並沒有開放遊戲類目的申請許可權，所以大家只能通過微信開發者工具中體驗小遊戲的方式來測試小遊戲執行環境（或者使用遊客 appid：wx6ac3f5090a6b99c5）。同時，請保障開發者工具詳情頁面中選擇的庫版本是 game。

至於微信何時會開放遊戲類目的申請許可權，目前官方的答覆仍然是："尚未開放，敬請期待"

• 開發者工具詳情中找不到 "不檢驗安全域名、TLS 版本以及 HTTPS 證書" 選項怎麼辦？

當使用體驗小遊戲的方式來測試時，在開發者工具詳情頁面中，會找不到“不檢驗安全域名、TLS 版本以及 HTTPS 證書”選項，這是開發者工具的 bug，我們已經反饋給微信團隊，目前你可以在 project.config.json 中手動設定 urlCheck 為 false。

作者簡介：

凌華彬，Cocos Creator 主程、Game Jamer、玩家，曾負責 Cocos2d-JS、熱更新框架、JSB 框架，現在主要在負責小遊戲釋出流程、Cocos Creator 引擎新渲染器架構。

王哲，Cocos 引擎創始人、首席客服。

讀完文章，歡迎給作者點贊，如果關於微信小遊戲，你還有許多疑問，或者對於文章中有不能理解透徹之處，歡迎留言，作者會不定時溜達到這裡進行解答。

————— 推薦閱讀 —————

點選圖片即可閱讀