鵝廠內部乾貨|微信小遊戲開發技術怎麼應用？

歡迎你們前往騰訊雲+社區，獲取更多騰訊海量技術實踐乾貨哦~。

 

做者介紹：陳陽(Younger)

2011年加入騰訊，現就任於騰訊遊戲增值服務部，負責AMS遊戲營銷平臺，致力於研究和推進Web及大前端相關技術的發展。

1、微信小遊戲——H5小遊戲及微信小程序

微信小遊戲、H5小遊戲以及微信小程序，他們究竟是什麼關係呢？ 就像這個圖同樣，微信小遊戲，目前其實就是微信小程序裏能運行的H5小遊戲，既屬於微信小程序，也是H5小遊戲。 另外這三者 實際也是有區別的，後面會講。

2、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開發，是一個技術合集。如圖五，我列了一些主要的點，好比基礎知識及標準規範，包括html五、css三、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遊戲要了解的基本點。

3、微信小程序

而後看一下微信小程序。微信小程序，其實也是基於webview的。

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

4、微信小遊戲

小遊戲 與 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。

5、微信小遊戲應用

小遊戲營銷體系的建設

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

遊戲預熱及用戶沉澱

簡單試玩版，提高玩家對遊戲的期待，沉澱用戶。

小遊戲化營銷

經過小遊戲作一些營銷活動 或者 營銷推廣。(阿里雙11、天貓狂歡城等)

APP導流

能夠給APP導流

品牌傳播

藉助小遊戲的流量傳播優點，作品牌傳播等等。

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

《微信公開課2018》

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

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

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

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

你們共同努力，推進WEB及大前端的發展！

問答

微信小遊戲與傳統的手機遊戲有什麼區別？

相關閱讀

什麼是微信小遊戲？官方解釋

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

有故事的微信小遊戲「跳一跳」

---

此文已由做者受權騰訊雲+社區發佈，轉載請註明文章出處

原文連接：https://cloud.tencent.com/developer/article/1065070