您现在的位置：
微信小游戏开发技术与应用
来源：微信小程序 编辑： 发布时间： 11:04热度： ℃
微信小游戏、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游戏市场 可能存在巨大的增长空间。
2014年，《围住神经猫》、《愚公移山》，朋友圈病毒式传播，参与量过亿
2015年，《狂挂传奇》、《奇迹西游》，月流水上百万
2016年，《传奇世界》、《决战沙城》，月流水2000万+
2017年，《大天使之剑H5》，公测24天流水破亿，逐渐形成盈利效应&(三七互娱); 同年，QQ、微信、QQ浏览器、腾讯视频开启H5小游戏专区; 企鹅游戏APP、玩吧APP等专门的H5游戏平台诞生。
日，微信正式公布小程序支持小游戏。
最初只是一些简单的游戏，比如俄罗斯方块，这种主要的技术点就是DOM操作，用jQuery原生javascript css3就可以了。画面内元素比较简单，逻辑不会太复杂，结构与常规Web页面一致；主要技术点：DOM元素、jQuery、原生javascript css3
复杂度相对传统Web页高。
主要技术点：canvas、javascript、部分dom元素 css3
然后再复杂一点，比如切水果，相对复杂一些，主要是canvas 部分dom元素的操作。
然后，再看一下，复杂的游戏开发，比如传奇世界，主要是基于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游戏的基础上增加微信社交能力、文件系统、工具链，去掉一些对游戏开发不是那么重要的，像Dom、Bom等，从这张图可以看出来，微信小游戏没有webview了，H5规范API这里是微信小游戏sdk自己实现的，比如canvas webgl。然后还有就是 游戏引擎这一层，是做了一个适配
目前核心游戏包 4M（用于首次加载），可以实现即下即玩，需3~5秒的下载
理论上，用户若不主动删除，微信客户端只会更新不会删除；容量没有固定值，只有不够用的情况下根据LRU(Least recently used)规则进行删除。
小游戏的运行环境在IOS上是Javascript Core， 在Andriod上是 V8，没有DOM和BOM的运行环境。 Adapter，通过wx api模拟BOM、DOM的代码库。
Adapter 是为了让基于浏览器环境的第三方代码更快地适配小游戏运行环境的一层适配层，并不是基础库的一部分。更准确地说，我们将 adapter 视为和游戏引擎都视为第三方库，需要开发者在小游戏项目中自行引入。
当然，游戏引擎也自己做了适配的，例如cosos
目前是6大类 24个子类
为了帮助开发者简单和高效地开发和调试微信小程序、微信小游戏，微信在原有的公众号网页调试工具的基础上，推出了全新的 微信开发者工具，集成了公众号网页调试和小程序、小游戏开发两种开发模式，而且自带小游戏demo。详情可参考mp.weixin.qq.com。
小游戏的营销活动、营销应用等的建设。
简单试玩版，提升玩家对游戏的期待，沉淀用户。
通过小游戏做一些营销活动 或者 营销推广。(阿里双十一、天猫狂欢城等)
可以给APP导流
借助小游戏的流量传播优势，做品牌传播等等。
最后感谢苏秋宏、黄剑鑫、陈亮亮、李一奇、王跃等提供的相关分享参考，以及以下参考资料：
《微信公开课2018》
《微信小游戏适配原理》&& cocos 王哲
《天猫双11晚会和狂欢城的互动技术方案》InfoQ&&邓红春(阿里巴巴 续彬)
《利用HTML5，CSS3和WebGL开发HTML5游戏》&&丹麦Jacob Seidelin 黄蔚瀚译 电子工业出版社
《前端工程化-体系设计与实践》&&周俊鹏 电子工业出版社
大家共同努力，推动WEB及大前端的发展！
微信小游戏与传统的手机游戏有什么区别？
什么是微信小游戏？官方解释
微信小游戏的6大趋势分析
有故事的微信小游戏&跳一跳&
此文已由作者授权腾讯云+社区发布，转载请注明文章出处
微信小程序DEMO排行
微信小程序教程排行什么是h5游戏？为什么只在微信里看到？_百度知道
什么是h5游戏？为什么只在微信里看到？
H5游戏就是一种即点即玩的游戏,&h5游戏在开发的时候就调用了微信的相关接口,同时限定了只能微信打开此游戏。H5是一系列制作网页互动效果的技术集合，即H5就是移动端的web页面。而H5游戏，你可以看作是移动端的web游戏，无需下载软件即可体验，这就是H5在传播上的优势。对于许多手游玩家来说，H5可能是个十分陌生的名词，其实H5就是HTML的高级版本，目前H5技术正在不断完善。在技术方面，利用H5开发移动小游戏的门槛更低，所需时间更少。“你可以像写网页一样写游戏，而无需太多的额外学习，而且有大量文档与插件可用。”蜗牛数字科技股份有限公司陈芳曾如此形容H5的技术特点。事实也是如此，据媒体报道：风靡一时的“神经猫”只有一个设计加一个程序员，只用了一天半的时间。SOFTGAMES公司CEO阿列克斯指出，开发H5游戏有三大难题：一、不同手机的屏幕兼容性；二、操作方式的兼容性；三、H5游戏音频滞后，易导致移动浏览器载入时间过长、游戏卡顿、浏览器崩溃。
采纳率：100%
为您推荐：
其他类似问题
您可能关注的内容
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。什么是h5游戏？为什么只在微信里看到？_百度知道
什么是h5游戏？为什么只在微信里看到？
我有更好的答案
H5游戏就是一种即点即玩的游戏,&h5游戏在开发的时候就调用了微信的相关接口,同时限定了只能微信打开此游戏。H5是一系列制作网页互动效果的技术集合，即H5就是移动端的web页面。而H5游戏，你可以看作是移动端的web游戏，无需下载软件即可体验，这就是H5在传播上的优势。对于许多手游玩家来说，H5可能是个十分陌生的名词，其实H5就是HTML的高级版本，目前H5技术正在不断完善。在技术方面，利用H5开发移动小游戏的门槛更低，所需时间更少。“你可以像写网页一样写游戏，而无需太多的额外学习，而且有大量文档与插件可用。”蜗牛数字科技股份有限公司陈芳曾如此形容H5的技术特点。事实也是如此，据媒体报道：风靡一时的“神经猫”只有一个设计加一个程序员，只用了一天半的时间。SOFTGAMES公司CEO阿列克斯指出，开发H5游戏有三大难题：一、不同手机的屏幕兼容性；二、操作方式的兼容性；三、H5游戏音频滞后，易导致移动浏览器载入时间过长、游戏卡顿、浏览器崩溃。
采纳率：100%
H5游戏就是一个简单的网页游戏，制作过程比较简单，所以很多游戏看起来很生硬粗糙；至于为什么只在微信里看到，是因为微信在网页分享方面有很好的平台，你很难在别的移动APP上看到对这类网页很好的支持，因为别的地方不常看到， 所以就觉得只在微信里看到，只是因为有合适的环境吧
本回答被网友采纳
H5指的是html5 标记语言编写的超文本。 具有无视平台和系统的通用性.不止是在微信，在所有的浏览器都可以打开并且运行。只是不同的浏览器对某些属性的支持程度不同。
为您推荐：
其他类似问题
您可能关注的内容
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。微信小游戏与H5小游戏有哪些区别？ - 知乎7被浏览300分享邀请回答0添加评论分享收藏感谢收起微信推广H5互动游戏，该怎么看待 - 简书
微信推广H5互动游戏，该怎么看待
今天为什么会讲到H5互动游戏呢。因为无论在公众号还是在朋友圈都会经常看到很多企业用这种形式去制作活动来宣传自己的品牌。为什么是选择H5游戏呢。一、速度快1.制作时间快互联网时代讲求的是速度。之前在平台上面制作了一款宣传11.11的游戏，制作过程前前后后大概就用了5到10分钟左右，当然，这里面不包括图片制作和奖品梳理这两个环节。2.传播速度快因为是互动游戏，一般游戏设置里面都会有邀请好友或是分享的功能，自然大家都会抓着这一点来设计游戏了。3.体验时间快这里是针对用户讲的，H5互动游戏还叫H5小游戏。之所以叫小游戏是因为从点击开始游戏到游戏结束领取奖品这整个过程大概就只需要30秒左右。不会耽误用户过多的时间。二、成本投资小我不懂技术代码也不懂设计，只会一点文案和活动策划就可以做一个H5游戏出来了。简单方便快捷。所以，H5小游戏带来的方便就是节省投入成本，解放人力物力，给个人或企业带来流量和效益。同时我们也会发现，这种H5小游戏一般都是选择在微信朋友圈、公众号、好友群里进行传播。那又是为什么呢。我们都知道微信是我们国内最大的移动社交平台，流量之大应该不用我解释了。连腾讯都在“蹭”微信平台的流量。没错我讲的就是腾讯新闻，每天早、中、晚风雨不改的各推送4条新闻。微信除了是社交平台，还给创业者提供了无限流量入口。公众号的蓬勃发展和朋友圈每天刷爆屏的节奏，这都是流量啊。所以H5小游戏选择微信平台作为一个宣传突破口是有理有据的。
H5指的是HTML的第五次也是最后一次修订，在HTML5这个概念出现之后不久国外便兴起了H5游戏热，但好景不长，没过多久H5游戏就被Facebook等行业巨头相继放弃。国内也是同样的情景，2014年H5游戏《围住神经猫》火爆朋友圈让开发者对H5游戏趋之若鹜，然而这股热情却没...
社交红利阅读笔记 书名:社交红利（修订升级版） 作者:徐志斌 出版社:中信出版社 正文前笔记： 推荐序1摘要 社交网络带来创新变革的机会 马蔚华 招商银行前行长兼CEO 看本书时，也看到一些类似的感觉： 要求企业与时俱进。 方便为客户提供更优质的服务。社交网络与企业合作可以...
___________________________________________________________________________ 一、小额融资聚集人气
一个网站，要想能够发展起来，必须具备三大因素：定位，流量，资金。三者缺一不可，有创新的定位，足够...
国内的游戏行业发展到现在，也将近20年的时间。形成了一套发展脉络，我理解为： PC单机时代→PC网络时代→PC·WEB时代→移动网络时代 而其中PC·WEB的崛起，更多的是归功于 Flash的技术提升与中国网络环境的持续改善。造成了网页游戏的爆发出现了很多爆款游戏，收入也比...
在考虑如何做微信营销之前，你必须思考下面几个问题。 一、你为什么要做微信营销？ 是因为大家都在做微信营销吗？要知道所有人都在做同一件事情有时候也不一定是正确的，比如都站在船的一边。 是因为觉得自己不在微信上做营销的话就会处于被动地位吗？如果你不弄懂为什么要… 四个思考问题 ...
杭州的空气可谓是湿润的、迷人的，更是长久俘获人心的一抹清凉。但杭州是广袤的、无情的，是初来乍到者内心的一丝恐惧。 无论何时，总能看见三三两两的人，拖着行李箱，背着包。或是被杭州名声所吸引而千里迢迢赶来的，或是被杭州无情所打败而无可奈何离去的。来者兴致勃勃，去者灰心丧气。 我...
《啊哈！算法》第 2 章第 2 节，栈的 Swift 实现。 问题 判断字符串是否回文 解决 将字符串前半部分入栈，然后依次出栈，与后半部分字符一一比对。 代码在 GitHub
受Emma酱的再三邀请，昨天与她一同到西子参加演讲活动。据说他们请来了杭州某节目《和事佬》的节目主持人朱芸儿，尽管自己并没有看过这档节目，但心想能够将一档节目主持近7年，肯定是有些能力的，可以听听其经验和法宝 到西子后，发现其有两处做得很好，MAD可以借鉴的的地方： 在来宾...
▲ 云干货、云趣事 一点&蓝字&就有 ▲ 来自Gartner2016技术成熟曲线显示，面向教育行业的Cloud HPC（云超算/高性能计算云）已经正式进入应用阶段。 Gartner技术成熟曲线是每年发布一次，是旨在表达技术或应用软件的成熟度、它们在市场中的应用情况、这些技术...
虽然父亲离我已近二十年了，每逢父亲节，仍然不由自主的想到他，想他的音容笑貌，想他的严厉的教诲……那时，没有过多的亲近，对于他更多的是敬畏，现在想来，最多的应该是感激，没有他的教导就没有现在的自己，随手记下自己的感慨，辽慰怀念之心。 致远行的父亲 小时候 父亲是一棵树， 我是...