前言
本文主要记录用Egret开发微信小游戏过程中碰到的一些问题及文档中没有提到的一些需要注意的事项。如果是初学者，想要学习如何用Egret开发微信小游戏，请跳转到官方文档进行查阅。
选择框架的原因
目前开发微信小游戏的主要框架有：Egret Laya Cocos。去年过年前，接到了个项目，开发一款小游戏。由于之前未开发过游戏且项目时间紧，于是为了快速完成开发，最终选择了Egret作为该小游戏的开发框架。
之所以选择框架，而不是用原生的js写。主要有那么几个点（没列完）：
1、原生的js写小游戏实在难度过大；
2、布局及适配问题，比如一个实现一个带背景色的文本框，让文本居中对齐，换行、滚动列表等；
3、点击事件问题，小游戏中原生判断是通过判断触摸点的位置...（想象一下cancas上一堆元素，你要挨个判断的时候）；
4、点击事件捕获，例如加载一个半透明蒙版，蒙版下的内容不给点击...
用到的库
由于Egret，它底下也分很多库。所以，这里简单说一下。（初学的话，只看Egret Engine2D就可以了）
- 一般开发小游戏肯定用到了它的核心库，也就是Egret Engine2D ；
- 其次如果用到了列表、滚动列表等，那么需要用到EUI库；
- 如果用到了动画，那么就涉及Tween（这个最简单）。
- 资源加载库RES（这个不用学也可以）。
其中EUI库中封装了一些东西：
组件：像Label Image Button 等。
布局类：像BasicLayout、TileLayout（多列布局时用到，常用于做图鉴、装备格子之类的东西）。
新建项目
假设你已经安装好了Egret Wing和Egret Launcher这2个东西。那么下面新建一个项目试试看。
如下图所示，你需要注意的地方主要有：
- 1、项目类型（这里其实你选游戏项目和EUI项目，都是一样的）
- 2、把egret核心库 assetsmanager资源管理器 t ween缓动动画库 eui界面制作库 game游戏库都勾上即可。
- 3、舞台尺寸，填375*667即可，也就是6s的默认尺寸（这个其实没什么影响的。）
- 4、缩放模式，这个可以点旁边的？去具体查看详情，一般填noBorder就可以了（这个模式是等比例拉伸至最小的边能显示完全，不会存在黑边。但作为背景，可能会一部分边边角角的图片没被显示）。
-
5、旋转方式，看你项目的了是竖屏还是横屏了。竖屏是portrait，横屏是landscape，或者是横竖屏都支持的话，就选auto。
image.png
所用语言
Egret使用的是TS开发（也就是TypeScript，但其实和用js差不多，没什么值得注意的地方，这里不多讲。）
构建、调试、发布（发布为其他平台的游戏）
进入到刚刚新建的界面，主要是下方这样。
image.png
由于默认创建的是WEB项目，所以此时，点击 构建 或者 调试的话，会弹出下面一个东西。
image.png
构建和调试的区别：官方文档中并没有提到这一茬，所以我这边也不知道它们之间有什么区别。
发布：发布为其他平台的游戏，这里我们主要发布为微信小游戏，填appid和小游戏名称即可，这里的小游戏名称是你用微信开发工具打开小游戏项目时里显示的那个项目名字。
值得注意的是：
- 1、appid要在你填写了游戏类目之后才有用。
- 2、每次发布都会覆盖platform.js和openDataContext下的index.js文件，这2个，1个是和原生小游戏API交互的文件，1个是绘制排行榜的文件。所以，如果中途想要更换appid，编译到其他小游戏账号中时，记得先保存这2个文件！（初次发布则没有这个烦恼，因为默认就什么鬼东西都没有）
image.png
然后点确定，Egret就会在你的项目目录下，新建一个 EgretWxGame_wxgame的文件，把小游戏编译到该目录。
image.png
然后打开，就可以在微信开发工具上预览小游戏啦。
image.png
这里还有个问题，就是在下方看到打印出js/egret.js和js/eui.js超过500K。
这怎么能忍，小游戏的主要包就4M大小，egret2个库就占用了1M多。所以，我们可以用Egret提供的命令去压缩一下。
用命令行窗口，进入到上面看到的EgretWxGame文件夹下（也就是你的项目的根目录下），执行以下代码:
egret publish --target wxgame；
然后等再次编译好，就可以看到已经没有下方警告了。
image.png
修改配置
image.png
和微信小游戏原生API交互问题
Egret 框架和原生小游戏API交互，主要是通过platform.js进行的。
所以，日常开发的话是用Egret，然后编译到微信小游戏，再通过微信开发工具来调试原生API。
在尝试着进行两者之间的交互前，我们先看下Egret项目中Platform.ts和微信小游戏项目中platform.js中2者的联系。
image.png
image.png
可以看到流程是这样的，在Platform.ts中的declare interface Platform中定义接口，在 下方的DebugPlatform中也定义同样的方法，然后在platform.js中实现该方法，这样就实现了从2者之间的交互。
下面来动手实现一次交互，通过点击目前屏幕上的背景，传递参数name到platform.js中，在platform.js中输出 hello + 参数name的值。
步骤如下：
1、在Main.ts中的createGameScene方法中加入如下语句：
image.png
sky.touchEnabled = true;
sky.addEventListener(egret.TouchEvent.TOUCH_TAP,this.clickMaskOnMain,this);
2、实现clickMaskOnMain方法
private clickMaskOnMain(){
platform.clickMask('Egret');
}
3、在Platform.ts中定义如下接口和方法
image.png
4、在platform.js中实现该方法
clickMask(name){
console.log('hello ' + name);
}
然后构建一下，点击背景，可以看到控制台有打印出，至此，交互这边算是没问题了。
image.png
小结
篇幅过长了，所以就先到此结束。
本想写一些值得注意的地方，没想到还是写成了教程类的文章。
网友评论