微信小游戏从了解到游戏发布的全流程技术介绍！

最新推荐文章于 2024-09-11 23:30:28 发布

charley.layabox

最新推荐文章于 2024-09-11 23:30:28 发布

阅读量1k

点赞数

微信小游戏推出后，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参考：

1 2	`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编码，后续引擎版本计划支持编码读取设置。