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

眼下小遊戲特別火，很多團隊也陸續啓動了微信小遊戲的項目，並於立項前期進行技術預研究。但從微信官方文檔看 , 卻能發現很多坑。

1、運行環境的坑

首先微信小遊戲是一個不一樣於瀏覽器的 JavaScript 運行環境，沒有 BOM 和 DOM API，因此咱們第一個遇到的就是API兼容性問題。

一、API兼容性

1.一、網絡API

BOM的核心是windows，表示的是一個瀏覽器的實例，在網頁中自定義的任何一個對象、變量和函數，都以windows做爲其全局對象；缺少Dom意味着http、websocket及本地存儲等通訊用的API使用就會遇到問題，好在微信提供了這兩個API的私有實現，咱們要作的就是適配。

適配的基本思路是檢測是不是運行再微信平臺，而後利用JS動態語言特性, 對BOM的API進行動態重寫 , 優缺點以下：

1.優勢是API調用者無需作任何改動,適配成本幾乎爲0。對微信小遊戲和瀏覽器之間的運行 環境差別無感知，很是友好。 2.缺點是會增長代碼體積，但代碼體積的增長帶來的損失幾乎能夠忽略不計。

這種適配方案的性價比很高, 適配HTTP代碼示例以下:

1.二、微信的模塊化

微信小遊戲提供了 CommonJS 風格的模塊 API，能夠經過 module.exports 和 exports 導出模塊，經過 require 引入模塊 . 這與瀏覽器引入JS文件的方式大相徑庭 , 中間有一個隔離層。

讓咱們舉個例子來講明模塊化帶來的問題。

一般咱們在瀏覽器上使用某個js文件裏面自定義的類，經過

標記引入JS文件能夠直接使用:

但在微信中不能夠這樣.須要把API都導入到一個對象上，使用時在加這個前綴.致使不少代碼須要修改，那麼如何避免增長這個前綴呢？

針對這種狀況 , 解決的思路是將全部外部須要用到的方法和對象動態掛靠到window對象上去，將上面的代碼稍作修改示例以下:

二、工做流變化

因爲微信小遊戲沒有Dom和Bom，因此不少依賴Dom和Bom的庫都不能直接用，好比 jquery。

微信的這套環境會或多或少會引發咱們的工做流變化，使用第三方遊戲開發引擎(好比Cocos Createor/Egret/Laya)能夠彌補這些問題帶來的損失。

2、資源限制

一、每一個小遊戲容許上傳的代碼包總大小爲 4MB。

解決方法1:壓縮js文件，圖片資源放在服務器上作預加載。 解決方法2:使用第三方引擎的資源管理功能。

二、微信小程序要求開發者的服務器 支持https,wss協議。

解決方案:服務器啓用HTTPS。實現的方式有不少,推薦Nginx反向代理。

3、發佈審覈

小遊戲開發完成後發佈上線須要具有以下的資格：

1: 服務器域名備案

2: https wss支持

3: 軟件著做權證書 複印件+蓋章簽名

4: 微信公衆平臺賬號及AppID

5: 開發者工具wechat_devtools_1.02.1803210_x64

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

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

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

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