北京华网天下

腾讯专家解析微信小游戏、H5 小游戏及微信小程序的关系

2024-07-10

来源：网络整理

作者简介：陈阳()

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

1.什么是微信小游戏？

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

微信小游戏、H5小游戏、微信小程序三者之间到底是什么关系呢？就像这张图，微信小游戏其实就是可以在微信小程序里运行的H5小游戏，既是微信小程序，又是H5小游戏。另外，三者其实还是有区别的，这个后面会讲到。

2. H5小游戏

什么是H5小游戏

首先，让我们看看什么是

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

1991年，开始研究开发。

1993 年发布。

1999 年 12 月发布。

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

2006年，W3C决定携手合作，推广新版HTML。

2008年1月，第一份正式草案发布。

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

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

新功能：、、本地存储、、新内容元素等等。

大家看到已经是1999年了，但是直到2014年，万维网联盟（W3C）才正式宣布发布，这是一个漫长而艰辛的过程，过程中也有一些小插曲，比如2006年左右，当时很火，很多网站都充斥着网页，也出现了一些有代表性的小游戏，比如小小，不知道大家还有没有印象，就是几个简单的小人物可以操作互相对战，很有意思。

当时有一个比较出名的网站叫闪客帝国，可以上传自己的作品，大概是2006年左右。

但其实从广义上来说，H5开发是一个技术的集合。如图5所示，我列出了一些要点，比如基础知识和标准规范，包括css3、es（我们目前开发主要用到的规范是es6）、和（最大的区别就是是强类型的），当然还有一些其他的W3C规范比如DOM/BOM（浏览器对象模型，比如.xxx）。然后就是H5开发者需要熟悉的开发和调试工具。接下来就是安全和性能优化，csrf/xss比较常见。

我先简单说一下这个的由来。js 是一门解释型语言，它的主要特点之一就是性能比较慢，特别是在 web 应用比较复杂的时候。所以在 2009 年的时候在 v8 引擎中加入了 JIT（Just-in-Time ），加了 buff 之后性能提升了大概 20 到 40 倍。JIT 是基于运行时分析来编译的，它是一种无类型的语言。所以大多数时候 JIT 编译器都是在猜类型，如果猜错了类型就只能推回去重新写。所以当时就出现了两个思路，一个是不需要猜类型；另一个就是 asm.js，其实就是一个类型标记，然后、苹果、微软、W3C 都想把这个方式标准化，结果就激进了，不需要类型标记这个东西了。简单定义了一种新方法，比如用c/c++编写，编译成.Wasm格式的二进制文件，直接加载这个二进制文件就可以运行，这样就可以缩小web应用和原生应用之间的性能差距。

接下来我们来说说H5开发其他主要的相关点。一个是工程化，其实这几年比较火，尤其在大型前端项目中，这个主要需要掌握几个规范，AMD，以及主要的工具比如。然后就是主要的库和框架，这里说一下Weex，Weex是阿里巴巴推出的，通常和Vue配合使用，和Vue类似，允许开发者使用js来编写原生应用，所以通常叫Vue-周会提到它，会准备一个js引擎，在执行过程中会生成各种命令，发送到原生端进行渲染等。

最后主要是跟游戏开发相关的，比如DOM CSS，还有一些游戏引擎。当然还有一些其他的点。其实游戏开发和整个H5开发还是有一些区别的，做普通web开发的人就没必要去了解这些了。所以在有些公司里，H5游戏开发已经和web前端开发分开了。好了，这里总结一下，H5游戏就是基于H5技术集合开发出来的小游戏。

H5小游戏特色：

优势：

开发成本相对较低

跨系统、跨终端、跨平台

无需下载安装，点击即可播放

缺点：

生产门槛相对较低

缺乏固定交通入口

体验差距（性能、流量等）

根据艾瑞咨询和白鹭时代在线数据显示，2017年H5游戏市场规模为30亿元，而移动游戏市场规模达到1440亿元，二者比例为1:48。以PC游戏和网页游戏的发展历程为参考，网页游戏与PC游戏的市场比例约为1:3。随着流量费的降低、手机的更新换代、H5的不断发展，以及H5游戏多流量入口、点击即可畅玩等特点，H5游戏市场或将拥有巨大的增长空间。

H5小游戏开发简介

2014年，《包围紧张的猫》和《愚公移山》在微信朋友圈爆红，参与人数超过1亿。

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小游戏引擎

我们来看看这几个游戏引擎主要的对比。是一个社区很活跃的 H5 引擎，去年就宣布支持了，而且支持 2D、3D 和 VR，同时还支持 JS 和 TS 开发，经典代表就是热血传奇。另外 Laya 引擎支持 JS TS as()。所以以前做 /as 开发的朋友可能可以转用这个了。然后就是 .js，只支持 3D，Jump Jump、纪念碑谷小游戏都是出自它。然后这个也是老牌引擎，开心斗地主。然后我们再说另外一个，阿里巴巴也开源了一个 H5 小游戏引擎 Hilo，阿里巴巴的双十一营销活动小游戏、天猫嘉年华城等都是出自这个。

前端工程

我们再来看看前端工程化，其实也是近几年兴起的一个概念，主要需要掌握代码组织标准和工具（帮你压缩打包解决依赖等），还要了解基于 v8 引擎的 node.js，其实这个对于服务端编程也是有用的，还有一个就是 NPM 包管理。

以上就是关于H5游戏你需要了解的基本要点。

3. 微信小程序

然后我们来看看微信小程序，微信小程序其实就是基于的。

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

4.微信小游戏

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

小游戏是在 H5 游戏的基础上，添加了微信社交能力、文件系统、工具链，去掉了一些对游戏开发不那么重要的东西，比如 Dom、Bom 等。从这张图上可以看到微信小游戏没有了，这里的 H5 标准 API 都是微信小游戏 SDK 自己实现的，比如说。然后就是游戏引擎层，这是一个适配。

小游戏资源加载

目前核心游戏包为4M（首次加载），可立即下载并播放，下载时间需3到5秒。

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