一、微信小游戲——H5小游戲及微信小程序

微信小游戲、H5小游戲以及微信小程序，他們到底是什么關系呢？ 就像這個圖一樣，微信小游戲，目前其實就是微信小程序里能運行的H5小游戲，既屬于微信小程序，也是H5小游戲。 另外這三者 實際也是有區別的，后面會講。

二、H5小游戲

什么是H5小游戲

首先看一下，什么是HTML5

HTML（Hyper Text Markup Language），超文本標記語言。

1991年，HTML1開始研發。

1993年，HTML1發布。

1999年12月，HTML4發布。

2004年，WHATWG提出Web Applications 1.0，HTML5草案的前身。

2006年，W3C與WHATWG決定合作，推進新版HTML。

2008年01月，HTML5第一份正式草案公布。

2014年10月，W3C宣布HTML5正式公布發布。

HTML5新規則：減少對外部插件的需求,比如Flash等；

HTML5新特性：canvas、video、本地存儲、websocket、新內容元素等等。

可以看到其實在1999年的時候，就已經是html4了，但是到14年w3c，也就是萬維網聯盟(World Wide Web Consortium,簡稱W3C) 才正式宣布html5發布。 這中間是一個比較艱辛漫長的過程。而且這中間還出現了一些插曲，比如在06年左右，那個時候盛行flash，很多站點整站flash，還出現了一些比較有代表性的flash小游戲，比如小小flash。不知道大家是否有印象，就是簡單幾個小人可以操作打來打去，非常有趣。

那個時候還有個閃客帝國比較有名，可以上傳自己的flash作品。這些是06年左右。

但其實廣義上來看，H5開發，是一個技術合集。如圖五，我列了一些主要的點，比如基礎知識及標準規范，包括html5、css3、es(我們現在開發中用的主要是es6規范來的)，還有typescript （typescript和javascript最大的一個區別就是 typescript是強類型的），當然還有W3C的一些其他規范比如DOM/BOM（瀏覽器對象模型，比如window.xxx）。然后還有H5開發需了解熟悉的開發及調試工具。接著就是在安全及性能優化這塊，csrf/xss 這些是常見的。

這里再簡單說一下 WebAssenmbly, 說一下這個webAssembly的大致由來，js解釋性語言，一大特點相對來說性能比較慢，而且特別是網頁應用復雜的時候，所在google在09年的時候 在v8引擎里加入了JIT（即時編譯），有了buff后，差不多提升20~40倍。JIT是基于運行期分析編譯的，而javascript是一個沒有類型的語言，于是大部分時間，JIT編譯器是在猜測類型，如果類型猜錯了只能推倒重來。所以那個時候就有兩種思路，一種是Typescript， 這樣就不用猜類型了；一種是asm.js，其實也是標記類型。然后谷歌、 蘋果、 微軟、 W3C就想把這種方法標準一下，結果呢， 激進了，標注類型的事情也不要了，干脆直接定義一種新的方式，比如用c/ c++寫，編譯成一個.Wasm格式二進制文件，通過javascript直接載入這個二進制文件運行。這樣子的話，可以讓web應用和原生應用性能差距縮小。

接著說 H5開發的其他主要相關點，一個是工程化，這其實也是最近這些年興起的，特別是在前端的大型項目上。這主要需要掌握幾種規范Commonjs、AMD，以及主要的工具比如webpack。然后就是主要的庫 和 框架。這里說一下weex， weex是阿里推出來的其實通常是和vue配合使用的，和facebook的react native類似，可以讓開發人員用js去寫原生的應用，所以通常被人稱為 vue-native。week會提共weekSDK，會準備一個js引擎，在執行過程中會產生各種命令發送給原生端渲染等等。

最后主要是游戲開發相關的，比如DOM CSS，還有Canvas、WebGL，以及一些游戲引擎。當然還有些其他點。 其實游戲開發這塊，和整個H5開發來說，區別還是有一些的，做普通web開發的可以不用了解這塊。所以在一些公司，已經將H5游戲開發與web前端開發分開了。 好，這里總結一下，H5游戲，就是基于H5技術合集開發出來的小游戲。

H5小游戲特點：

優點：

開發成本相對低

跨系統、跨終端、跨平臺

無需下載安裝，即點即玩

缺點：

制作門檻相對低

缺少固定流量入口

體驗差距（性能、流量等）

據艾瑞咨詢與白鷺時代等網絡數據——2017年H5游戲市場為30億元，手游市場規模達到1440億元，兩者比值為1:48。以端游、頁游發展過程為參考，頁游與端游的市場比值約為1:3。伴隨著流量資費的降低、手機的更新換代、H5的持續發展，H5游戲多流量入口和即點即玩的特征，H5游戲市場 可能存在巨大的增長空間。

H5小游戲發展簡述

2014年，《圍住神經貓》、《愚公移山》，朋友圈病毒式傳播，參與量過億

2015年，《狂掛傳奇》、《奇跡西游》，月流水上百萬

2016年，《傳奇世界》、《決戰沙城》，月流水2000萬+

2017年，《大天使之劍H5》，公測24天流水破億，逐漸形成盈利效應—(三七互娛); 同年，QQ、微信、QQ瀏覽器、騰訊視頻開啟H5小游戲專區; 企鵝游戲APP、玩吧APP等專門的H5游戲平臺誕生。

2017年12月28日，微信正式公布小程序支持小游戲。

簡單H5游戲開發技術

最初只是一些簡單的游戲，比如俄羅斯方塊，這種主要的技術點就是DOM操作，用jQuery原生javascript css3就可以了。畫面內元素比較簡單，邏輯不會太復雜，結構與常規Web頁面一致；主要技術點：DOM元素、jQuery、原生javascript css3

稍復雜H5游戲開發技術

復雜度相對傳統Web頁高。

主要技術點：canvas、javascript、部分dom元素 css3

然后再復雜一點，比如切水果，相對復雜一些，主要是canvas 部分dom元素的操作。

復雜H5游戲開發技術

然后，再看一下，復雜的游戲開發，比如傳奇世界，主要是基于H5游戲引擎來做的。

H5小游戲引擎

看一下這些游戲引擎的主要對比。白鷺，是目前社區非常活躍的H5引擎，去年宣布支持 webassembly，而且2d 3d vr都支持的，同時支持js、ts開發，經典的代表就是傳奇世界。另外，laya引擎，是支持js ts as（actionscript）的。所以以前做flash/as開發的或許可以轉到這上面來。然后還three.js，只支持3d的，跳一跳和紀念碑谷小游戲，都是通過three來的。然后cocos2d，這個也是一個老牌引擎，歡樂斗地主。然后再說一款，阿里也開源了一款H5小游戲引擎hilo。阿里雙十一的營銷活動小游戲、天貓狂歡城等都是通過這個來的。

前端工程化

再看一下前端工程化，這個其實也是近些年起來的一個概念。主要是需掌握代碼組織規范、webpack工具（幫你壓縮 打包 解決依賴關系等等 ），然后還要了解node.js, 基于v8引擎的。其實這個也用于服務端編程。另外就是NPM 包管理。

以上這些就是H5游戲要了解的基本點。

三、微信小程序

然后看一下微信小程序。微信小程序，其實也是基于webview的。

小程序的視圖層目前使用 WebView 作為渲染載體，而邏輯層是由獨立的 JavascriptCore（IOS）、X5（安卓） 作為運行環境。

四、微信小游戲

小游戲 與 H5游戲、小程序對比

小游戲是在H5游戲的基礎上增加微信社交能力、文件系統、工具鏈，去掉一些對游戲開發不是那么重要的，像Dom、Bom等，從這張圖可以看出來，微信小游戲沒有webview了，H5規范API這里是微信小游戲sdk自己實現的，比如canvas webgl。然后還有就是 游戲引擎這一層，是做了一個適配

小游戲資源加載

目前核心游戲包 4M（用于首次加載），可以實現即下即玩，需3~5秒的下載

理論上，用戶若不主動刪除，微信客戶端只會更新不會刪除；容量沒有固定值，只有不夠用的情況下根據LRU(Least recently used)規則進行刪除。

小游戲Adapte

小游戲的運行環境在IOS上是Javascript Core， 在Andriod上是 V8，沒有DOM和BOM的運行環境。 Adapter，通過wx api模擬BOM、DOM的代碼庫。

Adapter 是為了讓基于瀏覽器環境的第三方代碼更快地適配小游戲運行環境的一層適配層，并不是基礎庫的一部分。更準確地說，我們將 adapter 視為和游戲引擎都視為第三方庫，需要開發者在小游戲項目中自行引入。

當然，游戲引擎也自己做了適配的，例如cosos

小游戲開放注冊品類

目前是6大類 24個子類

小游戲開放能力及API

小游戲開放工具

 

小游戲開發工具

為了幫助開發者簡單和高效地開發和調試微信小程序、微信小游戲，微信在原有的公眾號網頁調試工具的基礎上，推出了全新的 微信開發者工具，集成了公眾號網頁調試和小程序、小游戲開發兩種開發模式，而且自帶小游戲demo。詳情可參考mp.weixin.qq.com。

五、微信小游戲應用

小游戲營銷體系的建設

小游戲的營銷活動、營銷應用等的建設。

游戲預熱及用戶沉淀

簡單試玩版，提升玩家對游戲的期待，沉淀用戶。

小游戲化營銷

通過小游戲做一些營銷活動 或者 營銷推廣。(阿里雙十一、天貓狂歡城等)

APP導流

可以給APP導流

品牌傳播

借助小游戲的流量傳播優勢，做品牌傳播等等。

最后感謝蘇秋宏、黃劍鑫、陳亮亮、李一奇、王躍等提供的相關分享參考，以及以下參考資料：

《微信公開課2018》

《微信小游戲適配原理》—— cocos 王哲

《天貓雙11晚會和狂歡城的互動技術方案》InfoQ——鄧紅春(阿里巴巴 續彬)

《利用HTML5，CSS3和WebGL開發HTML5游戲》——丹麥Jacob Seidelin 黃蔚瀚譯 電子工業出版社

《前端工程化-體系設計與實踐》——周俊鵬 電子工業出版社

大家共同努力，推動WEB及大前端的發展！

問答

微信小游戲與傳統的手機游戲有什么區別？

相關閱讀

什么是微信小游戲？官方解釋

微信小游戲的6大趨勢分析

有故事的微信小游戲“跳一跳”

---

此文已由作者授權騰訊云+社區發布，轉載請注明文章出處