微信小游戏的技术5要点讲解
微信小程序最近新上线了小游戏类目。今天我们就一起来看看这个小游戏到底是什么东西：
一、小游戏是什么技术？
它是基于微信原生功能特性的、仅保留HTML5游戏特性的综合技术。小游戏保留了H5中游戏相关的技术，而在此基础上又追加了小程序部分特性能力。这样出来的游戏，技术更专注、特点更微信。
二、小游戏能跨平台上线吗？
基于小程序的账号体系，与小程序一样，小游戏只能运行于微信中，难以实现跨平台上线。
三、与普通小程序设计一样吗？
普通小程序的设计模式是&单向&绑定的模式，入口在app.js，通过定义各个页面，然后在页面中给回调事件定义逻辑代码实现数据呈现。
而&小游戏&更加自由，入口在game.js，没有page的概念，通过weapp-adapter.js引进canvas实例，无设计模式要求。
综上所述，小游戏和小程序都是存在于微信生态环境内，但是两者的设计开发模式截然不同。
四、能直接搬动现有的原生功能吗？
小游戏是基于普通H5游戏技术，更多的是Canvas技术，同时提供原生能力API。现有游戏框架，如createjs、threejs等2d或者3d框架，经过小改就能直接应用于小程序的&小游戏&中，同样，小游戏也会如普通小程序一样支持部分原生功能。
五、小游戏都可以由谁来开发？
由于官方还没完全开放该功能，所以就目前而言。小游戏跟普通小程序一样，小游戏暂不对个人开发者开放。做H5的熬到头了？微信今天正式上线“小游戏”！
做H5的熬到头了？微信今天正式上线“小游戏”！
文 | 手游那点事 | 火龙果、Ravens
去年的这个时候，张小龙才刚说完“微信小程序现在不能做游戏”。
而就在今天，微信的多个官方公众号共同推送了“公布小游戏”的消息，一时间不管是沉迷“跳一跳”的玩家，还是开启朋友圈刷屏的业内人士，都陷入了腾讯这个年终大招里。那么微信“小游戏”到底是什么？有哪些小游戏已经可以在微信中进行呈现？它对当下的H5游戏格局及流量格局又会带来怎样的影响？
一、“小游戏”上线：有稳定入口、可群分享、可内购
早在2014年，曾经的小游戏刷爆朋友圈，“用N步堵住猫，击败了全国x%的人”之类的链接源源不断地出现在微信中，而就在某次的更新之后，这些风靡朋友圈的游戏链接便都从我们的视野中消失了。
《围住神经猫》是当初风靡朋友圈的小游戏之一
而今天腾讯微信通过多个官方公众号正式向用户公布了“小游戏”发布的消息，微信小程序从此迎来了支持游戏的时代，曾经的小游戏刷爆我们朋友圈的时代或许又将归来！目前，用户只需将手机里的微信客户端升级到6.6.1版本后，通过以下方式便可以进入游戏：1从「发现-游戏」进入「小游戏」，并查看好友玩过的小游戏；2.在微信的「搜一搜」中搜索小游戏的名称，例如搜索“跳一跳”，就能直接进入游戏。
此次更新后不少用户已经被这个图刷屏了
“小游戏”实际上是微信小程序中的一个类目，它即点即玩，无需下载安装，体验轻便，甚至可以跟微信内的好友一起玩，比如PK、围观等，享受游戏的更多乐趣。
现在“小游戏”已经允许群分享，但还不能分享到朋友圈。在商业模式上，安卓系统允许内购的存在。
二、第一批小游戏共15款，棋牌、休闲居多，充分展现“游戏即社交”
除了版本更新后的开屏小游戏《跳一跳》之外，微信今日正式上线了第一批“小游戏”。目前微信上的小游戏数量不多，共15款，包括《四川麻将》、《广东麻将》、《腾讯中国象棋》等多款棋牌游戏，以及《爱消除乐园》、《欢乐消消消》、《大家来找茬腾讯版》等多款休闲游戏。
文末另附15款游戏展示图
从表格中可以看到，棋牌类游戏有6款，休闲类游戏有8款，还有一款属于轻竞技品类的《欢乐坦克大战》。这在一定程度上也表明，
短期内微信小游戏将主攻这些游戏市场，不论是棋牌类、休闲类还是竞技类，无疑都是更加适合社交的品类
，“游戏即社交”，或许会在微信小游戏这一小程序上展现得更加彻底。
这些小游戏可以分享给好友/群组、与好友PK、以及提供好友战绩排行榜。另外，小游戏还具备围观功能，以《跳一跳》为例，在游戏过程中可以将链接分享给好友/群组，类似于“游戏直播”。在游戏结束之后可以选择向好友发起挑战。
基于微信的熟人社交，这些小游戏的分享概率会更高。
另外，值得注意的是，微信小游戏还为玩家提供了“添加到桌面”的功能，便于玩家快速找到游戏入口。
三、开发者已经可以尝试研发小游戏
此次微信的更新为普通用户提供了一个更加快捷方便的玩游戏的途径，而对于H5手游开发者来说，此次更新无疑是腾讯在今年这最后几天为他们献上的最好礼物。
在此次更新后，H5手游开发者们可以在公众平台上查阅小游戏开发文档并下载最新的开发者工具。
此次更新后微信官方对于小游戏开发支持的公告
在开发者文档中，微信官方表示，小游戏只有两个必要文件：1.game.js小游戏主程序入口2.game.jason配置文件，游戏运行在JavaScriptCore中。同时官方也明确支持HTML5游戏。
小游戏开发文档中的快速上手页面，列举了小游戏必要文件、运行环境和H5游戏适配指引等事项
对众多的H5手游开发者来说，微信官方此次在小游戏上的开放无疑是提供了一个更广阔的平台，
小程序的开发环境和对手机功能等的调用能使得开发者们可以更多实现自己的想法。
同时因为小游戏仍是小程序的一个类目，在调用玩家们的资料等也将更加简便顺畅。而游戏的内购则使得小游戏开发者们有机会获得可观的收益，不必如之前那般陷入无法将流量变现的窘境。
四、做H5的熬到头了？小游戏更有优势
1.固定流量入口
目前，微信小游戏可以通过“发现-游戏”找到玩过的小游戏，另一种方式是或者直接在小程序中搜索小游戏的名称。虽然在微信客户端上没有一级入口，但是和以往即玩即走的H5游戏相比，微信小游戏的入口更为固定。比如
微信的主界面新增了任务栏，玩家体验过小游戏之后，下拉主界面就会出现这些小游戏，而以往微信的小程序并不支持这项功能。
另外，前面提到，
小游戏中还具备将其“添加到桌面”的功能，这些都便于玩家找到游戏入口以及降低玩家的流失率。
从这个角度来说，腾讯给予小程序的新品类“微信小游戏”以及开发者更多的开放空间，一定程度上保证了小游戏流量入口的稳定性。
2.开发会更简单，门槛更低
从开发层面上而言，通过腾讯提供的小游戏开发文档和开发者工具，开发者在小游戏开发方面也将会更加方便，便于快速上手。在开发者文档中也可以看到，小游戏只有game.js小游戏主程序入口和game.json配置文件两个必要文件。
3.未来腾讯有可能开放小程序朋友圈分享
虽然目前微信小游戏可以分享给好友以及群组，并不支持朋友圈分享。但在此之前，微信还是支持这一功能的。借助微信的人际传播，2014年一款名为《围住神经猫》的H5小游戏在朋友圈疯狂刷屏，一举成为当年的H5游戏爆款。随后，微信关闭了H5游戏分享朋友圈的设置，这一做法可以理解为腾讯掐断了H5游戏部分的流量入口，对其进行了限制。
如今，微信对小游戏开发者更加开放，包括开发者计划、固定流量入口等等，如果作为一个小游戏发行平台而言，未来开放小程序朋友圈分享也并非不可能。
五、更大的冲击：腾讯社交游戏已经为春节做好了准备
上述相比以往H5游戏的优势其实都是建立了微信这一平台上的，
微信和WeChat合并月活跃用户达到9.8亿，其本身能够带来的庞大流量是“微信小游戏”最根本的竞争力所在
。另外，伴随着小游戏入口权重的提高，对于H5游戏市场或者说这类小游戏而言都是利好的。
而从游戏场景上看，小游戏生态实际上是微信庞大流量的再次激活。
小游戏的出现给玩家提供了极大的便利，社交游戏、轻度玩法、即点即玩、无需下载，这些元素都使得小游戏成为了熟人聚集时会优先考虑的娱乐消遣方式之一。
因此腾讯微信的这个年底大招可以说是放得正是时候，春节是每年社交游戏迎来爆发的最好时候，想象一下春节期间三五好友聚集，打开微信小游戏，打几把斗地主或麻将，也是美滋滋。
而未来小游戏如果能形成规模化，它不仅是对游戏场景的优化，更是对应用商店流量格局的冲击。
来源：手游那点事
叶子猪每日行业播报系叶子猪游戏网出品的资讯栏目，仅作于汇聚互联网游戏行业的每日资讯，如需查看文章出处可点击阅读原文。微信2048游戏开发中的几个前端知识点_Alien的笔记
不自重者，取辱。不自长者，取祸。不自满者，受益。不自足者，博闻。
问题一：既然这个数字游戏是放到了微信公众账号里，那用户玩儿的时候也就必然是在微信里玩儿的，如果用户在玩儿的过程中，来了一条微信消息，用户该犹豫了，是继续玩儿呢，还是去看消息？继续玩儿：那万一是一条很重要的消息，现在继续玩儿，不去看的话，耽误了怎么办？去看消息：那现在都快玩到目标了，退出去以后，积分不就都丢了，那不白玩了么？解决方案：为游戏增加本地存储的功能，具体策略：在用户每次移动一个小格子之后，都更新游戏状态到本地游戏胜利或失败时，清除游戏本地缓存游戏重新开始时，清除游戏本地缓存首次进入游戏时，加载游戏本地缓存，并提示用户：有自动存局的游戏，是否继续？所用知识点：HTML5之localStorage问题二：为了便于游戏的传播，当然是希望用户主动分享游戏到朋友圈、微信好友、或腾讯微博，但在微信内置的浏览器中，默认分享出去的，就是游戏的标题和游戏的地址，连个配图都没用，传播效果会很差！解决方案：利用前一篇文章（）中提到的WeixinApi，监听各个微信分享行为：监听分享到朋友圈的操作，自定义分享内容（当前游戏的信息）监听分享到微信好友的操作，自定义分享内容（当前游戏的信息）监听分享到腾讯微博的操作，自定义分享内容（当前游戏的信息）所用知识点：微信公众平台如何对WebView进行Javascript Interface支持的，调研并完善WeixinApi.js类库问题三：用户对新事物的认知，图片一定比文字更能直接。所以用户分享出去的游戏，一定要配图，而且每个人玩儿自己的游戏，配图一定都是不一样的。接下来需要做的，就是如何将当前的游戏状态生成为图片，并通过微信分享出去？解决方案：首先能想到的办法，就是直接将HTML节点转换到Canvas上，通过Canvas的toDataURI方法将节点（就是游戏状态了）转换为图片数据。分别对iPhone和Android手机上得微信内置浏览器（WebView）进行分析调研与尝试，然后分平台进行处理：iPhone上，直接将Canvas转换出来的dataURI格式图片数据，作为微信分享Data中的imgUrl分享出去，iPhone端的微信会自动上传dataURI数据到服务器并生成图片URLAndroid手机上，微信不会将dataURI的图片数据上报，所以我需要自己开一个服务接口，实现data:image/base64,&格式的图片到图片文件的转存，并生成固定URL；并分享出去由于Android端上需要将数据上报到我自己的服务器，所以整个分享过程必须异步执行，为了避免“用户点击相应的分享按钮后，分享对话框一直不弹出”的情况，需要增加一个loading的效果，让用户感知到分享正在进行中所用知识点：共两点HTML节点到Canvas的转换，并用Canvas生成dataURI格式图片；用到之前的一个组件：html2canvas.js在服务器端开一个接口，完成dataURI格式数据到图片文件的转换，并生成固定URL
趣店（原趣分期）技术学院 重点关注技术架构、服务化、优秀工具、自动化平台、开发全流程一体化解决方案、新人培养、工程师进阶之道等方面 这里环境优雅、氛围年轻、主要是福利还多，还等什么？我们敞开技术的大门，欢迎各种工程师加入！
回复 海天 : 看下JS脚本，然后在结算方法的里面加功能 通过ajax将分传到服务器
海天&said: 我又来了……
我看了你在评论里说的源码
但是我是在不懂html5
现在源码也能用 不过想知道 怎么样可以将游戏的得分传送到数据库？
能帮我一下吗？
回复 微信梯子 : 赞啊！不过我不是专门儿搞微信开发的，我就是以前随便玩儿玩儿而已
微信梯子&said: 用过你的微信内置浏览器脚本，想不到大侠也在做微信游戏。我根据别人代码修改了一些bug，做了个2048恋爱高手版，并觉得这个2048游戏可以做一些品牌植入，参见我的博客http:...
回复 海天 : 实在是抱歉，连续忙了两个月。。。blog都没有时间更新了。你的问题解决了吗？
海天&said: ……博主能帮忙解决下吗
用过你的微信内置浏览器脚本，想不到大侠也在做微信游戏。我根据别人代码修改了一些bug，做了个2048恋爱高手版，并觉得这个2048游戏可以做一些品牌植入，参见我的博客http://www.weixintizi.com/blog/3.html
……博主能帮忙解决下吗
回复 Alien : 我在js文件夹下的local_storage_manager.js文件里加了类似这段代码
var a='{&id&:&1&,}';
var data='shareinfo='+a;
$.post(&share.php&, data );
我加载LocalStorageManager.prototype.getBestScore = function () {里的
但是貌似没有运行啊，而且之前你文章里那个 微信分享的是可以成功的？
是不是 我代码不对 或位置有问题？
Alien&said: 回复 海天 : 发一个ajax请求就可以了啊，随时都能保存数据
回复 海天 : 发一个ajax请求就可以了啊，随时都能保存数据
海天&said: 我又来了……
我看了你在评论里说的源码
但是我是在不懂html5
现在源码也能用 不过想知道 怎么样可以将游戏的得分传送到数据库？
能帮我一下吗？
我又来了……
我看了你在评论里说的源码
但是我是在不懂html5
现在源码也能用 不过想知道 怎么样可以将游戏的得分传送到数据库？
能帮我一下吗？
回复 pengpeng : 目前看来，是的。android的微信上不支持datauri图片
pengpeng&said: 请教一个问题 关于图片base64格式的
是不是安卓微信浏览器内src为此种格式的图片不会被显示出来,我在做一个微信浏览器内的编辑器
需要上传图片后，能直接插入到编辑框中，...
请教一个问题 关于图片base64格式的
是不是安卓微信浏览器内src为此种格式的图片不会被显示出来,我在做一个微信浏览器内的编辑器
需要上传图片后，能直接插入到编辑框中，实现预览，我用filereader获取的图片base64
在其他手机浏览器行 微信内 一直不显示图片
是不是只有和您一样的 把这个base64传给后台 生成网址
我再拿过来用啊
回复 料料 : 去github上搜2048，你会找到源码的。你想实现什么都可以
料料&said: 您好，我也想做一个这个游戏给我们论坛里的朋友用，请问这个数字块可以改成漂漂一点的图片吗？哪里有这个源码提供？
您好，我也想做一个这个游戏给我们论坛里的朋友用，请问这个数字块可以改成漂漂一点的图片吗？哪里有这个源码提供？
回复 Alien : 太感谢了！您说的在安卓上生成图片我还真看不懂……所以真的不好用了 呵呵
Alien&said: 回复 海天 : 很高兴你能对这个东西这么感兴趣，而且你是学生，我怎么可以“卖”给你呢？我会整理一下，直接把游戏部分的源码给你的。不过游戏里用到了我的一些服务，比如在...
回复 海天 : 很高兴你能对这个东西这么感兴趣，而且你是学生，我怎么可以“卖”给你呢？我会整理一下，直接把游戏部分的源码给你的。不过游戏里用到了我的一些服务，比如在android上生成游戏图片，你直接拿过去估计用不了。
海天&said: 您好，我是一个学生，正在运营一个学校的公众号
最近玩了2048这个游戏，很好玩，觉得同学们要是能一起玩并PK分数就更好了
在网上找了源码，但由于本人是小白，对html5不是...
您好，我是一个学生，正在运营一个学校的公众号
最近玩了2048这个游戏，很好玩，觉得同学们要是能一起玩并PK分数就更好了
在网上找了源码，但由于本人是小白，对html5不是很懂，看到您的版本最好，功能好多
请问能分享一下源码吗？或者我花钱购买，因为是学生，只要不是太贵就好
我的QQ 期待您的联系，谢谢啦
回复 nicevoice : 查了一下，应该是微信自身的问题了，Webview未设置DatabasePath。未设置的后果就是：杀进程后，数据就丢失了。
nicevoice&said: 回复 Alien : 阅后即焚么?可是在安卓数据上这个data数据还是存在本地啊，这个数据并没有被销毁呢？
回复 Alien : 阅后即焚么?可是在安卓数据上这个data数据还是存在本地啊，这个数据并没有被销毁呢？
Alien&said: 回复 nicevoice : 那是因为自己打开自己分享的链接，本地数据只有一份儿，是会复用的。其他人打开你分享出去的链接，是会重新开始的。游戏是尽可能的保护用户本地数据。
还有个问题是，存档
当继续用公众号的当然能够存档
但是问题来了
当你分享给好友后，打开分享给好友的链接后不存档了，然后返回到公众号发的链接
点开继续后发现存档没了
可能是微信api的限制还是什么？求攻略，谢谢
nicevoice&said: 有个小问题
分享给朋友后，再打开分享的链接后就replay了
请问能解决么
哈哈哈哈
回复 nicevoice : 那是因为自己打开自己分享的链接，本地数据只有一份儿，是会复用的。其他人打开你分享出去的链接，是会重新开始的。游戏是尽可能的保护用户本地数据。
nicevoice&said: 有个小问题
分享给朋友后，再打开分享的链接后就replay了
请问能解决么
哈哈哈哈
有个小问题
分享给朋友后，再打开分享的链接后就replay了
请问能解决么
nicevoice&said: mark~