天天看點

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

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

你踩過幾個?盤點微信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:企業開發者身份+對公帳号(開通微信支付需要)

繼續閱讀