了不起的LayaBox:HTML5游戏开发指南
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

1.3.4 微信开发者工具的下载和使用

微信开发者工具是发布微信小游戏必须使用的工具,下载地址见链接1-7。打开下载页面后,选择和操作系统匹配的版本下载并安装,具体过程比较简单,在此不再赘述。

安装完毕,启动微信开发者工具,启动后需要和微信账号关联。在移动设备上打开微信,扫描识别码,微信开发者工具的启动页面如图1.19所示。单击启动页面左侧的【小程序项目】按钮,可将LayaAir项目发布成微信小游戏。单击【小程序项目】按钮,将出现小程序项目设置面板。

图1.19 微信开发者工具的启动页面

小程序项目设置面板中的具体设置如下。

(1)项目目录:D:\layabox2x\laya2project\chapter1\firstTest\release\wxgame,即所发布的微信小游戏项目的发布文件夹。

(2)AppID:单击如图1.20所示页面上的【小游戏】选项,将自动填充测试账号。

(3)单击【确定】按钮,完成设置,并自动切换至如图1.21所示的微信开发者工具主页面。

注意:AppID是小游戏的唯一标识码,一个AppID对应于一个不重复的注册邮箱。

图1.20 小程序项目设置面板

图1.21 微信开发者工具主页面

微信开发者工具主页面左侧是模拟器,右侧上部是编辑器,右侧下部是调试器。微信小游戏项目发布文件夹中的任何调整都会触发微信开发者工具的重新编译,在模拟器中的游戏体验与在LayaAir IDE或本地Web服务器中的基本一致。

接下来,可以在移动设备上将LayaAir 2D示例项目发布成微信小游戏。单击微信开发者工具主页面上的【预览】按钮,将弹出一个错误提示框,提示代码包的文件大小超过了微信小游戏规定的4MB上限,需要手动删除多余的代码,如图1.22所示。

图1.22 预览/错误提示

在删除多余的代码之前,需要了解微信小程序的代码结构。在微信开发者工具的编辑器中可以查看game.js(它是微信小程序的入口文件),代码如下。

在game.js文件的代码中包含对以下3个JavaScript文件的引用。

• weapp-adapter.js:微信小游戏运行的基础类库。

• libs/laya.wxmini.js:LayaBox引擎与微信小游戏的关联类库。

• index.js:真正的项目入口文件。

打开index.js文件,可以看见第9行至第12行代码引用了4个LayaBox引擎的类库文件,第14行代码引用的js/bundle.js文件是由LayaAir IDE 2D示例项目中的逻辑代码打包生成的,具体如下。

由此可见,在这个项目中,要想减小代码包的“体积”,只能删除libs目录下未在项目中关联的文件。在Windows操作系统的资源管理器中打开libs目录,即D:\layabox2x\laya2project\chapter1\firstTest\release\wxgame\libs\,保留以上代码中存在引用关系的5个JavaScript文件,具体如下,将其他文件全部删除。

• laya.core.js

• laya.physics.js

• laya.ui.js

• laya.webgl.js

• laya.wxmini.js

删除其他文件后,微信开发者工具将自动重新编译项目(可以在模拟器中验证项目是否能正常运行)。单击微信开发者工具主页面上的【预览】按钮,release\wxgame\文件夹下的内容将顺利上传到微信小游戏的测试服务器上,然后,会显示一个二维码。用微信扫描该二维码,即可在移动设备上体验刚刚完成的微信小游戏。在微信小游戏项目正式上线前,还有很多需要处理的细节,我们将在后续的章节中详细介绍。