你踩過幾個?盤點微信H5小遊戲開發中的那些坑

Matchvs發表於2018-05-24

眼下小遊戲特別火,不少團隊也陸續啟動了微信小遊戲的專案,並於立項前期進行技術預研究。但從微信官方文件看 , 卻能發現不少坑。

你踩過幾個?盤點微信H5小遊戲開發中的那些坑

一、執行環境的坑

首先微信小遊戲是一個不同於瀏覽器的 JavaScript 執行環境,沒有 BOM 和 DOM API,所以我們第一個遇到的就是API相容性問題。

1、API相容性

1.1、網路API

BOM的核心是windows,表示的是一個瀏覽器的例項,在網頁中自定義的任何一個物件、變數和函式,都以windows作為其全域性物件;缺乏Dom意味著http、websocket及本地儲存等通訊用的API使用就會遇到問題,好在微信提供了這兩個API的私有實現,我們要做的就是適配。

適配的基本思路是檢測是否是執行再微信平臺,然後利用JS動態語言特性, 對BOM的API進行動態重寫 , 優缺點如下:

1.優點是API呼叫者無需做任何改動,適配成本幾乎為0。對微信小遊戲和瀏覽器之間的執行 環境差異無感知,非常友好。 2.缺點是會增加程式碼體積,但程式碼體積的增加帶來的損失幾乎可以忽略不計。

這種適配方案的價效比很高, 適配HTTP程式碼示例如下:

你踩過幾個?盤點微信H5小遊戲開發中的那些坑
1.2、微信的模組化

微信小遊戲提供了 CommonJS 風格的模組 API,可以通過 module.exports 和 exports 匯出模組,通過 require 引入模組 . 這與瀏覽器引入JS檔案的方式截然不同 , 中間有一個隔離層。

讓我們舉個例子來說明模組化帶來的問題。

通常我們在瀏覽器上使用某個js檔案裡面自定義的類,通過

你踩過幾個?盤點微信H5小遊戲開發中的那些坑
標記引入JS檔案可以直接使用:
你踩過幾個?盤點微信H5小遊戲開發中的那些坑
但在微信中不可以這樣.需要把API都匯入到一個物件上,使用時在加這個字首.導致很多程式碼需要修改,那麼如何避免增加這個字首呢?

針對這種情況 , 解決的思路是將所有外部需要用到的方法和物件動態掛靠到window物件上去,將上面的程式碼稍做修改示例如下:

你踩過幾個?盤點微信H5小遊戲開發中的那些坑

2、工作流變化

由於微信小遊戲沒有Dom和Bom,所以很多依賴Dom和Bom的庫都不能直接用,比如 jquery。

微信的這套環境會或多或少會引起我們的工作流變化,使用第三方遊戲開發引擎(比如Cocos Createor/Egret/Laya)可以彌補這些問題帶來的損失。

二、資源限制

1、每個小遊戲允許上傳的程式碼包總大小為 4MB。

解決方法1:壓縮js檔案,圖片資源放在伺服器上做預載入。 解決方法2:使用第三方引擎的資源管理功能。

2、微信小程式要求開發者的伺服器 支援https,wss協議。

解決方案:伺服器啟用HTTPS。實現的方式有很多,推薦Nginx反向代理。

三、釋出稽核

小遊戲開發完成後釋出上線需要具備如下的資格:

1: 伺服器域名備案

2: https wss支援

3: 軟體著作權證照 影印件+蓋章簽名

4: 微信公眾平臺帳號及AppID

5: 開發者工具wechat_devtools_1.02.1803210_x64

6: 遊戲自審報告影印件+簽名

7: iOS開發中帳號(可選,沒有則填空)

8: 遊戲版號(開通微信支付需要)

9:企業開發者身份+對公帳號(開通微信支付需要)

相關文章