什么是H5小游戏及微信小程序，他们是什么关系？

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

什么是H5小游戏及微信小程序，他们是什么关系？

2011年加入腾讯，现就职于腾讯游戏增值服务部。 负责AMS游戏营销平台，致力于研究和推动Web及大前端相关技术的发展。

1.什么是微信小游戏？

什么是微信小游戏？简单来说就是H5小游戏和微信小程序

微信小游戏、H5小游戏、微信小程序有什么关系？ 就像这张图一样，微信小游戏目前是可以在微信小程序中运行的H5小游戏。 它们都是微信小程序和H5小游戏。 另外，三者之间还存在实际差异，稍后再讨论。

2、H5小游戏

什么是H5小游戏

首先我们先来了解一下什么是HTML5

HTML（Hyper Text），超文本标记语言。

1991年，HTML1开始开发。

1993年，HTML1发布。

1999 年 12 月，HTML4 发布。

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

2006年，W3C决定共同推广新版本的HTML。

2008年1月，HTML5**个正式草案发布。

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

HTML5新规则：减少对外部插件的需求，如Flash等；

HTML5新特性：视频、本地存储、新内容元素等。

可以看到，1999年的时候就已经是html4了，但是直到2014年w3c，即万维网（W3C）才正式宣布发布html5。 这是一个相对艰巨且漫长的过程。 而且这个过程中还出现了一些插曲。 比如2006年左右，当时flash很流行。 许多网站都使用Flash作为整个网站。 还有一些具有代表性的Flash游戏，比如《小闪电》。 不知道大家有没有印象，就是几个小人，会操作，会打闹，很有趣。

当时还有一个比较出名的Flash帝国，可以上传自己的flash作品。 这些是 2006 年左右的。

但实际上，从广义上讲，H5开发是技术的集合。 如图5所示，我列出了一些要点，比如基础知识和标准，包括html5、css3、es（我们现在开发主要使用es6规范）、（*大的区别是强类型）、和当然还有其他一些W3C规范什么是H5小游戏及微信小程序，他们是什么关系？，例如DOM/BOM（浏览器对象模型，例如.xxx）。 然后就是H5开发需要了解的熟悉的开发调试工具。 然后就是安全和性能优化领域，csrf/xss很常见。

我们先简单说一下这件事的由来。 js解释型语言的一大特点是性能比较慢，尤其是当Web应用比较复杂时。 2009年，JIT被添加到v8引擎中。 （即时编译），有了buff，提升几乎是20到40倍。 JIT是基于运行时分析进行编译的，但它是一种没有类型的语言，所以大多数时候，JIT编译器都是在猜测类型。 如果类型猜错了，就只能重新开始了。 所以当时有两个想法，一是这样就不用猜类型了；二是这样就不用猜类型了。 另一个是asm.js，它实际上是一个标签类型。 随后 、Apple、 和 W3C 想要标准化此方法。 结果，它变得激进了。 无需标记类型。 他们干脆直接定义了一个新的方法，比如用c/c++编写，编译成.Wasm格式的二进制文件，直接加载这个二进制文件来运行。 这样就可以缩小Web应用程序和原生应用程序之间的性能差距。

接下来我们来说说H5开发的其他主要相关点。 一是工程化，其实是近几年才出现的，特别是在大型前端项目中。 这主要需要掌握AMD的几个规范，以及主要的工具等。 然后是主要的库和框架。 这里就来说说weex吧。 Weex 由阿里巴巴推出，通常与 vue 配合使用。 与react类似，它允许开发使用js来编写原生应用程序，因此通常被称为vue-。 本周将公布，并准备一个js引擎。 执行过程中会生成各种命令并发送给端进行渲染等。

*后主要是和游戏开发相关的，比如DOM CSS，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 操作，这可以使用原生 CSS3 来完成。 画面中的元素比较简单，逻辑也不算太复杂，结构与常规网页一致； 主要技术点：DOM元素、原生css3

稍微复杂的H5游戏开发技术

复杂度高于传统网页。

主要技术点：，，一些dom元素css3

然后就变得比较复杂了，比如切水果，这个比较复杂，主要是一些DOM元素的操作。

复杂的H5游戏开发技术

然后，再看一下。 复杂的游戏开发，如传奇世界，主要基于H5游戏引擎。

H5小游戏引擎

看看这些游戏引擎的主要比较。 Egret是目前社区非常活跃的H5引擎。 去年宣布支持2D和3D VR。 还支持js和ts开发。 经典的代表就是传奇世界。 另外，laya引擎支持js ts as()。 所以以前做flash/as开发的人或许可以转行做这个。 然后是 Three.js，它只支持 3D。 跳跃和纪念碑谷迷你游戏都是通过三个提供的。 那么，这也是一个老引擎，开心斗地主。 那我们就来说说另外一个吧。 阿里巴巴还开源了H5小游戏引擎hilo。 阿里巴巴的双十一营销活动、小游戏、天猫嘉年华等都是通过这个来的。

前端工程

我们来看看前端工程。 这其实是近几年才出现的一个概念。 主要是需要掌握代码组织规范和工具（帮助你压缩、打包依赖等），然后还需要了解node.js，它是基于v8引擎的。 其实这也是用于服务器端编程的。 另一个是NPM包管理。

这些是你需要了解的H5游戏的基本点。

3.微信小程序

那就看看微信小程序吧。 微信小程序其实也是基于的。

目前小程序的视图层作为渲染载体，逻辑层则独立（IOS）和X5（）作为运行环境。

4.微信小游戏

小游戏与H5游戏、小程序对比

小游戏是在H5游戏的基础上，增加了微信社交能力、文件系统、工具链，并去掉了一些对游戏开发不太重要的，比如Dom、Bom等。从这张图可以看出，微信小游戏游戏消失了。 H5标准API是微信小游戏SDK本身实现的，比如webgl。然后就是游戏引擎层，是一个适配。

小游戏资源加载

目前核心游戏包大小为4M（首次加载），可以立即玩，下载需要3~5秒。

理论上，如果用户不主动删除，微信客户端只会更新，不会删除； 容量没有固定值，只有不够用才会按照LRU（）规则删除。

游戏

小游戏的运行环境在IOS上是Core，在上是V8。 没有DOM和BOM运行环境。 ，通过wx api模拟BOM和DOM的代码库。

它是一个适配层，可以让基于浏览器环境的第三方代码更快的适应小游戏的运行环境。 它不是基本库的一部分。 更准确地说，我们将视图和游戏引擎都视为第三方库，在小型游戏项目中需要开发自己引入。

当然游戏引擎也进行了自我适配，比如cosos

开放小游戏注册类别

目前有6大类24个小类

小游戏开放能力及API

小游戏打开工具

小游戏开发工具

为了帮助开发简单高效地开发和调试微信小程序和微信小游戏，微信在原有公众号网页调试工具的基础上推出了全新的微信开发工具，集公众号网页调试和小程序 有两种开发模式：，小游戏开发，还附带小游戏演示。 详情请参阅网站。

5.微信小游戏应用

小游戏营销体系构建

小游戏营销活动及营销应用构建。

游戏预热及用户沉淀

简单的试玩版可以提升玩家对游戏的期待，吸引用户。

小游戏营销

通过小游戏做一些营销活动或者营销推广。 （阿里巴巴双十一、天猫嘉年华等）

APP导流

小游戏可以给APP引流

品牌推广

利用小游戏的流量传播优势做品牌传播等。

*后感谢苏秋红、黄建新、陈亮亮、李亦奇、王悦等提供相关分享参考，以及以下参考资料：

《2018微信公开课》

《微信小游戏适配原理》——cocos 王哲

《天猫双11狂欢城互动技术解决方案》InfoQ - 邓红春（阿里巴巴旭斌）

“使用 HTML5、CSS3 和 WebGL开发HTML5 游戏” - Jacob Huang 电子工业出版社，丹麦

《前端工程-系统设计与实践》-周俊鹏电子工业出版社

让我们共同努力推动WEB和大前端的发展！

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等