微信小游戏从了解到游戏发布的全流程技术介绍！
微信小游戏从了解到游戏发布的全流程技术介绍！
微信小游戏推出后，LayaAir引擎也同步支持了微信小游戏的开发，由于很多开发者对微信小游戏的开发流程不够了解，不太清楚如何下手。为此，我们在2018年的开工首日，从简介篇，小游戏创建篇，综合介绍篇三部分，全面介绍微信小游戏的开发、测试，与重要项目规则。
简 介 篇
首先，我们要了解什么是微信小游戏？
腾讯官方的解释是：
微信小游戏是微信小程序的一个类目，它即点即玩，无需下载安装，体验轻便，可以和微信内的好友一起玩，比如PK、围观等。
即点即玩，无需下载安装。这应该就是H5游戏了吧？
怎么解释呢？这要先从H5的定义说起……
通常大家都认为H5就是HTML5的简称，但是在开发者的眼里，HTML5只是一个WEB技术标准，符合这个标准的，并且能在浏览器里运行的游戏才是HTML5游戏。而更多的人，对技术了解不多。为了便于理解，把即点即玩，无需下载安装的游戏都称之为H5游戏，还有人叫手机页游。
微信小游戏的运行环境并不是浏览器，也不能在浏览器中运行，而是运行于微信APP中的Runtime。尽管微信小游戏的接口兼容大部分Canvas和Webgl，具有即点即玩，无需下载安装的HTML5特性。显然，从严格的定义来讲，微信小游戏不是标准的HTML5游戏。
那么，如何能做到开发的游戏还能在浏览器中也运行起来呢？开发者只能使用微信小游戏的开放API开发吗？
带着这两个问题，我们继续介绍。
众所周知，LayaAir引擎是基于HTML5的全平台引擎，既然是全平台，那当然不能错过微信小游戏啦！
所以，在微信小游戏发布的当天，LayaAir引擎也为开发者推出微信小游戏的适配库。自LayaAir 1.7.14版开始，开发者下载最新版本引擎或IDE，只需要按照适配教程文档，初始化一下适配程序，即可将HTML5游戏项目无缝适配为微信小游戏项目。
这样，通过LayaAir引擎开发出来的项目，不仅可以运行在浏览器中、或者打包成为APP（iOS与Android）、还可以运行在微信小游戏的平台中。
或许，开发者还想了解，既然微信小游戏不是HTML5，那在开发的过程中需要注意哪些差异呢？
如果是采用微信官方API开发的话，还是要有一些要注意的，比如不支持DOM与BOM、小游戏只能有一个画布、不支持Eval、不支持XML等等……
但是，
对于LayaAir引擎的开发者来讲，不用刻意去了解到底有哪些差异，按照正常的LayaAir引擎开发规则去开发就可以了。即便是已经采用LayaAir引擎开发完成的老项目，替换最新版本引擎类库后，在主程序入口的Laya.init()之前，调用MiniAdpter.init()这个方法，去初始化一下适配程序，把预加载的本地包内容放入到layaNativeDir目录，即可完美支持微信小游戏。
AS3版本初始化
//AS3版本初始化微信小游戏的适配
MiniAdpter.init();
//初始化引擎
Laya.init(1136,640);TypeScript或JavaScript版本初始化：
//TS或JS版本初始化微信小游戏的适配
Laya.MiniAdpter.init();
//初始化引擎
Laya.init(1136,640);小游戏创建篇
一、准备好开发环境
1、下载并安装LayaAirIDE集成开发环境
LayaAirIDE是LayaAir引擎的集成开发环境，集成了LayaAir引擎与示例项目，UI、动画等可视化编辑，项目代码编写与管理等开发工具。开发者可以直接采用LayaAirIDE创建微信小游戏的示例项目。
官网下载地址 ：http://ldc.layabox.com/layadownload/?type=layaairide
Tips：LayaAirIDE 1.7.14版本才开始集成微信小游戏开发
2、下载并安装微信小游戏开发工具
微信小游戏开发工具是小游戏开发与测试的环境，由于LayaAir引擎的开发者完全可以使用LayaAirIDE进行项目开发，那么安装这个小游戏开发工具主要是用于小游戏项目编译、预览、真机测试与调试、上传发布等。
在小游戏开发文档的首页里，通过导航链接前往开发者工具下载页面 ，去下载开发工具。
开发工具下载地址： https://mp.weixin.qq.com/debug/wxagame/dev/devtools/download.html 3、创建一个小程序开发者帐号，获得开发者ID(AppID)
尽管没有AppID也可以开发调试，但是功能会受到限制。所以在开发之前，最好先去创建一个小程序开发者帐号。
注册地址：https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN
二、创建微信小游戏项目
1、用LayaAirIDE创建小游戏示例项目
打开LayaAirIDE，新建项目。选择”微信小游戏示例“，设置项目名称、项目路径、开发语言类型、引擎版本。就可以创建小游戏项目了，如下图所示。
Tips：本示例暂以ActionScript3开发语言为例，后面会讲一下TS和JS项目与AS3项目的区别。
2、查看示例项目效果
创建完项目之后，我们可以直接点一下调试按钮（如下图所示）。就可以看到我们的示例什么样子。
Tips：这一步除了编译js，主要为了让大家记住我们的示例什么样子，后面，如果小游戏效果也是这样的就没错了。
3、简单了解项目的发布目录。
LayaAir开发者应该了解，项目目录/bin下级的h5目录才是运行目录。LayaAirIDE已经自动在示例项目内创建了小游戏的适配程序，所以这个目录下的内容直接复制到小游戏的项目目录下（项目超过4M要特别处理，后面细讲）。
特别提醒 ：
当TS与JS目录下多个js文件时，没有合并可能会导致报错，AS项目编译器已做了合并处理。如果是TS或JS项目，1.7.14 beta版本只能先采用第三方的JS合并工具（比如webPack）将JS合并，然后再复制到小游戏的项目目录运行。LayaAirIDE计划1.7.14正式版本开始集成微信小游戏自动合并发布的功能。在LayaAirIDE中实现任何语言版本都可以一键发布为小游戏项目的目标。
三、创建小游戏项目
1、开发者帐号登录，选择项目类型
打开”微信web开发者工具“，用开发者的微信扫码登录。然后选择小程序项目点击进入项目设置。
2、设置小程序项目
在小程序项目设置面板里，为了快速体验小游戏项目，我们暂时将项目目录设置在LayaAirIDE创建的小游戏示例项目的运行目录。（正式开发，要另外创建一个发布目录，避免运行目录的资源超过4M被小游戏拒绝上传）
AppID在小程序开发者帐号里获得（如下图所示）。如果没有，可以点击小AppID输入框下的小游戏进行体验，但是功能会受到限制。
3、微信开发者工具的编译与调试
完成小游戏项目的创建后，点击编译，即可在工具内预览效果和调试，AS3项目的话，由于JS在编译时自动合并了，所以到这一步应该非常顺利，可以看到模式器中的效果与LayaAirIDE中的调试效果是一致的。
如果是TS或JS版本。如果不手动修改一定会报错。我们可以在调试器里看到报错信息，这块的调试就是chrome的调试方式，所以就不细讲了。
报错的原因基本上是由两个问题导致。
第一、TS与JS版本目前还没有集成小游戏的JS合并功能，所以多个JS文件会因为跨文件的执行域问题报错。
第二、同样是由于LayaAirIDE暂时还没有集成JS合并，所以小游戏的入口程序game.js里，引擎并未自动引入游戏的入口文件。所以不手动修改，肯定是找不到入口文件的。
解决方案：
第一、要使用第三方JS合并工具，将多个JS合并成为一个JS。然后修改入口程序game.js，将合并后的js引入即可。
修改后的game.js参考：
require("./weapp-adapter.js");
require("./main.min.js");第二、如果引擎JS不想合并到一起，也是可以的，只把项目JS合并到一起就行了。但是要在入口程序里将多个引擎JS引用进来。
修改后的game.js参考：
require("./weapp-adapter.js");
require("./libs/min/laya.core.min.js");
require("./libs/min/laya.wxmini.min.js");
require("./libs/min/laya.webgl.min.js");
require("./libs/min/laya.ui.min.js");
require("./main.min.js");第三、有没有不合并的解决方式呢，也是可以的，因为JS文件的声明如果不是全局的，在其他JS环境下无法找到定义，那么，我们将变量的声明改成全局变量，那就可以解决了。比如，我们的小游戏示例程序，通过调试器可以看出是找不到TestPageUI，那么我们在layaUI.max.all.js找到TestPageUI将其变为window.TestPageUI（如下图所示），然后再修改入口程序game.js，引用所有的JS就可以了。
修改后的game.js参考：
require("./weapp-adapter.js");
require("./libs/min/laya.core.min.js");
require("./libs/min/laya.wxmini.min.js");
require("./libs/min/laya.webgl.min.js");
require("./libs/min/laya.ui.min.js");
require("./js/ui/layaUI.max.all.js");
require("./main.min.js");需要提醒的，如果项目比较大，那改的地方就会比较多。至少在当前，并不推荐这种方式，因为IDE每次发布和更新项目时，又会被覆盖掉。建议采用JS合并的方式，将多个项目JS合并成为一个JS。
4、真机测试与调试
除非是一些新手遇到的小游戏的兼容问题，由于LayaAirIDE里也可以调试项目效果，基本上两边的效果不会有不一致的情况。所以这里最重要的是点击预览功能，通过手机微信扫码，在微信内进行真机测试与调试。
用微信扫码后，就启动了小程序项目，点击右上角的浮窗按钮，可以打开调试和打开性能监控面板。
开启真机调试与性能监控面板后，如下图所示。
至此，一个完整的小游戏开发流程就结束了。是不是很简单。采用LayaAirIDE开发的小游戏项目，基本上是无缝用于微信小游戏项目。
综合介绍篇
一、LayaAirIDE中的小游戏目录结构介绍
1、资源目录规划
res目录内是资源目录，LayaAirIDE里的res目录下是游戏项目中用到的资源。
这里重点提一下，微信小游戏允许每个游戏有4M本地物理容量，用于游戏前期加载，超过4M的小游戏项目是拒绝上传的。所以，一旦你的整个项目（资源和JS的总和）超过4M，就要从外网加载资源。 截图上的目录结构是IDE生成和创建的，少了一个layaNativeDir（后续版本应该会补上）。这里要重点说明一下，LayaAir引擎在底层对4M本地包目录进行了处理，当使用引擎的加载方法Laya.loader.load()加载资源时，layaNativeDir目录下的内容会直接从本地使用，其它目录下才会从网络动态加载。所以，我们需要手动创建一个layaNativeDir目录，用于存放小游戏4M包内的资源。 需要提醒开发者的是，开发测试时，如果要使用外网动态资源，需要勾选不校验安全域名（如下图所示）。
因为4M的限制。所以，游戏项目内，开发者需要规划好哪些是需要前期加载上传的内容，哪些是需要从外网加载的内容。建议把内容较大并且更新频率高的，都放到外网动态加载，要上传的项目包内，仅包括初始化加载必须的，和很少要改动的内容即可。尤其是大型游戏项目，可能JS加起来就2M多，那么仅剩的空间，只能用于Loading页的背景图资源。
Tips：4M的本地包内容无法动态更新或删除。每次修改必须要重新上传发布。
2、小游戏应用程序主文件
示例中的LayaUISample.max.js是LayaAirIDE创建的项目文件，也是小游戏应用程序的主文件，TS或JS项目如果开发时有多个项目文件的，需要合并成为一个JS文件作为小游戏应用程序的主文件。
3、小游戏项目文件
game.js、game.json、project.config.json、weapp-adapter.js 都是微信小游戏的项目文件，只有创建小游戏项目的时候LayaAirIDE才会创建。
二、一些踩过的“坑”
1、管理项目，只能创建、切换和删除。
在微信开发者工具里，项目一旦建立，没有编辑修改项目信息的地方。如果想修改项目信息，不用费力气去找这个功能了，直接删除项目重新创建即可。因为工具里的删除只会删除项目信息相关的内容，项目本身不会被删除。
在项目菜单里点击查看所有项目可以查看到当前存在的项目列表，直接点击项目，可以实现切换，点击加号创建按钮可以创建一个新项目。
如果想删除项目，点击管理项目可进入项目批量删除的界面。
2、读本地文件必须是ASCII编码
之前提到每个游戏有4M本地物理存储空间，这里需要特别注意的，如果需要读取本地物理空间内的配置文件，比如json文件。由于浏览器加载文件编码没有限制，引擎没有预留编码设置接口。而小游戏里读本地资源会校验编码，所以，当小游戏本地文件的编码格式不是ASCII，那就会报错。如果有配置文件存在4M的本地包内。目前必须要改为ASCII编码，后续引擎版本计划支持编码读取设置。
Tips：本地程序文件之间的引用（比如require或import）或者才是从网络中动态加载读取，都没有编码的校验限制。
3、不支持loader预加载声音使用
用LayaAir引擎开发小游戏时，要注意，不支持通过loader预加载声音文件的使用方式，声音播放直接用SoundManger音频管理类即可。
想了解更多微信小游戏的内容，可以关注开发者中心的技术文档，我们会不断的进行技术上的更新。如有关于微信小游戏的问题，欢迎LayaAir引擎的开发者前往开发者社区提出，我们针对每一个问题都有官方工作人员帮您解答。
社区地址：https://ask.layabox.com/
开发者中心：https://ldc.layabox.com/
END